/* Motion layer of the landing page: logo splash, cinematic particle hero, Instagram phone, video wall.
   Everything here works without JavaScript (static layout) and with prefers-reduced-motion (no movement).
   Animations are driven by Motion (motion.dev, vendored under /static/vendor) from /static/landing.js. */

:root { --ease-out: cubic-bezier(.22, .61, .36, 1); --cream: #fbf9f3; --line: #141516; }

/* ---------- splash: the Digirow mark draws itself, then the curtain opens ---------- */
#splash { display: none; }
html.js #splash.on { display: block; position: fixed; inset: 0; z-index: 1000; pointer-events: auto; }
#splash .sp-half { position: absolute; left: 0; right: 0; height: 50.5%; background: #0b0c0c; }
#splash .sp-top { top: 0; }
#splash .sp-bot { bottom: 0; }
#splash .sp-in { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 22px; }
#splash .sp-mark { width: clamp(84px, 9vw, 120px); height: auto; color: #f4f5f6; overflow: visible; }
#splash .sp-word { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 5vw, 54px); color: #f4f5f6; line-height: 1; display: flex; gap: .02em; }
#splash .sp-word span { display: inline-block; opacity: 0; line-height: 1.5; padding-bottom: .1em; }
#splash .sp-bar { width: clamp(120px, 17vw, 210px); height: 2px; background: rgba(244, 245, 246, .14); border-radius: 2px; overflow: hidden; }
#splash .sp-bar s { display: block; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
html[dir="rtl"] #splash .sp-bar s { transform-origin: 100% 50%; }
#splash .sp-skip { position: absolute; inset-inline-end: 22px; bottom: 22px; font: inherit; font-size: 13px; color: rgba(244, 245, 246, .6);
  background: none; border: 1px solid rgba(244, 245, 246, .25); border-radius: 999px; padding: 8px 18px; cursor: pointer; min-height: 44px; }

/* ---------- hero: a short film in scenes (WebGL particles from /static/landing.js) ---------- */
.cine { position: relative; padding: 0; height: calc((var(--n, 4) + 1) * 85vh + 15vh); height: calc((var(--n, 4) + 1) * 85svh + 15svh); margin-top: -90px;
  background: #060707; color: #f4f5f6; --lb: 0; }
.cn-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cn-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cn-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .7) 100%); }
/* film grain: one noise tile that jumps around (a composited transform, no repaint) */
.cn-grain { position: absolute; inset: -60px; pointer-events: none; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 14px); } 50% { transform: translate(18px, -26px); }
  75% { transform: translate(-12px, -8px); } 100% { transform: translate(26px, 20px); } }
