/* =====================================================================
   SkyRock Superior Agents — SELLING PAGE overlay. The page reuses the
   Dental Books landing design system (/dental-books/styles.css: cosmos
   backdrop, frosted db-cards, steel-navy + gold); this file adds only
   what that page doesn't have — the hiring configurator (software /
   name / Exclusivity), the summary+buy bar, the packs row and the
   payment-terms modal. `ag-` namespace.
   ===================================================================== */

/* =====================================================================
   HERO PILLARS: the three trust pillars (Suyo / Confiado / Bajo control)
   in the SAME material as the rest of the page's cards — the profile's
   .blackMetal onyx brushed gradient (see the .db-card override below),
   white title, muted label. One card language across the whole page.
   ===================================================================== */
.db-hero-stats { gap: var(--s-4); max-width: 56rem; }
.db-hero-stat {
    padding: var(--s-5) var(--s-4);
    gap: 0.5rem;
    border-radius: var(--r-lg);
    background: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.db-hero-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.db-hero-stat-n {
    font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--on-dark); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.db-hero-stat-l { font-size: 0.84rem; color: var(--on-dark-muted); letter-spacing: 0.01em; }

/* "Agente" carries a "g" descender. The gold word paints via background-clip:
   text, so any glyph part outside the span's box stays transparent — and the
   shared title's tight line-height leaves no room below the baseline. Give the
   gradient span generous painted margin under the baseline (padding extends
   the paint box; the negative margin keeps the section rhythm). Agents page
   only — this stylesheet is loaded here alone. */
.db-hero-title { line-height: 1.2; }
.db-hero-title-2 { padding-bottom: 0.25em; margin-bottom: -0.15em; }

/* =====================================================================
   FEATURE CARDS → brushed black metal (2026-07-06). The "Qué hace" and
   "Confianza" .db-cards shipped as frosted-white glass (Dental Books
   system). Restyle them in the SAME material as the profile membership
   card — /components/profile → section.card.blackMetal, the shared
   theme's -145deg onyx brushed-metal gradient — so this page reads as one
   black-metal set. Scoped to this stylesheet (agents-only), so the Dental
   Books landing keeps its frosted-white cards untouched.
   ===================================================================== */
.db-card {
    /* same gradient as skyrock.css .blackMetal */
    background: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.db-card:hover { box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
/* Flip the ink to light for contrast on the onyx metal */
.db-card-t { color: var(--on-dark); }
.db-card-p { color: var(--on-dark-muted); }

/* =====================================================================
   THE LIVING MEMBER CARD (2026-07-06). The hire is no longer a form above
   a preview — the black-metal membership card IS the configurator. The
   buyer touches the card itself to set the Agent's variables: types the
   name straight onto the engraving, and taps Software / Exclusividad to
   slide open a brushed-metal drawer of options. Tasks + salary update live.
   Pure CSS (CSP-safe): metal = layered gradients, engraving = gold text
   clip + letterpress shadow, gold = the brand ladder around #c2a35a.
   The black-metal tokens live on #contratar so the packs row (a sibling,
   outside the card) inherits the exact same palette.
   ===================================================================== */
#contratar {
    --bm-line: rgba(194, 163, 90, 0.34);
    --bm-line-strong: rgba(194, 163, 90, 0.65);
    --bm-text: #eceef2;
    --bm-muted: rgba(236, 238, 242, 0.66);
    --bm-faint: rgba(236, 238, 242, 0.45);
    --bm-gold: #d9c08a;
    --bm-gold-grad: linear-gradient(100deg, #8d7440 0%, #e8d49a 32%, #c2a35a 55%, #f3e6bd 78%, #8d7440 100%);
    --bm-plate:
        radial-gradient(130% 170% at 18% 0%, rgba(255, 255, 255, 0.085), transparent 46%),
        repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.026) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
        linear-gradient(158deg, #171a20 0%, #0c0e13 44%, #14171d 74%, #090a0e 100%);
    --bm-tile:
        radial-gradient(120% 150% at 22% 0%, rgba(255, 255, 255, 0.06), transparent 48%),
        repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.02) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
        linear-gradient(155deg, #1d2129 0%, #12151b 55%, #191d24 100%);
    --bm-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.65);
    --bm-engrave: 0 1px 1px rgba(0, 0, 0, 0.85);
}

.ag-hire-layout {
    display: flex; flex-direction: column; gap: var(--s-4);
    max-width: 34rem; margin-inline: auto;
}
/* display:flex outranks the UA's [hidden] rule — restate it so hire.js can swap
   the configurator for the paused notice with the hidden attribute alone. */
.ag-hire-layout[hidden] { display: none; }

/* Invitation line — tells the buyer the card is theirs to touch. */
.ag-stage-hint {
    margin: 0; text-align: center; color: var(--bm-muted);
    font-size: 0.86rem; letter-spacing: 0.01em;
}

/* ---------------- The configurator = the card + its drawer ---------------- */
.ag-configurator { position: relative; }

/* THE PLACARD — credit-card proportions, black metal, gold engraving.
   Directly interactive: name typed on it, Software/Exclusividad tap open. */
.ag-member-card {
    position: relative; width: 100%; aspect-ratio: 1.586;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: var(--s-3);
    padding: clamp(0.95rem, 3.2vw, 1.5rem) clamp(1.05rem, 3.6vw, 1.7rem);
    border-radius: 1.05rem;
    background:
        radial-gradient(140% 180% at 16% -4%, rgba(255, 255, 255, 0.10), transparent 44%),
        radial-gradient(120% 160% at 108% 112%, rgba(194, 163, 90, 0.10), transparent 52%),
        repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.028) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
        linear-gradient(158deg, #191c23 0%, #0b0d11 42%, #131519 72%, #07080b 100%);
    border: 1px solid var(--bm-line-strong);
    box-shadow:
        inset 0 0 0 1px rgba(8, 9, 12, 0.9),
        inset 0 0 0 2px var(--bm-line),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 44px rgba(3, 5, 9, 0.6);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ag-member-card::after { /* raking light sweep across the metal */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.055) 46%, transparent 60%);
}
/* Tier presence: the deeper the commitment, the warmer the frame. */
.ag-member-card[data-tier="partial"]  { border-color: rgba(217, 192, 138, 0.42); }
.ag-member-card[data-tier="full"]     { border-color: var(--bm-line-strong); }
.ag-member-card[data-tier="absolute"] {
    border-color: rgba(217, 192, 138, 0.9);
    box-shadow:
        inset 0 0 0 1px rgba(8, 9, 12, 0.9),
        inset 0 0 0 2px rgba(194, 163, 90, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 44px rgba(3, 5, 9, 0.6), 0 0 30px rgba(194, 163, 90, 0.18);
}

.ag-card-top { display: flex; align-items: center; gap: 0.7rem; position: relative; z-index: 1; }
.ag-card-mark { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }
.ag-card-brand { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ag-card-brand-t {
    font-weight: 800; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--bm-text); text-shadow: var(--bm-engrave); white-space: nowrap;
}
.ag-card-brand-s {
    font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--bm-gold); text-shadow: var(--bm-engrave); white-space: nowrap;
}
/* Gold contact chip */
.ag-card-chip {
    margin-left: auto; flex: 0 0 auto; width: 44px; height: 32px; border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 31%, rgba(0, 0, 0, 0.28) 31%, rgba(0, 0, 0, 0.28) 34%, transparent 34%, transparent 64%, rgba(0, 0, 0, 0.28) 64%, rgba(0, 0, 0, 0.28) 67%, transparent 67%),
        linear-gradient(0deg, transparent 42%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.28) 46%, transparent 46%),
        linear-gradient(135deg, #e8d49a 0%, #b3924c 38%, #d9c08a 55%, #8d7440 82%, #c2a35a 100%);
    border: 1px solid rgba(90, 72, 33, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ---------------- Name: typed straight onto the engraving ---------------- */
.ag-card-namewrap { position: relative; z-index: 1; display: flex; align-items: center; }
.ag-card-name-input {
    width: 100%; min-width: 0; margin: 0; padding: 0.06rem 0; border: 0; background: transparent;
    font: inherit; font-size: clamp(1.25rem, 4.4vw, 1.9rem); font-weight: 800;
    letter-spacing: 0.14em; text-transform: uppercase;
    background-image: var(--bm-gold-grad);       /* gold leaf under raking light */
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    caret-color: var(--bm-gold);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
    cursor: text;
}
.ag-card-name-input::placeholder {
    color: rgba(236, 238, 242, 0.32); -webkit-text-fill-color: rgba(236, 238, 242, 0.32);
    letter-spacing: 0.2em; font-weight: 800;
}
/* No focus ring around the name — the gold underline is the affordance. (Overrides
   the global :focus-visible gold box-shadow so no rounded ring wraps the text.) */
.ag-card-name-input:focus, .ag-card-name-input:focus-visible { outline: none; box-shadow: none; }
/* A fine gold underline signals the name is editable; it brightens on hover/focus. */
.ag-card-namewrap::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
    background: linear-gradient(90deg, var(--bm-gold), transparent 72%);
    opacity: 0.26; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.ag-card-namewrap:hover::after, .ag-card-namewrap:focus-within::after { opacity: 0.72; }
.ag-card-namewrap.is-invalid::after { background: linear-gradient(90deg, #e0736e, transparent 72%); opacity: 0.85; }

/* ---------------- Bottom row: Software / Exclusividad tap to edit ---------------- */
.ag-card-bottom { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; position: relative; z-index: 1; }
.ag-card-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.ag-card-field--end { margin-left: auto; text-align: right; align-items: flex-end; }
.ag-card-label { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bm-faint); text-shadow: var(--bm-engrave); }
.ag-card-value { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bm-text); text-shadow: var(--bm-engrave); white-space: nowrap; }

/* The two tappable fields become buttons: a gold value + a chevron, with a
   hover/open highlight so it reads unmistakably as editable. */
.ag-card-pick {
    font: inherit; border: 0; background: transparent; cursor: pointer;
    padding: 0.3rem 0.5rem; margin: -0.3rem -0.15rem; border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ag-card-pick .ag-card-value { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--bm-gold); }
.ag-card-caret {
    width: 0.46rem; height: 0.46rem; flex: 0 0 auto;
    border-right: 1.5px solid var(--bm-gold); border-bottom: 1.5px solid var(--bm-gold);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur) var(--ease); opacity: 0.85;
}
.ag-card-pick:hover { background: rgba(217, 192, 138, 0.10); box-shadow: inset 0 0 0 1px var(--bm-line); }
.ag-card-pick:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--bm-line-strong), 0 0 0 3px var(--gold-soft); }
.ag-card-pick.is-open { background: rgba(217, 192, 138, 0.14); box-shadow: inset 0 0 0 1px var(--bm-line-strong); }
.ag-card-pick.is-open .ag-card-caret { transform: rotate(-135deg) translateY(-2px); }
/* Single software today → show it as a plain (non-tappable) field, no chevron. */
.ag-card-pick.is-static { cursor: default; margin: 0; padding: 0; }
.ag-card-pick.is-static:hover { background: transparent; box-shadow: none; }
.ag-card-pick.is-static .ag-card-value { color: var(--bm-text); }
.ag-card-pick.is-static .ag-card-caret { display: none; }

