/* ATS Perfect — Plans (subscription.html)
   Builds on css/my-resumes-page.css (tokens, header, band, toast) and
   css/profile-page.css (buttons, badges, notices, footer). */

.plans-main{padding:0 0 64px}
.plans-main [hidden]{display:none!important}
.plans-band{padding:48px 0 120px}
.plans-band .band-inner{flex-direction:column;align-items:center;text-align:center}
.plans-band h1{font-size:36px;line-height:44px;font-weight:600;letter-spacing:-.025em;color:#fff}
.plans-band .lead{max-width:560px;margin:12px auto 0;font-size:16px;line-height:24px;color:#BAC3D1}
.band-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:20px;list-style:none;font-size:13px;color:#D0D5DD}
.band-facts li{display:inline-flex;align-items:center;gap:6px}
.band-facts svg{color:#47CD89;flex-shrink:0}

.header-guest{display:flex;align-items:center;gap:8px}
.header-guest[hidden],.account-menu[hidden]{display:none}
.header-guest .btn{height:36px}

.plans-wrap{max-width:1080px;margin:-88px auto 0;padding:0 32px}
.plan-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:14px 16px 14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);font-size:14px;color:var(--g-700)}
.plan-banner b{font-weight:600;color:var(--ink)}
.plan-banner .pb-text{display:flex;align-items:center;gap:10px;min-width:0}
.plan-banner svg{flex-shrink:0;color:var(--green)}
.plan-banner.is-info svg{color:var(--blue)}
.plan-banner.is-error{border-color:var(--red-100);background:var(--red-50)}
.plan-banner.is-error svg{color:var(--red)}

/* ── Plan cards ── */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
/* The faint light ring keeps the card's edge visible where it overlaps the navy band; on grey it disappears */
.plan.is-featured{margin-top:-12px;border:2px solid var(--navy-2);padding:23px;box-shadow:0 0 0 4px rgba(255,255,255,.16),0 1px 2px rgba(16,24,40,.08),0 24px 48px -12px rgba(15,28,53,.30)}
/* The recommended plan says so inside the card, so it reads on any background */
.plan-strip{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;margin:-23px -23px 20px;border-radius:6px 6px 0 0;background:var(--navy-2);color:#fff;font-size:13px;font-weight:600;letter-spacing:.01em}
.plan-strip span{font-weight:400;color:#BAC3D1}
/* The tags straddle the card's top edge, which can sit on the navy band or the grey page,
   so they need to read on both: white with the card's navy outline, green with a white edge */
.plan-tag{position:absolute;top:-12px;left:22px;height:24px;padding:0 10px;display:inline-flex;align-items:center;border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font-size:12px;font-weight:600}
.plan-tag.is-green{border-color:#fff;background:var(--green-700);color:#fff}
.plan h2{font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.plan .for{margin-top:2px;font-size:14px;line-height:20px;color:var(--muted)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin-top:20px;color:var(--ink)}
.price .amt{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price .per{font-size:14px;color:var(--muted)}
.price .was{font-size:18px;font-weight:500;color:var(--g-400);text-decoration:line-through;text-decoration-thickness:1.5px}
.price-note{min-height:20px;margin-top:6px;font-size:13px;line-height:20px;color:var(--g-600)}
.price-note b{font-weight:600;color:var(--green-700)}
.offer-chip{display:inline-flex;align-items:center;gap:6px;margin-top:10px;height:24px;padding:0 8px;border-radius:var(--r-sm);background:var(--green-50);border:1px solid var(--green-100);font-size:12px;font-weight:600;color:var(--green-700)}
.plan .btn{width:100%;height:44px;margin-top:20px;font-size:15px;font-weight:600}
.plan .btn-primary{box-shadow:var(--shadow-md)}
.plan .btn-current{background:var(--green-50);border-color:var(--green-100);color:var(--green-700);box-shadow:none;cursor:default}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:20px;color:var(--g-700)}
.plan li{display:flex;gap:10px}
.plan li svg{flex-shrink:0;margin-top:2px;color:var(--green)}
.plan li b{font-weight:600;color:var(--ink)}
.under-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;margin:20px 0 0;font-size:13px;color:var(--muted)}
.link-btn{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--g-700);text-decoration:underline;text-decoration-color:var(--g-300);text-underline-offset:3px;cursor:pointer}
.link-btn:hover{color:var(--ink);text-decoration-color:var(--ink)}
.link-btn.is-done{color:var(--green-700);text-decoration:none;cursor:default}
.code-note{flex-basis:100%;margin:0;text-align:center;color:var(--g-700)}
.code-note b{font-weight:600;color:var(--ink)}

/* ── Sections ── */
.plans-section{max-width:1080px;margin:64px auto 0;padding:0 32px}
.plans-section > h2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.plans-section > p{margin-top:6px;font-size:15px;line-height:22px;color:var(--g-600)}

.compare{width:100%;margin-top:24px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;font-size:14px}
.compare th,.compare td{padding:14px 20px;border-top:1px solid var(--line);text-align:left;vertical-align:middle}
.compare thead th{border-top:0;background:var(--g-50);font-size:13px;font-weight:600;color:var(--g-600)}
.compare thead th.col-premium{color:var(--ink)}
.compare tbody th{font-weight:500;color:var(--ink)}
.compare tbody th span{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--muted)}
.compare td{width:22%;color:var(--g-700);font-variant-numeric:tabular-nums}
.compare td.col-premium{background:var(--g-25);font-weight:500;color:var(--ink)}
.compare .yes{display:inline-flex;align-items:center;gap:6px}
.compare .yes svg{color:var(--green)}
.compare .no{color:var(--g-400)}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.fact{padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.fact-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);background:var(--g-100);color:var(--navy)}
.fact h3{margin-top:14px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.fact p{margin-top:4px;font-size:14px;line-height:20px;color:var(--g-600)}
.fact a{color:var(--g-700);font-weight:500;text-decoration:underline;text-decoration-color:var(--g-300);text-underline-offset:3px}

.faq{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.faq details + details{border-top:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;flex-shrink:0;border-right:1.5px solid var(--g-400);border-bottom:1.5px solid var(--g-400);transform:translateY(-2px) rotate(45deg);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq summary:hover{background:var(--g-50)}
.faq .a{padding:0 20px 18px;font-size:14px;line-height:22px;color:var(--g-600);max-width:760px}
.faq .a a{color:var(--g-700);font-weight:500;text-decoration:underline;text-decoration-color:var(--g-300);text-underline-offset:3px}

.plans-main ~ .account-footer{margin-top:56px}

/* ── Checkout overlay ── */
.checkout-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,28,53,.56);backdrop-filter:blur(2px)}
.checkout-overlay.open{display:flex}
.checkout-card{display:flex;align-items:center;gap:14px;padding:20px 24px;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);font-size:14px;color:var(--g-700)}
.checkout-card b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.spinner{width:22px;height:22px;flex-shrink:0;border:2.5px solid var(--g-200);border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Small screens ── */
@media (max-width:900px){
  .plan-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .plan.is-featured{order:-1;margin-top:0}
  .plan-banner{max-width:480px;margin-left:auto;margin-right:auto}
  .facts{grid-template-columns:1fr}
  .plans-wrap,.plans-section{padding:0 20px}
}
@media (max-width:640px){
  .plans-band{padding:32px 0 104px}
  .plans-band h1{font-size:28px;line-height:36px}
  .plans-band .lead{font-size:15px;line-height:22px}
  .band-facts{flex-direction:column;align-items:center;gap:6px}
  .plans-wrap,.plans-section{padding:0 16px}
  .plans-section{margin-top:48px}
  .plans-section > h2{font-size:20px;line-height:28px}
  .plan{padding:20px}
  .plan.is-featured{padding:19px}
  .plan-strip{margin:-19px -19px 16px}
  .plan-banner{flex-direction:column;align-items:stretch}
  .plan-banner .btn{width:100%}
  .compare th,.compare td{padding:12px 12px}
  .compare td{width:26%}
  .compare thead th{font-size:12px}
  .header-guest .btn-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}