
/* APP 322 — narrow, scoped Secret Agent presentation only */
#nationExperience .app322AgentBenefit { margin:20px auto 22px; max-width:790px; padding:20px 22px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px 18px; color:#fff; border:1px solid rgba(249,190,64,.54); border-radius:22px; background:linear-gradient(130deg,rgba(28,24,17,.94),rgba(12,16,26,.95)); box-shadow:0 12px 40px rgba(0,0,0,.35),inset 0 1px rgba(255,218,123,.19); }
#nationExperience .app322BenefitValue {font-size:clamp(3rem,10vw,5rem);line-height:1;font-weight:900;letter-spacing:-.06em;color:#ffd36a;text-shadow:0 0 24px rgba(250,169,49,.35)}
#nationExperience .app322BenefitValue span {font-size:.58em;vertical-align:top;letter-spacing:0}
#nationExperience .app322BenefitCopy strong {display:block;font-size:clamp(1rem,3vw,1.35rem);line-height:1.25;color:#fff;letter-spacing:.02em}
#nationExperience .app322BenefitCopy p {margin:6px 0 0;color:#e6dfd1;line-height:1.45;font-size:.92rem}
#nationExperience .app322AgentBenefit small {grid-column:1/-1;display:block;color:#dccca9;font-size:.76rem;line-height:1.4}
#nationExperience .app322AgentActions {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
#nationExperience .app322AgentActions .app322AgentLogin {border:1px solid rgba(255,210,120,.65);border-radius:14px;padding:13px 21px;background:rgba(12,17,27,.91);color:#ffe0a3;font-size:.94rem;font-weight:800;box-shadow:inset 0 1px rgba(255,255,255,.08);cursor:pointer;min-height:44px}
@media(max-width:560px){#nationExperience .app322AgentBenefit {padding:18px 15px;gap:6px 12px} #nationExperience .app322AgentActions>button{width:100%;max-width:370px}}