/* ---------------- The drawer (tray of options under the card) ---------------- */
.ag-tray {
    margin-top: var(--s-2); border-radius: var(--r-lg);
    background: var(--bm-plate);
    border: 1px solid var(--bm-line-strong);
    box-shadow: var(--bm-inset), 0 16px 34px rgba(4, 6, 10, 0.5);
    overflow: hidden;
    animation: ag-tray-in var(--dur) var(--ease);
}
.ag-tray[hidden] { display: none; }
@keyframes ag-tray-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* Closing plays the exact reverse of the open, so it feels just as smooth.
   JS holds the node until this finishes (animationend), then hides it. */
.ag-tray.is-closing { animation: ag-tray-out var(--dur) var(--ease) forwards; }
@keyframes ag-tray-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }
.ag-tray-head {
    margin: 0; padding: var(--s-3) var(--s-4) 0;
    color: var(--bm-gold); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
    text-shadow: var(--bm-engrave);
}
.ag-tray-inner { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-4); }

/* Option row — a mini plate that lifts on hover, framed in gold when active. */
.ag-opt {
    position: relative;
    display: flex; align-items: center; gap: var(--s-3); width: 100%; text-align: left;
    padding: var(--s-3) var(--s-4); border-radius: var(--r-md); cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: var(--bm-tile);
    box-shadow: var(--bm-inset); color: var(--bm-text); font: inherit;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ag-opt:hover { border-color: var(--bm-line-strong); transform: translateY(-1px); }
.ag-opt:focus-visible { outline: none; border-color: var(--bm-line-strong); box-shadow: var(--bm-inset), 0 0 0 3px var(--gold-soft); }
.ag-opt.is-active {
    border-color: var(--bm-line-strong);
    box-shadow: var(--bm-inset), 0 0 0 1px rgba(10, 11, 14, 0.9), 0 0 0 2px var(--bm-line), 0 0 22px rgba(194, 163, 90, 0.14);
}
.ag-opt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ag-opt-name { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.74rem; color: var(--bm-gold); text-shadow: var(--bm-engrave); }
.ag-opt-desc { color: var(--bm-muted); font-size: 0.82rem; line-height: 1.45; }
.ag-opt-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: right; }
.ag-opt-price { font-size: 1.05rem; font-weight: 800; color: var(--bm-text); text-shadow: var(--bm-engrave); letter-spacing: -0.01em; white-space: nowrap; }
.ag-opt-sub { font-size: 0.68rem; color: var(--bm-faint); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
/* gold check ring on the active row */
.ag-opt-check { position: relative; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; align-self: center; opacity: 0; transition: opacity var(--dur) var(--ease); }
.ag-opt-check::after { content: ""; position: absolute; left: 0.36rem; top: 0.06rem; width: 0.32rem; height: 0.62rem; border-right: 2px solid var(--bm-gold); border-bottom: 2px solid var(--bm-gold); transform: rotate(45deg); }
.ag-opt.is-active .ag-opt-check { opacity: 1; }
.ag-opt-note { margin: 0 var(--s-1) 0; padding: 0 var(--s-1) var(--s-1); color: var(--bm-faint); font-size: 0.76rem; letter-spacing: 0.02em; text-align: center; }

.ag-field-err { margin: 0; min-height: 1.05rem; color: #f0b3b0; font-size: 0.82rem; text-align: center; }

/* ---------------- Summary: salary + buy (below the card) ---------------- */
.ag-summary { display: flex; flex-direction: column; gap: var(--s-2); text-align: center; }
.ag-summary-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; padding: 0; border: 0; }
.ag-summary-price {
    margin: 0.2rem 0 0.1rem; font-size: 1.7rem; font-weight: 800;
    color: var(--on-dark); letter-spacing: -0.01em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.ag-summary-note { margin: 0 auto; color: var(--on-dark-muted); font-size: 0.85rem; max-width: 34rem; }
/* The "~" fine print: why the monthly allowance is approximate. Quieter than
   the salary note — legal clarity without stealing attention. */
.ag-tasks-note { margin-top: var(--s-2); font-size: 0.78rem; color: var(--on-dark-faint); }
.ag-summary-cta { display: flex; flex-direction: column; gap: var(--s-3); align-items: stretch; margin-top: var(--s-3); }
.ag-buy-btn { width: 100%; }
.ag-buy-btn[disabled] { opacity: 0.55; cursor: not-allowed; filter: grayscale(0.4); }
.ag-login-prompt { text-align: center; }
.ag-login-prompt p { margin: 0 0 var(--s-2); color: var(--on-dark-muted); font-size: 0.86rem; }
.ag-login-btns { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }
.ag-hired-note { margin: 0; color: var(--gold-light); font-size: 0.85rem; font-weight: 600; text-align: center; }

.ag-status { min-height: 1.2rem; margin: var(--s-3) 0 0; color: var(--on-dark-muted); font-size: 0.9rem; text-align: center; }
.ag-status.is-error { color: #f0b3b0; }

/* ---------------- Paused / unavailable storefront (in place of the card) ----------------
   A quiet black-metal plate, same idiom as the pack tiles: the storefront is closed,
   not broken — engraved title, calm copy, the signature gold top inlay. */
.ag-paused {
    position: relative; overflow: hidden;
    max-width: 34rem; margin: var(--s-5) auto 0;
    padding: var(--s-5) var(--s-4);
    text-align: center;
    border-radius: var(--r-lg); border: 1px solid var(--bm-line);
    background: var(--bm-tile);
    box-shadow: var(--bm-inset), 0 12px 28px rgba(4, 6, 10, 0.45);
}
.ag-paused::before {
    content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 192, 138, 0.85), transparent);
}
.ag-paused[hidden] { display: none; }
.ag-paused-title { margin: 0 0 var(--s-2); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; color: var(--bm-gold); text-shadow: var(--bm-engrave); }
.ag-paused-text { margin: 0 auto; max-width: 28rem; color: var(--bm-muted); font-size: 0.9rem; line-height: 1.6; }

/* Paused BANNER — hiring is off but the levels and prices stay on screen; this
   strip above the (disabled) hire button says why. Same black-metal voice as the
   plate, scaled to sit inside the summary column. */
.ag-paused-banner {
    position: relative; overflow: hidden;
    padding: var(--s-3) var(--s-4);
    text-align: center;
    border-radius: var(--r-lg); border: 1px solid var(--bm-line);
    background: var(--bm-tile);
    box-shadow: var(--bm-inset);
}
.ag-paused-banner::before {
    content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 192, 138, 0.85), transparent);
}
.ag-paused-banner[hidden] { display: none; }
/* Focus lands here programmatically (tabindex="-1") when the hire button goes
   disabled under the buyer — an anchor for the keyboard user, not a control. */
.ag-paused-banner:focus { outline: none; }
.ag-paused-banner-title { margin: 0 0 var(--s-1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; color: var(--bm-gold); text-shadow: var(--bm-engrave); }
.ag-paused-banner-text { margin: 0 auto; max-width: 26rem; color: var(--bm-muted); font-size: 0.84rem; line-height: 1.55; }

/* ---------------- Top-up packs (black-metal plates, matching the tiers) ---------------- */
.ag-packs { margin-top: var(--s-7); }
.ag-packs-title { font-size: clamp(1.2rem, 3vw, 1.6rem); }
/* §11.11 pack-sales pause: cards and prices stay on screen; this note says why buying is off. */
.ag-packs-paused-note {
    margin: var(--s-4) auto 0; max-width: 28rem;
    color: var(--bm-gold); font-size: 0.86rem; line-height: 1.55;
    letter-spacing: 0.02em; text-shadow: var(--bm-engrave);
}
.ag-packs-paused-note[hidden] { display: none; }
.ag-packs-paused-note:focus { outline: none; }
.ag-pack-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem)); justify-content: center; margin-top: var(--s-5); }
.ag-pack-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--s-2); align-items: center; text-align: center;
    padding: var(--s-5) var(--s-4);
    border-radius: var(--r-lg); border: 1px solid var(--bm-line);
    background: var(--bm-tile);
    box-shadow: var(--bm-inset), 0 12px 28px rgba(4, 6, 10, 0.45);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Gold top-edge inlay — the same signature line as the hero plaques. */
