/* Apple look for every public page (Home, Events, Gallery, Team, Join, Member Login, Privacy, Receipt, Verify).
   Loaded after site.css; scoped with body[data-page] so it never touches the admin panel. */
body[data-page] {
  --blue-900: #003F82; --blue-700: #0051A2; --blue-600: #1B75BE; --blue-500: #408EE0; --blue-300: #89BFF8;
  --blue-100: #E3F1FF; --blue-50: #F2F8FF; --line: #CFE3F8;
  --ink: #0A2A4F; --ink-2: #35557D; --ink-3: #4A6A8F; --green: #1E8A57; --red: #C2452B;
  --shadow: 0 0 0 .5px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.05);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.07), 0 4px 22px rgba(0,0,0,.07);
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  background: #F2F8FF; font-size: 16px; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body[data-page] * { font-family: var(--font) !important; }
body[data-page] .ta-title, body[data-page] .ta-title * { font-family: 'Noto Serif Tamil', 'Tamil Sangam MN', 'Latha', 'Nirmala UI', serif !important; } /* Tamil name keeps its serif face */
body[data-page] :is(h1, h2, h3, h4) { letter-spacing: -.025em; font-weight: 700; }
body[data-page] ::selection { background: rgba(0, 113, 227, .22); }
body[data-page] :focus-visible { outline: 4px solid rgba(0, 113, 227, .35); outline-offset: 1px; }

/* header: translucent material */
body[data-page] .site-header { background: rgba(251, 251, 253, .72); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); box-shadow: 0 .5px 0 rgba(0,0,0,.16); padding-top: 10px; padding-bottom: 10px; }
body[data-page] .brand-name { font-weight: 700; letter-spacing: -.01em; font-size: 17px; }
body[data-page] .brand-logo { width: 44px; height: 44px; border-radius: 12px; }
body[data-page] .nav { gap: 6px; font-weight: 500; font-size: 14.5px; }
body[data-page] .nav a { padding: 7px 14px; border: 0; border-radius: 999px; color: var(--ink-2); transition: background .25s var(--ease), color .25s var(--ease); }
body[data-page] .nav a:hover { background: rgba(0,0,0,.05); color: var(--ink); }
body[data-page] .nav a[aria-current="page"] { background: rgba(0, 113, 227, .12); color: var(--blue-700); font-weight: 600; }
body[data-page] .nav-toggle { background: rgba(0,0,0,.05); border: 0; color: var(--ink); }