/* letterbox bars close in once the film starts */
.cn-bar { position: absolute; left: 0; right: 0; height: 8vh; background: #000; transform: scaleY(var(--lb)); pointer-events: none; z-index: 2; }
.cn-bar.top { top: 0; transform-origin: 50% 0; }
.cn-bar.bot { bottom: 0; transform-origin: 50% 100%; }
.cn-hud { position: absolute; z-index: 3; top: calc(8vh * var(--lb) + 104px); left: 4vw; right: 4vw; display: flex; gap: 22px; align-items: center;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .22em; color: rgba(244, 245, 246, .55); pointer-events: none; }
.cn-hud .sc { margin-left: auto; }
.cn-hud .sc b { color: var(--lime); font-weight: 500; }
.cn-hud .rec { display: inline-flex; align-items: center; gap: 8px; }
.cn-hud .rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px #ff3b30; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.cn-fallback { position: absolute; inset: 0; display: none; place-items: center; padding-bottom: 28vh; pointer-events: none; }
.cn-fallback .cn-mark { width: clamp(120px, 16vw, 210px); height: auto; color: #f4f5f6; filter: drop-shadow(0 0 40px rgba(184, 229, 8, .25)); }
.cine.no-gl .cn-fallback, html:not(.js) .cn-fallback, .cine.cine-static .cn-fallback { display: grid; }
.cine.no-gl .cn-gl { display: none; }
.cine.gl .cn-fallback { display: block; padding: 0; }
.cine.gl .cn-mark { position: absolute; left: 0; top: 0; height: auto; opacity: 0; filter: none; will-change: transform, opacity; }

/* scenes: the intro centred under the mark; later scenes on the start side, the shape on the other side */
.cn-scene { position: absolute; z-index: 3; inset-inline-start: 7vw; bottom: 15vh; width: min(560px, 44vw); display: grid; gap: 14px; justify-items: start; }
.cn-scene h2 { margin: 0; color: #fff; font-weight: 900; font-size: clamp(2.2rem, 4.8vw, 4.6rem); line-height: 1.12; letter-spacing: -.01em; }
.cn-scene p { margin: 0; max-width: 44ch; color: rgba(244, 245, 246, .72); font-weight: 300; font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.9; }
.cn-no { display: inline-flex; align-items: center; gap: 14px; color: var(--lime); font-family: var(--accent-font); font-weight: 300; font-size: 1.05rem; }
.cn-no b { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .2em; color: rgba(244, 245, 246, .6); }
.cn-no i { width: 46px; height: 1px; background: rgba(244, 245, 246, .35); }
.cn-intro { inset-inline: 0; margin-inline: auto; bottom: 9vh; width: min(880px, calc(100% - 32px)); justify-items: center; text-align: center; gap: 12px; }
.cn-intro .badge { font-size: 13px; padding: 4px 14px; border-radius: 999px; background: rgba(184, 229, 8, .14); color: var(--lime); }
.cn-intro .accent { color: var(--lime); font-weight: 200; font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.5; }
#headline { margin: 0; color: #fff; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.2; }
.cn-intro .lead { margin: 0; max-width: 60ch; color: rgba(244, 245, 246, .74); font-weight: 300; font-size: clamp(.95rem, 1.3vw, 1.06rem); }
.cn-intro .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.cn-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.cn-chips .chip-stat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 6px 14px;
  display: flex; gap: 8px; align-items: baseline; }
.cn-chips .chip-stat b { display: inline; color: var(--lime); font-family: var(--display); font-size: 1.1rem; }
.cn-chips .chip-stat span { color: rgba(244, 245, 246, .7); font-size: .82rem; }
/* with JavaScript the scenes are cross-faded by the script; only the current one takes clicks */
html.js .cine:not(.cine-static) .cn-scene { opacity: 0; pointer-events: none; will-change: opacity, transform; }
html.js .cine:not(.cine-static) .cn-scene.on { pointer-events: auto; }
.cn-dots { position: absolute; z-index: 3; inset-inline-end: 3.2vw; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; pointer-events: none; }
.cn-dots i { width: 4px; height: 18px; border-radius: 4px; background: rgba(244, 245, 246, .22); transition: background .4s, height .4s; }
.cn-dots i.on { height: 38px; background: var(--lime); }
.cn-cue { position: absolute; z-index: 3; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .08em; color: rgba(244, 245, 246, .45); transition: opacity .4s; }
.cn-cue s { width: 44px; height: 1px; background: rgba(244, 245, 246, .28); overflow: hidden; position: relative; }
.cn-cue s::after { content: ""; position: absolute; inset: 0; background: #f4f5f6; animation: sweep 2.6s ease infinite; }
.cine.past-intro .cn-cue { opacity: 0; }
@keyframes sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* without JavaScript, or when the visitor asked for less motion: the scenes are stacked like a page */
html:not(.js) .cine, .cine.cine-static { height: auto; }
html:not(.js) .cn-sticky, .cine.cine-static .cn-sticky { position: relative; height: auto; overflow: visible; padding: 130px 0 70px; display: grid; gap: 64px; }
html:not(.js) .cn-fallback, .cine.cine-static .cn-fallback { position: relative; inset: auto; padding: 0; }
html:not(.js) .cn-scene, .cine.cine-static .cn-scene { position: relative; inset: auto; bottom: auto; margin-inline: auto; width: min(760px, calc(100% - 32px)); }
html:not(.js) .cn-gl, html:not(.js) .cn-hud, html:not(.js) .cn-dots, html:not(.js) .cn-cue, html:not(.js) .cn-bar,
.cine.cine-static .cn-gl, .cine.cine-static .cn-hud, .cine.cine-static .cn-dots, .cine.cine-static .cn-cue, .cine.cine-static .cn-bar, .cine.cine-static .cn-grain { display: none; }

@media (max-width: 760px) {
  .cine { margin-top: -80px; }
  .cn-scene { inset-inline: 20px; bottom: 11vh; width: auto; gap: 10px; }
  .cn-scene h2 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .cn-scene p { font-size: .95rem; line-height: 1.8; }
  .cn-intro { inset-inline: 0; bottom: 8vh; width: calc(100% - 32px); }
  #headline { font-size: clamp(27px, 8.2vw, 40px); }
  .cn-intro .lead { display: none; }
  .cn-hud { top: calc(8vh * var(--lb) + 92px); gap: 14px; letter-spacing: .14em; }
  .cn-dots { inset-inline-end: 10px; gap: 8px; }
  .cn-dots i { height: 12px; } .cn-dots i.on { height: 26px; }
  .cn-bar { height: 6vh; }
}
@media (max-height: 560px) and (orientation: landscape) { .cn-intro .lead, .cn-scene p { display: none; } }
/* short windows (a laptop with toolbars): fewer intro lines, so the mark keeps a good size above them */
@media (max-height: 720px) { .cn-intro .lead { display: none; } .cn-intro { gap: 8px; bottom: 7vh; } }

/* ---------- Instagram: a line-drawn phone on cream (always light, like paper) ---------- */
.insta { background: var(--cream); color: #2b2d2c; overflow: hidden; }
.insta h2, .insta b { color: var(--line); }
.insta .accent { color: #6a8a00; font-family: var(--accent-font); font-weight: 300; font-size: clamp(1.05rem, 2vw, 1.4rem); display: block; margin-bottom: .4em; }
.insta-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.insta-points { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 14px; }
.insta-points li { display: flex; gap: 14px; align-items: flex-start; }
.insta-points .pi { flex: none; width: 46px; height: 46px; border: 2px solid var(--line); border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: #fff; }
.insta-points b { display: block; font-family: var(--display); font-weight: 700; }
.insta-points small { color: #55595d; font-size: .92rem; }
.insta .btn.dark { background: var(--line); }
.phone-wrap { position: relative; display: grid; place-items: center; padding: 30px 0; }
.iphone { position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 610; border: 2.5px solid var(--line); border-radius: 46px; background: var(--cream);
  box-shadow: 0 0 0 9px var(--cream), 0 0 0 11.5px var(--line); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px;
  font-family: Estedad, system-ui, sans-serif; color: var(--line); overflow: hidden; }
.iphone .notch { position: absolute; top: 0; left: 50%; width: 38%; height: 22px; margin-left: -19%; border: 2.5px solid var(--line); border-top: 0;
  border-radius: 0 0 16px 16px; background: var(--cream); }
.iphone .status { display: flex; justify-content: space-between; font-size: 11px; padding: 0 8px; }
.iphone .status span { letter-spacing: -.1em; font-size: 9px; }
.ig-top { display: flex; align-items: center; justify-content: space-between; }
.ig-btn, .ig-face { width: 30px; height: 30px; border: 2px solid var(--line); border-radius: 9px; display: grid; place-items: center; font-size: 14px; }
.ig-face { border-radius: 50%; background: var(--line); color: var(--cream); font-size: 16px; }
.ig-handle { text-align: center; line-height: 1.2; }
.ig-handle b { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; display: block; }
.ig-handle small { font-size: 10px; }
.ig-hero { display: grid; place-items: center; height: 74px; }
.ig-mark { width: 62px; height: 62px; color: #2b2b2b; padding: 8px; border: 2.5px solid var(--line); border-radius: 50%; background: #fff; }
.ig-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; line-height: 1.2; }
.ig-stats b { font-family: var(--display); font-size: 17px; display: block; direction: ltr; }
.ig-stats small { font-size: 10px; color: #55595d; }
.ig-level b { font-size: 11px; display: block; text-align: center; margin-bottom: 4px; }
.lv-bar { height: 12px; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.lv-bar i { display: block; height: 100%; width: 0; background: var(--line); border-radius: inherit; }
html:not(.js) .lv-bar i { width: 62%; }
.lv-ends { display: flex; justify-content: space-between; font-size: 9px; margin-top: 2px; }
.ig-cta { display: flex; align-items: center; justify-content: space-between; background: var(--line); color: var(--cream); border-radius: 999px;
  padding: 8px 14px; font-size: 11px; }
.ig-cta b { color: var(--cream); font-size: 11px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; flex: 1; min-height: 0; }
.ig-grid .post { border: 2px solid var(--line); border-radius: 8px; background: var(--c); display: grid; place-items: center; font-size: 18px; overflow: hidden; min-height: 0; }
.ig-grid .post img { width: 100%; height: 100%; object-fit: cover; }
.ig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ig-tabs span { border: 2px solid var(--line); border-radius: 999px; text-align: center; padding: 6px 0; font-size: 14px; }
.hearts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.hearts i { position: absolute; font-style: normal; font-size: 18px; color: #e8455b; }
.spark { position: absolute; fill: var(--line); width: 34px; height: 34px; }
.spark.s1 { top: 6%; inset-inline-start: 6%; }
.spark.s2 { top: 13%; inset-inline-start: 16%; width: 16px; height: 16px; }
.spark.s3 { bottom: 26%; inset-inline-end: 4%; width: 40px; height: 40px; }
.spark.s4 { bottom: 34%; inset-inline-end: 1%; width: 16px; height: 16px; }
@media (max-width: 900px) { .insta-grid { grid-template-columns: 1fr; } .phone-wrap { order: -1; } }

/* ---------- video wall: frames open around one feature frame ---------- */
.vwall { position: relative; height: 260vh; height: 260svh; padding: 0; background: #070808; color: #f4f5f6; }
.vw-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vw-head { position: absolute; left: 0; right: 0; top: clamp(64px, 11vh, 120px); z-index: 3; text-align: center; pointer-events: none; }
.vw-head h2 { color: #fff; margin-bottom: .2em; }
.vw-head .accent { color: var(--lime); font-family: var(--accent-font); font-weight: 200; font-size: clamp(1.05rem, 2vw, 1.4rem); }
.vw-head p { color: rgba(244, 245, 246, .7); max-width: 60ch; margin-inline: auto; }
.vw-stage { position: absolute; inset: 0; perspective: 1200px; }
.vt, .vw-feature { position: absolute; top: 50%; left: 50%; border-radius: 14px; overflow: hidden; color: #fff; text-decoration: none;
  background: linear-gradient(150deg, hsl(var(--h, 80) 45% 32%), hsl(calc(var(--h, 80) + 40) 50% 12%)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.vt { width: var(--tw, 15vw); aspect-ratio: 16 / 10; margin-left: calc(var(--tw, 15vw) / -2); margin-top: calc(var(--tw, 15vw) * -.3125); will-change: transform, opacity; }
.vt img, .vt > video, .vw-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vt::after, .vw-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7)); }
.vt-play { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px); display: grid; place-items: center; font-size: 10px; }
.vt-lbl { position: absolute; z-index: 1; bottom: 8px; inset-inline-start: 10px; inset-inline-end: 44px; font-size: clamp(10px, .9vw, 13px); font-weight: 700; line-height: 1.4; }
.vt-dur { position: absolute; z-index: 1; bottom: 8px; font-size: 10px; opacity: .75; direction: ltr; }
html[dir="rtl"] .vt-dur { left: 10px; }
html[dir="ltr"] .vt-dur { right: 10px; }
.vw-feature { z-index: 2; width: min(46vw, 620px); aspect-ratio: 16 / 10; margin-left: calc(min(46vw, 620px) / -2); margin-top: calc(min(46vw, 620px) * -.3125);
  background: linear-gradient(140deg, #1d1f1e, #0b0c0c 55%, #2b3a05); display: grid; place-items: center; box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9); }
.vf-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 20px 40px; }
.vf-in b { color: #fff; font-family: var(--display); font-size: clamp(1.2rem, 2.4vw, 2rem); }
.vf-in small { color: rgba(244, 245, 246, .75); }
.vf-play { width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: var(--on-lime); display: grid; place-items: center; font-size: 20px;
  box-shadow: 0 0 0 10px rgba(184, 229, 8, .18); }
.vf-cta { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; color: var(--line); border-radius: 14px; font-weight: 700; text-decoration: none; transition: transform .25s; }
.vf-cta:hover { transform: translateY(-2px); }
.vf-cta span { color: #e8710a; }
button.vt { padding: 0; border: 0; font: inherit; cursor: pointer; text-align: start; }
button.vt:focus-visible, .vf-play:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.vt[data-video] .vt-play { background: var(--lime); color: var(--on-lime); }
.vf-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vw-feature.photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .65)); }
button.vf-play { border: 0; cursor: pointer; font: inherit; font-size: 20px; transition: transform .25s; }
button.vf-play:hover { transform: scale(1.08); }
.vw-player { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 6, .88); backdrop-filter: blur(8px); }
.vw-player[hidden] { display: none; }
.vp-box { position: relative; width: min(1000px, 100%); display: grid; gap: 10px; }
.vp-box video { width: 100%; max-height: 80vh; border-radius: 16px; background: #000; }
.vp-title { color: #fff; font-family: var(--display); text-align: center; }
.vp-close { position: absolute; top: -48px; inset-inline-end: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px; cursor: pointer; }
html:not(.js) .vwall { height: auto; }
html:not(.js) .vw-sticky { position: relative; height: auto; padding: 120px 0 60px; }
html:not(.js) .vw-stage { position: relative; height: 70vh; }
@media (max-width: 640px) {
  .vw-feature { width: 86vw; margin-left: -43vw; margin-top: -26.9vw; }
  .vt { --tw: 30vw; }
}

/* ---------- gift card credit: a card's code goes into the wallet, the steps light up in turn ---------- */
.gift { overflow: hidden; }
.gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 90px); align-items: center; }
.gift .accent { color: var(--lime-deep); font-family: var(--accent-font); font-weight: 300; font-size: clamp(1.05rem, 2vw, 1.4rem); display: block; margin-bottom: .3em; }
.gift-intro { color: var(--muted); }
.gift-steps { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 4px; position: relative; }
.gift-steps::before { content: ""; position: absolute; inset-inline-start: 21px; top: 24px; bottom: 24px; width: 2px; background: var(--border); }
.gs { display: flex; gap: 16px; align-items: flex-start; padding: 12px 12px 12px 14px; border-radius: 18px; position: relative; transition: background .4s, box-shadow .4s; }
.gs-num { flex: none; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: .9rem;
  background: var(--surface); color: var(--muted); box-shadow: inset 0 0 0 2px var(--border); position: relative; z-index: 1; transition: background .4s, color .4s, box-shadow .4s, transform .4s; }
.gs b { display: block; color: var(--heading); font-family: var(--display); font-weight: 700; }
.gs p { margin: 2px 0 0; color: var(--muted); font-size: .94rem; line-height: 1.8; }
.gs.on { background: var(--surface); box-shadow: var(--shadow-sm); }
.gs.on .gs-num { background: var(--lime); color: var(--on-lime); box-shadow: 0 0 0 6px var(--lime-soft); transform: scale(1.08); }
.gs.done .gs-num { background: var(--heading); color: var(--bg); box-shadow: none; }
.gift-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gift-note { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.gift-visual { position: relative; display: grid; justify-items: center; gap: 0; perspective: 1100px; padding: 20px 0; }
.gcard { position: relative; width: min(360px, 84vw); aspect-ratio: 1.586; border-radius: 22px; padding: 20px 22px; color: #f4f5f6; overflow: hidden;
  background: radial-gradient(120% 90% at 10% 0%, #3a4a0b 0%, #1d1f1e 45%, #0e0f10 100%); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .08);
  display: grid; align-content: space-between; transform-style: preserve-3d; z-index: 2; }
.gc-top { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 900; }
.gc-logo { width: 30px; height: 30px; color: #f4f5f6; }
.gc-title { font-family: var(--display); font-size: 1.3rem; color: var(--lime); }
.gc-code { display: flex; gap: 6px; }
.gc-code i { width: 36px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  display: grid; place-items: center; font-style: normal; font-family: Alexandria, sans-serif; font-weight: 700; font-size: 1.3rem; color: #fff; }
.gc-amount { font-family: Alexandria, sans-serif; font-weight: 700; font-size: 1.05rem; color: rgba(244, 245, 246, .9); }
.gc-amount em { font-style: normal; font-weight: 300; font-size: .8em; opacity: .7; }
.gc-shine { position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%); transform: translateX(-60%); pointer-events: none; }
.gflow { display: grid; justify-items: center; gap: 6px; height: 64px; align-content: center; }
.gflow i { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); opacity: .25; }
.gwallet { width: min(320px, 80vw); border-radius: 22px; padding: 18px 20px; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 10px; }
.gw-head { display: flex; align-items: center; gap: 8px; color: var(--heading); }
.gw-bal b { font-family: Alexandria, sans-serif; font-weight: 900; font-size: 1.9rem; color: var(--heading); }
.gw-bal small { color: var(--muted); }
.gw-ok, .gw-use { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.gw-ok span { width: 22px; height: 22px; border-radius: 50%; background: var(--lime); color: var(--on-lime); display: grid; place-items: center; font-size: .75rem; font-weight: 900; }
html.js .gift .gw-ok, html.js .gift .gw-use { opacity: 0; }
@media (max-width: 900px) { .gift-grid { grid-template-columns: 1fr; } .gift-visual { order: -1; } }
@media (max-width: 420px) { .gc-code i { width: 30px; height: 38px; font-size: 1.1rem; } }

/* the user asked for less motion: everything sits in its final place */
@media (prefers-reduced-motion: reduce) {
  .cn-grain, .cn-hud .rec i, .cn-cue s::after { animation: none; }
  .svc-visual, .svc-icon, .svc-en, .svc-visual::after { transition: none; }
  html.js .gift .gw-ok, html.js .gift .gw-use { opacity: 1; }
}