.ag-pack-card::before {
    content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 192, 138, 0.85), transparent);
}
.ag-pack-card:hover {
    border-color: var(--bm-line-strong); transform: translateY(-3px);
    box-shadow: var(--bm-inset), 0 18px 36px rgba(4, 6, 10, 0.55), 0 0 24px rgba(194, 163, 90, 0.12);
}
.ag-pack-name { margin: 0; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; color: var(--bm-gold); text-shadow: var(--bm-engrave); }
.ag-pack-price { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--bm-text); letter-spacing: -0.01em; text-shadow: var(--bm-engrave); }
.ag-pack-desc { margin: 0; color: var(--bm-muted); font-size: 0.86rem; line-height: 1.5; }
.ag-pack-card .ag-buy-btn { margin-top: var(--s-2); }
.ag-pack-login { margin: 0; color: var(--bm-faint); font-size: 0.82rem; }

.ag-bottom-cta { margin-top: var(--s-6); }

/* ---------------- Payment-terms modal (frosted white, like the db cards) ---------------- */
.ag-overlay {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 8, 18, 0.72); padding: 1.25rem;
}
.ag-overlay[hidden] { display: none; }
.ag-modal {
    width: min(46rem, 96vw); max-height: 86vh; display: flex; flex-direction: column; gap: var(--s-3);
    padding: var(--s-5); border-radius: var(--r-lg);
    background: var(--panel); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-line); box-shadow: var(--sh-lg);
}
.ag-modal-title { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.ag-modal-date { margin: 0; color: var(--subtle); font-size: 0.82rem; }
.ag-modal-body {
    flex: 1 1 auto; overflow-y: auto; white-space: pre-wrap;
    padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--text); font-size: 0.88rem; line-height: 1.6;
    min-height: 8rem;
}
.ag-terms-check { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--text); font-size: 0.9rem; cursor: pointer; }
.ag-terms-check input { margin-top: 3px; accent-color: var(--gold); }
.ag-modal-actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }

/* Narrow: the tier rows can't hold description + a nowrap price side-by-side —
   stack them (name/desc on top, price/tasks beneath, check pinned top-right). */
@media (max-width: 560px) {
    .ag-opt-main { flex: 1 1 100%; }
    .ag-opt-side { flex: 1 1 100%; align-items: flex-start; text-align: left; margin-top: var(--s-1); }
    .ag-opt { flex-wrap: wrap; padding-right: calc(var(--s-4) + 1.2rem); }
    .ag-opt-check { position: absolute; top: var(--s-3); right: var(--s-3); }
}

/* Very narrow: let the placard grow taller than card ratio so the vertical
   data block never clips. */
@media (max-width: 420px) {
    .ag-member-card { aspect-ratio: auto; min-height: 13rem; gap: 0.8rem; }
    .ag-card-bottom { gap: var(--s-2); }
}

@media (prefers-reduced-motion: reduce) {
    .ag-tray, .ag-tray.is-closing { animation: none; }
    .ag-member-card, .ag-opt, .ag-pack-card, .ag-card-pick, .ag-card-caret { transition: none; }
    .ag-opt:hover, .ag-pack-card:hover { transform: none; }
}