/* buttons */
body[data-page] .btn { font-weight: 500; letter-spacing: -.01em; padding: 11px 24px; transition: transform .15s var(--ease), background .2s, box-shadow .2s; }
body[data-page] .btn:hover { transform: none; }
body[data-page] .btn:active { transform: scale(.97); }
body[data-page] .btn-primary { background: var(--blue-600); box-shadow: none; }
body[data-page] .btn-primary:hover { background: #0077ED; }
body[data-page] .btn-primary:active { background: #006EDB; }
body[data-page] .btn-outline { background: rgba(0, 113, 227, .1); border-color: transparent; color: var(--blue-700); }
body[data-page] .btn-lg { padding: 15px 34px; font-size: 17px; }
body[data-page] .btn[disabled] { opacity: .4; }
body[data-page] .linkbtn { color: var(--blue-700); }

body[data-page] .page-title { font-size: clamp(34px, 6vw, 60px); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }

/* cards */
body[data-page] :is(.plan, .panel, .form-card, .login-card, .verify-card) { border: 0; border-radius: 22px; box-shadow: var(--shadow-lg); }
body[data-page] .plan { border-left: 0; padding: 26px 28px; }
body[data-page] .plan .price { font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
body[data-page] .panel.tint { background: rgba(0,0,0,.04); box-shadow: none; }
body[data-page] .steps li::before { background: var(--blue-600); }
body[data-page] .form-card { padding: clamp(26px, 4vw, 40px); gap: 18px; }
body[data-page] .form-card h2, body[data-page] .login-card h2 { font-size: 26px; font-weight: 700; }
body[data-page] .login-card { padding: 40px 36px; }
body[data-page] .login-card .lock { background: var(--blue-600); border-radius: 18px; box-shadow: 0 6px 18px rgba(0, 113, 227, .35); }
body[data-page] .form-sub { color: var(--ink-3); }

/* fields: iOS style */
body[data-page] .field label { font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
body[data-page] .field input, body[data-page] .field select, body[data-page] .field textarea { background: #fff; border: 1px solid #D2D2D7; border-radius: 12px; padding: 13px 15px; font-size: 16px; /* 16px stops iOS zooming into the field */ transition: border-color .2s, box-shadow .2s; }
body[data-page] .field input:hover, body[data-page] .field select:hover, body[data-page] .field textarea:hover { border-color: #AEAEB2; }
body[data-page] .field input:focus, body[data-page] .field select:focus, body[data-page] .field textarea:focus { outline: 0; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(0, 113, 227, .22); background: #fff; }
body[data-page] .field input::placeholder, body[data-page] .field textarea::placeholder { color: #AEAEB2; }
body[data-page] .field select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
body[data-page] .check input { accent-color: var(--blue-600); }
body[data-page] .form-msg { border-radius: 14px; }
body[data-page] .form-msg.ok { background: rgba(52,199,89,.16); color: #1D7A35; }
body[data-page] .form-msg.bad { background: rgba(255,59,48,.12); color: #C4231A; }

/* member area after sign-in */
body[data-page="member"] .avatar { background: #fff; color: var(--blue-700); border: 3px solid rgba(255,255,255,.9); }
body[data-page="member"] .portal-cols .panel { box-shadow: var(--shadow-lg); }

/* footer: graphite, flat */

/* motion: cards settle in; sign-in message slides */
@keyframes ap-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
body[data-page] :is(.form-card, .login-card, .plan, .panel, .profile) { animation: ap-rise .6s var(--ease) both; }
body[data-page] .plan:nth-child(2) { animation-delay: .06s; } body[data-page] .panel { animation-delay: .1s; }

@media (max-width: 760px) { body[data-page] .row-2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body[data-page] *, body[data-page] *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-transparency: reduce) { body[data-page] .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FBFBFD; } }
@media (prefers-contrast: more) { body[data-page] .field input, body[data-page] .field select, body[data-page] .field textarea { border-color: #6E6E73; } }
body[data-page] .row-2 { align-items: end; }

/* =====================================================================
   All public pages: layout pieces that only some pages have (home hero, sections, events, gallery, team, verify, receipt)
   ===================================================================== */
body[data-page] { --ease-out: cubic-bezier(.23, 1, .32, 1); }

body[data-page] .hero h1 { font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }

/* sections, stats and feature cards */
body[data-page] .section-tint { background: #fff; }
body[data-page] :is(.stat, .feature, .evc, .event-row, .tm-big, .tm-mini, .cta-card, .gallery-link, .quick-link) { border: 0; border-radius: 22px; box-shadow: var(--shadow-lg); }
body[data-page] .stat .num, body[data-page] .section-title, body[data-page] .about-text h2, body[data-page] .cta-card h2 { letter-spacing: -.03em; font-weight: 700; }
body[data-page] .stat .icon, body[data-page] .feature .ficon { background: var(--blue-600) !important; box-shadow: none; }
body[data-page] .eyebrow { color: var(--blue-600); letter-spacing: .06em; font-weight: 600; }
body[data-page] .cta-card { background: #fff; }
body[data-page] .cta-card h2 { color: var(--ink); }
body[data-page] .link-arrow { color: var(--blue-700); font-weight: 500; }
body[data-page] .about-visual .p1 { background: linear-gradient(135deg, #2997FF, #0071E3); box-shadow: 0 20px 50px rgba(0,113,227,.3); }
body[data-page] .about-visual .p2 { background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.14); border: 0; }
/* uploaded About photos: fit the frame (the background shorthand above resets size) */
body[data-page] .about-visual .has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
body[data-page] .tm-sec h2, body[data-page] .tm-big h3, body[data-page] .tm-mini b { color: var(--ink); letter-spacing: -.02em; }
body[data-page] .tm-photo { border: 0; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.12); }
body[data-page] .tm-role { color: var(--blue-600); }
body[data-page] .pill { background: rgba(0,0,0,.05); border: 0; color: var(--ink-2); font-weight: 500; }
body[data-page] .pill.on, body[data-page] .pill:hover { background: var(--blue-600); color: #fff; }
body[data-page] .verify-card { padding: 44px 34px; }

/* ---------- motion (CSS only, one strong ease-out; short; interruptible) ---------- */
/* scroll reveal: a small lift + fade, siblings cascade 60ms apart */
.js body[data-page] .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.js body[data-page] .reveal.in { opacity: 1; transform: none; }
.js body[data-page] .grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.js body[data-page] .grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.js body[data-page] .grid > .reveal:nth-child(4) { transition-delay: 180ms; }
/* hero text rises once on load; the page title block too */
body[data-page] .hero-text { animation: ap-rise .8s var(--ease-out) both; }
body[data-page] .page-title { animation: ap-rise .7s var(--ease-out) both; }
body[data-page] .page-lead { animation: ap-rise .7s var(--ease-out) .08s both; }
/* press feedback on everything pressable (100-160 ms) */
body[data-page] :is(.btn, .pill, .nav a, .nav-toggle, .quick-link, .gallery-link, .evc, .event-row.clickable, .link-arrow, .qr-tile, .gallery-grid button) { transition-property: transform, background-color, box-shadow, color, opacity; transition-duration: .16s; transition-timing-function: var(--ease-out); }
body[data-page] :is(.btn, .pill, .nav-toggle, .gallery-link, .evc, .event-row.clickable, .qr-tile, .gallery-grid button):active { transform: scale(.97); }
/* hover lifts only where a real pointer exists (touch screens fire hover on tap) */
body[data-page] .btn:hover, body[data-page] .stat:hover, body[data-page] .gallery-link:hover, body[data-page] .qr-tile:hover, body[data-page] .gallery-grid button:hover, body[data-page] .evc:hover, body[data-page] .event-row.clickable:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  body[data-page] :is(.gallery-link, .evc, .event-row.clickable, .gallery-grid button):hover { transform: translateY(-3px); box-shadow: 0 0 0 .5px rgba(0,0,0,.08), 0 16px 36px rgba(0,0,0,.14); }
  body[data-page] :is(.gallery-link, .evc, .event-row.clickable, .gallery-grid button):hover:active { transform: scale(.98); }
}
/* the hero medal's decorative motion is calmer: slow float only */
body[data-page] .medal img { animation: none; }
body[data-page] .ring-1 { animation-duration: 60s; } body[data-page] .ring-1 .sat { animation-duration: 60s; }
body[data-page] .ring-2 { animation-duration: 44s; } body[data-page] .ring-2 .sat { animation-duration: 44s; }

@media (prefers-reduced-motion: reduce) {
  .js body[data-page] .reveal { opacity: 1; transform: none; transition: none; }
  body[data-page] :is(.hero-text, .page-title, .page-lead, .medal, .ring, .sat, .glass) { animation: none !important; }
}
body[data-page] .hero-wave path { fill: #F2F8FF; }
body[data-page] .plan.best .price { color: #fff; }
body[data-page] .plan.best .price small, body[data-page] .plan.best p { color: #BFE0FF; }

/* =====================================================================
   Member area: pop-ups (View my ID, forgot PIN) and the ID card flips
   ===================================================================== */
/* pop-up: blurred scrim, the card rises and settles (iOS curve); on close it leaves faster than it came */
body[data-page] .pop { background: rgba(0, 20, 50, .38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: ap-fade .26s var(--ease-out); transition: opacity .17s var(--ease-out); }
body[data-page] .pop.leaving { opacity: 0; }
body[data-page] .pop-card { border-radius: 26px; padding: 28px; box-shadow: 0 0 0 .5px rgba(0,0,0,.1), 0 34px 90px rgba(0, 20, 60, .38); animation: ap-pop-in .46s var(--ease); transition: transform .17s var(--ease-out), opacity .17s var(--ease-out); }
body[data-page] .pop.leaving .pop-card { transform: translateY(14px) scale(.97); opacity: 0; }
body[data-page] .pop-card h3 { font-size: 22px; letter-spacing: -.025em; }
body[data-page] .pop-x { background: rgba(0,0,0,.06); color: var(--ink-3); transition: background .15s, transform .12s var(--ease-out); }
body[data-page] .pop-x:hover { background: rgba(0,0,0,.1); }
body[data-page] .pop-x:active { transform: scale(.9); }
@keyframes ap-pop-in { from { opacity: 0; transform: translateY(30px) scale(.955); } }
@keyframes ap-fade { from { opacity: 0; } }
@media (max-width: 600px) {
  body[data-page] .pop { align-items: flex-end; padding: 0; }
  body[data-page] .pop-card { width: 100%; border-radius: 26px 26px 0 0; max-height: 92vh; padding-bottom: calc(24px + env(safe-area-inset-bottom)); animation-name: ap-sheet-up; animation-duration: .5s; }
  body[data-page] .pop.leaving .pop-card { transform: translateY(100%); opacity: 1; }
  @keyframes ap-sheet-up { from { transform: translateY(100%); } }
}

/* the two ID card images in the pop-up land one after the other, like cards dealt onto a table */
body[data-page] .id-preview img { animation: ap-deal .55s var(--ease-out) both; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
body[data-page] .id-preview img:nth-child(2) { animation-delay: .1s; }
@keyframes ap-deal { from { opacity: 0; transform: translateY(22px) rotate(-1.5deg) scale(.96); } }
@media (hover: hover) and (pointer: fine) { body[data-page] .id-preview img:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 18px 40px rgba(0, 40, 110, .32); } }
body[data-page] .id-preview .muted { animation: ap-fade .4s var(--ease-out); }

/* profile <-> ID cards: a real half-turn out, a half-turn in (one direction, so it reads as a single flip) */
body[data-page] .idpanel { perspective: 1100px; }
body[data-page] .pface { transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
body[data-page] .pface.pout { animation: ap-turn-out .15s ease-in forwards; }
body[data-page] .pface.pturn { animation: ap-turn-in .34s var(--ease-out) both; }
@keyframes ap-turn-out { to { transform: rotateY(90deg) scale(.97); opacity: .35; } }
@keyframes ap-turn-in { from { transform: rotateY(-90deg) scale(.97); opacity: .35; } }
body[data-page] .dcard-flip { background: rgba(27, 117, 190, .1); color: var(--blue-700); border-radius: 999px; padding: 6px 16px; font-weight: 600; transition: background .2s, transform .12s var(--ease-out); }
body[data-page] .dcard-flip:hover { background: rgba(27, 117, 190, .18); }
body[data-page] .dcard-flip:active { transform: scale(.95); }
body[data-page] .ids { background: rgba(27, 117, 190, .07); perspective: 900px; }

/* tap an ID card to turn it over */
body[data-page] .idflip { perspective: 800px; transition: transform .14s var(--ease-out); }
body[data-page] .idflip:active { transform: scale(.97); }
body[data-page] .idflip img { transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; box-shadow: 0 10px 28px rgba(0, 40, 100, .28); }
body[data-page] .idflip img.turn-out { animation: ap-turn-out .15s ease-in forwards; }
body[data-page] .idflip img.turn-in { animation: ap-turn-in .34s var(--ease-out) both; }
body[data-page] .idfig { animation: ap-deal .55s var(--ease-out) both; }
body[data-page] .idfig:nth-child(2) { animation-delay: .1s; } body[data-page] .idfig:nth-child(3) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  body[data-page] :is(.pop, .pop-card, .id-preview img, .id-preview .muted, .idfig, .pface, .idflip img) { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Compact sizing: smaller type, tighter hero, slimmer cards and fields (the first Apple pass was too large)
   ===================================================================== */
body[data-page] { font-size: 15px; }
body[data-page] .site-header { padding-top: 8px; padding-bottom: 8px; }
body[data-page] .brand-logo { width: 38px; height: 38px; border-radius: 10px; }
body[data-page] .brand-name { font-size: 15px; }
body[data-page] .nav { font-size: 14px; }
body[data-page] .nav a { padding: 6px 12px; }
body[data-page] .site-header .btn { padding: 8px 20px; font-size: 14px; }

body[data-page] .hero.hero-sm { padding-top: clamp(26px, 3.2vw, 40px); }
body[data-page] .crumbs { font-size: 12.5px; margin-bottom: 8px; }
body[data-page] .page-title { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.03em; margin-bottom: 8px; }
body[data-page] .page-lead { font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.5; max-width: 560px; }
body[data-page] .hero h1 { font-size: clamp(32px, 4.6vw, 52px); margin-bottom: 14px; }
body[data-page] .hero p.lead { font-size: clamp(15px, 1.6vw, 17px); margin-bottom: 26px; }
body[data-page] .eyebrow-pill { padding: 6px 14px; font-size: 12px; margin-bottom: 18px; }
body[data-page] .ta-title { font-size: clamp(24px, 3vw, 34px); }

body[data-page] .login-card { max-width: 400px; padding: 30px 28px; gap: 12px; border-radius: 22px; }
body[data-page] .login-card h2, body[data-page] .form-card h2 { font-size: 22px; }
body[data-page] .login-card .lock { width: 50px; height: 50px; border-radius: 15px; }
body[data-page] .login-card .lock svg { width: 24px; height: 24px; }
body[data-page] .form-card { padding: clamp(22px, 3vw, 30px); gap: 14px; border-radius: 22px; }
body[data-page] .plan { padding: 20px 22px; border-radius: 20px; }
body[data-page] .plan h3 { font-size: 17px; }
body[data-page] .plan .price { font-size: 26px; }
body[data-page] .plan p { font-size: 13.5px; line-height: 1.6; }
body[data-page] .panel { padding: 20px; border-radius: 20px; }
body[data-page] .panel h3 { font-size: 15.5px; }

body[data-page] .field label { font-size: 12.5px; margin-bottom: 5px; }
body[data-page] .field input, body[data-page] .field select, body[data-page] .field textarea { padding: 10px 13px; font-size: 14.5px; border-radius: 10px; }
body[data-page] .btn-lg { padding: 12px 28px; font-size: 15px; }
body[data-page] .btn { font-size: 14px; }
/* on touch screens 16px stops the browser zooming into a field */
@media (pointer: coarse) { body[data-page] .field input, body[data-page] .field select, body[data-page] .field textarea { font-size: 16px; } }

body[data-page] .section-title, body[data-page] .about-text h2 { font-size: clamp(24px, 2.8vw, 32px); }
body[data-page] .cta-card h2, body[data-page] .band h2 { font-size: clamp(22px, 2.6vw, 30px); }
body[data-page] .stat .num { font-size: 30px; }
body[data-page] .feature h3 { font-size: 16px; }
body[data-page] .pop-card h3 { font-size: 19px; }

/* =====================================================================
   Bigger home type (the compact pass made it too small) + extra motion
   ===================================================================== */
body[data-page] { font-size: 16px; }
body[data-page] .hero h1 { font-size: clamp(40px, 5.8vw, 68px); margin-bottom: 18px; }
body[data-page] .hero p.lead { font-size: clamp(16px, 1.7vw, 19px); }
body[data-page] .eyebrow-pill { flex: none; white-space: nowrap; padding: 7px 16px; font-size: 12.5px; }
body[data-page] .ta-title { font-size: clamp(30px, 3.8vw, 42px); } /* same serif face, original size */
body[data-page] .stat .num { font-size: clamp(40px, 4vw, 54px); }
body[data-page] .stat .label { font-size: 15.5px; }
body[data-page] .stat .icon { width: 54px; height: 54px; }
body[data-page] .section-title, body[data-page] .about-text h2 { font-size: clamp(28px, 3.4vw, 40px); }
body[data-page] .cta-card h2, body[data-page] .band h2 { font-size: clamp(26px, 3.2vw, 36px); }
body[data-page] .feature h3 { font-size: 18px; }
body[data-page] .glass b { font-size: 28px; }

/* motion: "Grow together." shimmer, floating glass cards, breathing stat icons, button shine */
@keyframes ap-shimmer { to { background-position: 200% 0; } }
body[data-page] .hero h1 em { background: linear-gradient(100deg, #BFE0FF 20%, #fff 45%, #BFE0FF 70%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: ap-shimmer 5s linear infinite; }
body[data-page] .glass.g-a { animation: floaty 6s ease-in-out infinite; }
body[data-page] .glass.g-b { animation: floaty2 7s ease-in-out infinite; }
@keyframes ap-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
body[data-page] .stat .icon { animation: ap-breathe 3.6s ease-in-out infinite; }
body[data-page] .stat.s2 .icon { animation-delay: .4s; } body[data-page] .stat.s3 .icon { animation-delay: .8s; } body[data-page] .stat.s4 .icon { animation-delay: 1.2s; }
body[data-page] .stat .num { transition: transform .3s var(--ease-out); } body[data-page] .stat:hover .num { transform: scale(1.08); transform-origin: left bottom; }
body[data-page] .btn-lg { position: relative; overflow: hidden; }
body[data-page] .btn-lg::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-130%); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
body[data-page] .about-visual .p1, body[data-page] .about-visual .p2 { animation: floaty 8s ease-in-out infinite; }
body[data-page] .about-visual .p2 { animation-delay: -3s; }
@media (prefers-reduced-motion: reduce) {
  body[data-page] :is(.hero h1 em, .glass, .stat .icon, .btn-lg::after, .about-visual .p1, .about-visual .p2) { animation: none !important; }
  body[data-page] .hero h1 em { -webkit-text-fill-color: #BFE0FF; color: #BFE0FF; background: none; }
}

/* receipt pop-up: keep it usable on print (only the receipt prints) and sized for the picture */
body[data-page] .pin-pop { max-width: 480px; }
@media print { .pop, .pop-card { position: static !important; overflow: visible !important; max-height: none !important; animation: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } }