/* =====================================================================
   PMJ GOLD — shared brand sheet.
   Logo lock-up, fonts and light-gold primitives copied from pmjgold.in's
   css/base/styles.css so every page of the EMI app matches the main site.
   Loaded by index.php, account/*, admin/* and pay/* pages.
   ===================================================================== */

:root {
    --gold: #C9A84C;
    --gold-dark: #A07C2E;
    --gold-light: #E8D5A0;
    --gold-bright: #D4AF37;
    --cream: #F8F2E6;
    --cream-dark: #EBE2D2;
    --ivory: #FFF4D0;
    --ink: #1F141C;
    --muted: #6B5F66;
    --border: #E4D9CB;
    --logo-plum: #4A152C;
    --logo-gold-text: #B59449;
    --noir: #0B132B;
    --font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-logo: 'Outfit', 'Segoe UI', sans-serif;
    --transition: .22s ease;
}

body { font-family: var(--font-body); }
.font-display { font-family: var(--font-display); }

/* ------------------------------------------------------- logo lock-up */

.pmj-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition);
}

.pmj-logo:hover { transform: translateY(-1px); }

.pmj-logo-mark {
    flex-shrink: 0;
    padding: 4px;
    background: linear-gradient(145deg, #1a1a1a, #0a0a0a);
    border-radius: 12px;
    border: 2px solid rgba(212, 175, 55, .45);
    box-shadow: 0 3px 16px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(212, 175, 55, .15);
    transition: box-shadow var(--transition), border-color var(--transition);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pmj-logo:hover .pmj-logo-mark {
    border-color: var(--gold);
    box-shadow: 0 6px 24px rgba(212, 175, 55, .3), inset 0 1px 0 rgba(212, 175, 55, .25);
}

.pmj-logo-img {
    display: block;
    height: 58px;
    width: auto;
    max-width: none;
    border-radius: 8px;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-user-drag: none;
    user-select: none;
    transform: translateZ(0);
}

.pmj-logo-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
    min-width: 0;
}

.pmj-logo-name {
    display: flex;
    align-items: baseline;
    gap: 7px;
    position: relative;
    padding-bottom: 6px;
}

.pmj-logo-name::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, var(--logo-plum) 0%, var(--logo-plum) 42%, var(--logo-gold-text) 100%);
    border-radius: 1px;
}

.pmj-logo-pmj,
.pmj-logo-gold {
    font-family: var(--font-logo);
    font-size: 1.72rem;
    font-weight: 800;
    font-style: normal;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
    background: none;
    filter: none;
    -webkit-text-fill-color: initial;
}

.pmj-logo-pmj { color: var(--logo-plum); }
.pmj-logo-gold { color: var(--logo-gold-text); }

.pmj-logo-tagline {
    font-family: var(--font-logo);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--logo-plum);
    white-space: nowrap;
}

/* compact — slim headers on the account / admin / checkout pages */
.pmj-logo--sm { gap: 10px; }
.pmj-logo--sm .pmj-logo-img { height: 44px; }
.pmj-logo--sm .pmj-logo-pmj,
.pmj-logo--sm .pmj-logo-gold { font-size: 1.38rem; letter-spacing: .06em; }
.pmj-logo--sm .pmj-logo-tagline { font-size: .55rem; letter-spacing: .12em; }

/* extra compact — login cards, admin sidebar, mobile bars */
.pmj-logo--xs { gap: 8px; }
.pmj-logo--xs .pmj-logo-mark { padding: 3px; border-radius: 10px; border-width: 1.5px; }
.pmj-logo--xs .pmj-logo-img { height: 32px; }
.pmj-logo--xs .pmj-logo-pmj,
.pmj-logo--xs .pmj-logo-gold { font-size: 1.02rem; letter-spacing: .05em; }
.pmj-logo--xs .pmj-logo-name { gap: 5px; padding-bottom: 4px; }
.pmj-logo--xs .pmj-logo-tagline { font-size: .48rem; letter-spacing: .1em; }

/* reversed — dark navy backgrounds (admin sidebar, footer, hero bands) */
.pmj-logo--dark .pmj-logo-pmj { color: var(--ivory); }
.pmj-logo--dark .pmj-logo-gold { color: var(--gold-light); }
.pmj-logo--dark .pmj-logo-tagline { color: rgba(232, 213, 160, .82); }
.pmj-logo--dark .pmj-logo-name::after {
    background: linear-gradient(90deg, var(--gold-light) 0%, var(--gold-light) 42%, var(--gold) 100%);
}

/* phone screens use the compact lock-up automatically */
@media (max-width: 640px) {
    .pmj-logo:not(.pmj-logo--sm):not(.pmj-logo--xs) { gap: 9px; }
    .pmj-logo:not(.pmj-logo--sm):not(.pmj-logo--xs) .pmj-logo-img { height: 44px; }
    .pmj-logo:not(.pmj-logo--sm):not(.pmj-logo--xs) .pmj-logo-pmj,
    .pmj-logo:not(.pmj-logo--sm):not(.pmj-logo--xs) .pmj-logo-gold { font-size: 1.38rem; letter-spacing: .06em; }
    .pmj-logo:not(.pmj-logo--sm):not(.pmj-logo--xs) .pmj-logo-tagline { font-size: .55rem; letter-spacing: .12em; }
}

/* -------------------------------------------------- shared primitives */

/* one card shape for every page — customer area, admin console, checkout */
.card {
    background: #fff;
    border: 1px solid rgba(212, 175, 55, .25);
    border-radius: 1.25rem;
    box-shadow: 0 4px 16px rgba(90, 70, 20, .07);
}

.lux-card {
    background: #fff;
    border: 1px solid rgba(212, 175, 55, .25);
    box-shadow: 0 4px 18px rgba(90, 70, 20, .07);
    transition: box-shadow var(--transition), transform var(--transition);
}

.lux-card:hover { box-shadow: 0 12px 32px rgba(90, 70, 20, .12); }

.gold-grad { background: linear-gradient(90deg, #D4AF37 0%, #F6E7C0 50%, #D4AF37 100%); }

.gold-grad-txt {
    background: linear-gradient(120deg, #7A6017 0%, #D4AF37 45%, #9C7B1E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #C09B2C 100%);
    color: #0B132B;
    box-shadow: 0 8px 22px -8px rgba(212, 175, 55, .7);
    transition: filter .2s, transform .2s;
    font-weight: 700;
}

.btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* account pages use .gold-btn for the same control */
.gold-btn {
    background: linear-gradient(135deg, #D4AF37 0%, #C09B2C 100%);
    color: #0B132B;
    box-shadow: 0 10px 22px -8px rgba(212, 175, 55, .7);
    transition: filter .2s, transform .2s;
    font-weight: 700;
}

.gold-btn:hover { filter: brightness(1.06); }

.form-lux {
    width: 100%;
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: .9rem;
    background: #fff;
    padding: .8rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--ink);
    outline: none;
    transition: border .15s, box-shadow .15s;
}

.form-lux:focus { border-color: #D4AF37; box-shadow: 0 0 0 3px rgba(212, 175, 55, .18); }

.badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid;
    white-space: nowrap;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

input[type=range] {
    -webkit-appearance: none;
    height: 6px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #D4AF37 var(--pct, 30%), #F6E7C0 var(--pct, 30%));
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #D4AF37;
    box-shadow: 0 2px 8px rgba(90, 70, 20, .3);
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #D4AF37;
    cursor: pointer;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #EAD08E; border-radius: 8px; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ---------------------------------------------------- mobile safety
   One place for every small-screen rule so a fix lands on all pages
   (home, account, admin, pay) at once. --------------------------------- */

/* iOS Safari zooms the page when a focused control is under 16px */
@media (max-width: 640px) {
    input:not([type=range]):not([type=checkbox]):not([type=radio]),
    select,
    textarea { font-size: 16px; }
}

/* Notches and home indicators: keep sticky bars and modals clear of them.
   Element+class selector so it beats Tailwind's `top-0` utility regardless
   of whether the CDN injects its styles before or after this sheet. */
nav.sticky-top-safe, header.sticky-top-safe { top: env(safe-area-inset-top); }
.bar-bottom { padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
.edge-px { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Modal sheets must stay inside the viewport on small phones */
.modal-sheet {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Chrome/Safari tab bars change the viewport height mid-scroll on phones.
   100dvh (with a 100svh fallback) keeps full-height panels from jittering. */
@supports (height: 100dvh) {
    .min-h-screen { min-height: 100dvh; }
    .h-screen { height: 100dvh; }
}

/* Long tables must scroll inside the card, not stretch the page */
@media (max-width: 1024px) {
    table { font-size: .8rem; }
    table th:first-child, table td:first-child { padding-left: .75rem; }
}

/* Comfortable touch targets for phones */
@media (hover: none) and (pointer: coarse) {
    .btn-gold, .gold-btn, nav a, .tap { min-height: 44px; }
    input[type=range]::-webkit-slider-thumb { width: 26px; height: 26px; }
    input[type=range] { height: 8px; }
    /* hover states stick on touch screens — suppress them */
    .lux-card:hover, .btn-gold:hover, .gold-btn:hover, .pmj-logo:hover {
        transform: none;
        box-shadow: 0 4px 18px rgba(90, 70, 20, .07);
    }
}

/* Never let an oversized element force the whole page sideways.
   Clip on <html> ONLY: `overflow-x: hidden` on <body> turns body into a scroll
   container, which silently disables position:sticky on the nav bars. `clip`
   does not create a scroll container, so the sticky headers keep working. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
main, .card, .lux-card { min-width: 0; }
img, svg, video { max-width: 100%; }

/* An input's default intrinsic width (≈20 characters) is a grid item's minimum
   size, which pushes narrow phone layouts sideways. Let rows and columns shrink. */
input, select, textarea { min-width: 0; }
@media (max-width: 1024px) {
    .grid > *, .flex > * { min-width: 0; }
}

/* =========================================== premium chrome (shared layer)
   Additive classes only — no Tailwind utility names are redefined, so pages
   that never use them render exactly as before. ---------------------------------- */

/* ------------------------------------------------------- sticky nav bar
   Jitter rule: nothing on the scroll path may animate a layout property.
   Transitioning height / padding / font-size on a sticky bar reflows the
   document underneath it, the reflow moves the scroll position, the new
   position re-triggers the scroll handler — that loop is the "shiver".
   The bar therefore keeps one constant height per breakpoint; only surface
   colours and compositor-only transforms change while scrolling. */
.nav-lux {
    position: sticky;
    top: 0;
    z-index: 50;
    /* safe area is padding inside the bar, so the bar stays glued to the
       viewport edge on notched phones instead of floating down */
    padding-top: env(safe-area-inset-top);
    background: rgba(255, 255, 255, .84);
    /* small radius on purpose: a wide blur is recomputed on the main thread in
       software-rendered Chrome, which shows up as the bar lagging the scroll */
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border-bottom: 1px solid rgba(212, 175, 55, .22);
    transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
    -webkit-tap-highlight-color: transparent;
}

/* browsers without backdrop blur still need an opaque bar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-lux { background: rgba(255, 255, 255, .97); }
}

@media (prefers-reduced-transparency: reduce) {
    .nav-lux { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 2px gold hairline across the top edge */
.nav-lux::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .8), #F6E7C0, rgba(212, 175, 55, .8), transparent);
    opacity: .5;
}

.nav-lux.is-scrolled {
    background: rgba(255, 255, 255, .93);
    border-bottom-color: rgba(212, 175, 55, .38);
    box-shadow: 0 14px 38px -22px rgba(11, 19, 43, .55);
}

.nav-row { height: 4.5rem; }

/* the condensed state scales the mark (paint only) instead of resizing it */
.nav-lux .pmj-logo-img { height: 52px; }
.nav-lux .pmj-logo-mark { transition: transform .3s ease; }
.nav-lux.is-scrolled .pmj-logo-mark { transform: translateZ(0) scale(.88); }

@media (max-width: 640px) {
    .nav-row { height: 3.9rem; }
}

/* reading-progress rail pinned to the bottom edge of the bar.
   No transition — it is written from the scroll position every frame, so an
   easing curve makes it trail the page and shimmer at the subpixel level. */
.nav-rail {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, #9C7B1E, #D4AF37, #F6E7C0);
    transform: scaleX(var(--p, 0));
    transform-origin: left center;
    will-change: transform;
    pointer-events: none;
}

/* nav links with a centre-out underline and an active section state */
.nav-link {
    position: relative;
    padding: .3rem 0;
    font-weight: 600;
    color: #2E3A56;
    white-space: nowrap;
    transition: color .2s ease;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #9C7B1E, #D4AF37 45%, #F6E7C0);
    transform: scaleX(0);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.nav-link:hover { color: #9C7B1E; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: #7A6017; }

/* slide-down mobile sheet — no layout jump, collapses to 0 height when closed */
.nav-sheet {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows .34s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}
.nav-sheet > div { min-height: 0; overflow: hidden; }
.nav-sheet.is-open { grid-template-rows: 1fr; opacity: 1; }
.nav-sheet a { border-radius: .9rem; transition: background-color .18s ease, transform .18s ease; }
.nav-sheet a:hover { background: #FEFCF6; transform: translateX(2px); }

/* live-rate chip: tabular figures, tick flash on each refresh */
.rate-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 9999px;
    border: 1px solid rgba(212, 175, 55, .4);
    background: linear-gradient(180deg, #fff, #FEFCF6);
    padding: .5rem .85rem;
    box-shadow: 0 6px 18px -12px rgba(90, 70, 20, .5);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rate-chip:hover { border-color: rgba(212, 175, 55, .8); box-shadow: 0 10px 26px -14px rgba(212, 175, 55, .75); }
.rate-chip .num { font-variant-numeric: tabular-nums; }
@keyframes tick-up { 0% { color: inherit } 25% { color: #059669 } 100% { color: inherit } }
@keyframes tick-down { 0% { color: inherit } 25% { color: #dc2626 } 100% { color: inherit } }
.rate-chip.tick-up .num { animation: tick-up 1.1s ease; }
.rate-chip.tick-down .num { animation: tick-down 1.1s ease; }

/* --------------------------------------------------------------- buttons */
.btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -55%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .6), transparent);
    pointer-events: none;
}
.btn-gold:hover::after { animation: btn-shine .85s cubic-bezier(.3, .7, .3, 1); }
.btn-gold:active { transform: translateY(1px) scale(.995); }
@keyframes btn-shine { to { left: 115%; } }

/* ----------------------------------------------------------------- cards */
.gold-frame {
    border-radius: 1.5rem;
    background: linear-gradient(120deg, #D4AF37, #F6E7C0 30%, #C09B2C 62%, #EAD08E);
    background-size: 280% 280%;
    animation: frame-drift 9s ease-in-out infinite;
    box-shadow: 0 22px 50px -28px rgba(90, 70, 20, .55);
}
@keyframes frame-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.lux-card { position: relative; }
.lux-card::after {
    content: '';
    position: absolute;
    left: 10%; right: 10%; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .75), transparent);
    opacity: 0;
    transition: opacity .3s ease;
}
.lux-card:hover::after { opacity: 1; }

/* metallic icon medallion */
.gold-chip {
    background: linear-gradient(135deg, #F6E7C0, #D4AF37 52%, #C09B2C);
    box-shadow: 0 10px 24px -12px rgba(212, 175, 55, .95), inset 0 1px 0 rgba(255, 255, 255, .65);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}
.feature:hover .gold-chip { transform: translateY(-2px) scale(1.06); box-shadow: 0 16px 30px -12px rgba(212, 175, 55, 1), inset 0 1px 0 rgba(255, 255, 255, .7); }

.feature { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease; }
.feature:hover { transform: translateY(-4px); border-color: rgba(212, 175, 55, .55); }

/* eyebrow rule either side of section kickers */
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; }
.eyebrow::before, .eyebrow::after {
    content: '';
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #D4AF37);
}
.eyebrow::after { background: linear-gradient(90deg, #D4AF37, transparent); }

/* ---------------------------------------------------------------- dialogs
   Every modal opens with the same branded lock-up so the company identity is
   present wherever a customer makes a decision. ---------------------------- */
.dlg-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-bottom: .9rem;
    padding-right: 2.6rem; /* keeps the title clear of the absolute close button */
    border-bottom: 1px solid rgba(212, 175, 55, .28);
}
.dlg-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .8), transparent);
}
.dlg-title { font-family: var(--font-display); font-weight: 700; line-height: 1.15; }

/* --------------------------------------------------------------- gifting */
.gift-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, #0B132B, #152238 55%, #1E2C4A);
    color: var(--ivory);
    box-shadow: 0 26px 52px -30px rgba(11, 19, 43, .85);
}
.gift-card::before {
    content: '';
    position: absolute;
    inset: -40% -10% auto;
    height: 120%;
    background: radial-gradient(circle at 20% 0%, rgba(212, 175, 55, .38), transparent 55%);
    pointer-events: none;
}
.gift-card-frame { position: absolute; inset: 8px; border: 1px solid rgba(212, 175, 55, .35); border-radius: 1rem; pointer-events: none; }

/* wrap / occasion choice cards */
.gift-opt {
    position: relative;
    text-align: left;
    border-radius: 1rem;
    border: 1.5px solid rgba(212, 175, 55, .28);
    background: #fff;
    padding: .8rem .9rem;
    cursor: pointer;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1), background-color .22s ease;
}
.gift-opt:hover { border-color: rgba(212, 175, 55, .7); transform: translateY(-2px); }
.gift-opt.is-on {
    border-color: #D4AF37;
    background: linear-gradient(180deg, #FFFDF7, #FEFCF6);
    box-shadow: 0 14px 30px -18px rgba(212, 175, 55, .95);
}
.gift-opt.is-on::after {
    content: '';
    position: absolute;
    top: .7rem; right: .8rem;
    width: 6px; height: 11px;
    border: solid #0B132B;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    background: transparent;
}
.gift-opt.is-on::before {
    content: '';
    position: absolute;
    top: .5rem; right: .55rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F6E7C0, #D4AF37 60%, #C09B2C);
    box-shadow: 0 4px 12px -4px rgba(212, 175, 55, .9);
}

/* compact chip variant used for occasion picking — no corner tick, gold fill instead */
.gift-opt.is-chip { padding: .42rem .85rem; font-size: .78rem; font-weight: 700; border-radius: .8rem; }
.gift-opt.is-chip.is-on { color: #0B132B; background: linear-gradient(135deg, #F6E7C0, #EAD08E 70%); box-shadow: inset 0 0 0 1.5px #D4AF37, 0 8px 18px -14px rgba(212, 175, 55, .95); }
.gift-opt.is-chip.is-on::before, .gift-opt.is-chip.is-on::after { content: none; }

/* delivery vs gift mode choice cards */
.dlv-choice {
    position: relative;
    text-align: left;
    border-radius: 1.25rem;
    border: 1.5px solid rgba(15, 23, 42, .10);
    background: linear-gradient(180deg, #fff, #FBF8F1);
    padding: 1rem 1.05rem;
    cursor: pointer;
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1), background-color .22s ease;
}
.dlv-choice:hover { transform: translateY(-2px); border-color: rgba(212, 175, 55, .72); box-shadow: 0 18px 34px -22px rgba(11, 19, 43, .55); }
.dlv-choice.is-on {
    border-color: #D4AF37;
    background: linear-gradient(180deg, #FFFDF7, #FEF6E2);
    box-shadow: 0 20px 40px -24px rgba(212, 175, 55, .95);
}
.dlv-choice-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: .9rem;
    background: #F3EAD3; color: #7A6017;
    transition: background-color .22s ease, color .22s ease;
}
.dlv-choice.is-on .dlv-choice-ico {
    background: linear-gradient(135deg, #F6E7C0, #D4AF37 58%, #C09B2C);
    color: #0B132B;
    box-shadow: 0 10px 20px -12px rgba(212, 175, 55, .95);
}

/* ribbon shown on a plan whose metal has been gifted */
.gift-ribbon {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: linear-gradient(120deg, #0B132B, #1B2A4A 58%, #2A3C60);
    color: var(--ivory);
    box-shadow: 0 18px 34px -26px rgba(11, 19, 43, .9);
}
.gift-ribbon::before {
    content: '';
    position: absolute;
    inset: -60% -10% auto;
    height: 160%;
    background: radial-gradient(circle at 15% 20%, rgba(212, 175, 55, .35), transparent 58%);
    pointer-events: none;
}

/* money figures */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* scroll reveal — pairs with the IntersectionObserver on each page */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .fade-up { opacity: 1; transform: none; transition: none; }
    .gold-frame { animation: none; }
    .btn-gold:hover::after { animation: none; }
    .nav-lux, .nav-lux .pmj-logo-mark, .nav-sheet, .feature, .lux-card, .gold-chip { transition: none; }
    .gift-opt, .dlv-choice { transition: none; }
    .gift-opt:hover, .dlv-choice:hover { transform: none; }
    .rate-chip.tick-up .num, .rate-chip.tick-down .num { animation: none; }
}