/* ═══════════════════════════════════════════════════════════
   BRAVOS — PRICING
   Loaded from pricing.html via extra_css, so it lands after
   main.css + ui2.css and before responsive.css.

   The old cards were a flat white box with a $ amount and a square
   "Select Plan" button, priced $4.99 / $9.99 / $4.99 — an Organisation
   plan costing less than a single Employee seat.

   These are four AUDIENCES, not four tiers: a visitor is an employee, a
   hiring manager, an employer or a consultancy, and already knows which.
   So no featured card and no "Most Popular" badge — that only makes sense
   when one buyer is choosing between options. Each card instead carries
   its own accent colour.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero + billing toggle ───────────────────────────────── */
.pr-hero{ padding-bottom:96px; }

.pr-toggle{
  position:relative;
  /* Two equal columns, not inline-flex: the thumb is a 50%-wide slider, and
     with auto-width buttons the "Annual + 2 months free" side is far wider
     than "Monthly", so the thumb sat over the wrong span and clipped the
     word. Equal tracks make 50% correct by construction. */
  /* inline-grid, not grid: block-level would stretch the pill across the
     whole container. */
  display:inline-grid; grid-template-columns:1fr 1fr; align-items:center;
  margin-top:30px; padding:5px;
  border-radius:100px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
}
/* The thumb is a sibling that slides, rather than a background on the
   active button — a background swap can't animate between two elements. */
.pr-toggle-thumb{
  position:absolute; top:5px; left:5px; z-index:0;
  width:calc(50% - 5px); height:calc(100% - 10px);
  border-radius:100px;
  background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.22);
  transition:transform var(--t-slow,.45s) var(--ease-out,ease);
}
.pr-toggle.is-annual .pr-toggle-thumb{ transform:translateX(100%); }

.pr-toggle-btn{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; border-radius:100px;
  font-size:.88rem; font-weight:700; font-family:inherit;
  color:rgba(255,255,255,.82); background:none; border:none; cursor:pointer;
  white-space:nowrap;
  transition:color var(--t-mid,.25s) var(--ease,ease);
}
.pr-toggle-btn.active{ color:var(--navy); }
.pr-toggle-btn:not(.active):hover{ color:#fff; }

.pr-save{
  font-size:.68rem; font-weight:800; letter-spacing:.03em;
  padding:3px 9px; border-radius:100px;
  background:rgba(34,197,94,.22); color:#bbf7d0;
  transition:background var(--t-mid,.25s) var(--ease,ease), color var(--t-mid,.25s) var(--ease,ease);
}
.pr-toggle-btn.active .pr-save{ background:rgba(22,163,74,.14); color:#15803d; }

/* ── Cards ───────────────────────────────────────────────── */
/* No negative margin. Pulling the grid up by 60px made the cards straddle
   the hero's navy/white boundary, so each one was half on a dark ground and
   half on a light one. */
.pr-section{ padding-top:72px; }
/* .container caps at 1200px, which left each of four cards ~273px wide
   against ~670px tall — the "tall and slim" look. Widen the row only here. */
.pr-section > .container{ max-width:1340px; }
.pr-cards{
  /* Four audiences, not four tiers — nobody picks between them, they
     already know which one they are. So: equal columns, equal weight, no
     featured card and no "Most Popular" badge. */
  display:grid; grid-template-columns:repeat(4,1fr);
  /* stretch, not start: with `start` each card sized to its own feature
     list, so the cards ended at different heights. */
  gap:18px; align-items:stretch;
}

.pr-card{
  position:relative;
  display:flex; flex-direction:column;
  height:100%;
  padding:32px 24px 28px;
  border-radius:18px;
  background:#fff;
  border:1.5px solid var(--gray-200);
  box-shadow:0 4px 18px rgba(15,23,42,.05);
  overflow:hidden;
  transition:transform var(--t-slow,.45s) var(--ease-out,ease),
             box-shadow var(--t-slow,.45s) var(--ease,ease),
             border-color var(--t-mid,.25s) var(--ease,ease);
}
.pr-card:hover{
  transform:translateY(-6px);
  border-color:var(--pr-accent, rgba(37,99,235,.3));
  box-shadow:0 22px 52px rgba(15,23,42,.14);
}

/* Each card carries a hairline of its audience colour along the top, which
   keeps the row from reading flat now that none of them is featured. */
.pr-card::before{
  content:'';
  position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--pr-accent, var(--navy-light));
  opacity:0; transition:opacity var(--t-mid,.25s) var(--ease,ease);
}
.pr-card:hover::before{ opacity:1; }

.pr-card[data-plan="employee"]   { --pr-accent:#2563eb; }
.pr-card[data-plan="hr"]         { --pr-accent:#7c3aed; }
.pr-card[data-plan="organisation"]{ --pr-accent:#d97706; }
.pr-card[data-plan="consultancy"]{ --pr-accent:#0d9488; }

.pr-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.pr-role{
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gray-400);
}

.pr-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:13px; flex-shrink:0;
  transition:transform var(--t-slow,.45s) var(--ease-out,ease);
}
.pr-icon svg{ width:21px; height:21px; }
.pr-icon-blue  { background:rgba(37,99,235,.1);  color:var(--navy-light); }
.pr-icon-violet{ background:rgba(139,92,246,.12); color:#7c3aed; }
.pr-icon-amber { background:rgba(217,119,6,.12);  color:#d97706; }
.pr-icon-teal  { background:rgba(13,148,136,.12); color:#0d9488; }
.pr-card:hover .pr-icon{ transform:scale(1.08) rotate(-5deg); }

.pr-name{ font-size:1.35rem; letter-spacing:-.02em; margin-bottom:5px; }
/* Two lines reserved. Organisation's and Consultancy's taglines wrap while
   Employee's and HR's do not, which pushed their price, button and feature
   list a line lower than the cards beside them. */
.pr-tagline{
  font-size:.83rem; color:var(--gray-500); margin-bottom:18px;
  line-height:1.4; min-height:2.5em;
}

.pr-price{ display:flex; align-items:baseline; gap:2px; margin-bottom:4px; }
.pr-cur{
  font-size:1.35rem; font-weight:700; color:var(--gray-700);
  align-self:flex-start; margin-top:9px;
}
.pr-amt{
  font-size:2.5rem; font-weight:800; color:var(--gray-900);
  letter-spacing:-.035em; line-height:1;
  /* Tabular figures stop the box jittering while the count animates. */
  font-variant-numeric:tabular-nums;
}
.pr-per{ font-size:.85rem; color:var(--gray-400); font-weight:600; margin-left:5px; }

.pr-billing{ font-size:.75rem; color:var(--gray-400); margin-bottom:20px; }

/* ── Buttons ─────────────────────────────────────────────── */
.pr-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:11px;
  font-size:.89rem; font-weight:700; font-family:inherit;
  border:none; cursor:pointer; width:100%;
  transition:transform var(--t-mid,.25s) var(--ease-out,ease),
             box-shadow var(--t-mid,.25s) var(--ease,ease),
             background var(--t-fast,.15s) var(--ease,ease),
             color var(--t-fast,.15s) var(--ease,ease),
             gap var(--t-mid,.25s) var(--ease-out,ease);
}
.pr-btn svg{ width:15px; height:15px; flex-shrink:0; }

/* Sheen sweep on hover — the old buttons had no motion at all. */
.pr-btn::after{
  content:'';
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--ease-out,ease);
  pointer-events:none;
}
.pr-btn:hover::after{ left:120%; }

.pr-btn-solid{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  color:#fff;
  box-shadow:0 8px 22px rgba(37,99,235,.34);
}
.pr-btn-solid:hover{
  background:linear-gradient(135deg, var(--accent), var(--navy-light));
  color:#fff; transform:translateY(-3px); gap:13px;
  box-shadow:0 16px 34px rgba(37,99,235,.46);
}

.pr-btn-ghost{
  background:transparent; color:var(--navy);
  border:1.8px solid var(--gray-300);
}
.pr-btn-ghost:hover{
  background:linear-gradient(135deg, var(--navy-light), var(--navy));
  border-color:transparent; color:#fff;
  transform:translateY(-3px); gap:13px;
  box-shadow:0 14px 30px rgba(37,99,235,.34);
}
.pr-btn:active{ transform:translateY(0); }
.pr-btn-full{ width:100%; margin-top:20px; }

/* ── Feature list ── */
.pr-list-label{
  margin:22px 0 11px;
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gray-400);
}

/* Absorbs the slack in the shorter tiers so every card's padding box ends
   flush with its neighbours. */
.pr-features{ display:flex; flex-direction:column; gap:9px; flex:1; }
.pr-features li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.845rem; color:var(--gray-600); line-height:1.5;
}
/* Tick as a filled disc — the bare ✓ glyph read as body text. */
.pr-features li::before{
  content:'';
  flex-shrink:0; margin-top:2px;
  width:17px; height:17px; border-radius:50%;
  background:rgba(34,197,94,.15);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px 11px; background-position:center; background-repeat:no-repeat;
}

.pr-foot-note{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:40px;
  font-size:.82rem; color:var(--gray-400);
}
.pr-foot-note svg{ width:15px; height:15px; flex-shrink:0; }

/* ── Sign-up block ───────────────────────────────────────── */
.pr-signup{ background:linear-gradient(180deg, var(--gray-50) 0%, #fff 100%); }
.pr-form .form-input{
  border-radius:11px; padding:13px 15px;
  transition:border-color var(--t-fast,.15s) var(--ease,ease),
             box-shadow var(--t-fast,.15s) var(--ease,ease),
             background var(--t-fast,.15s) var(--ease,ease);
}
.pr-form .form-input:hover{ border-color:var(--gray-300); }

/* Plan picker: selectable cards, not bare radio dots. */
.pr-plan-picker{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pr-plan-opt{ cursor:pointer; }
.pr-plan-opt input{
  /* Off-screen rather than display:none so it stays keyboard focusable. */
  position:absolute; opacity:0; width:0; height:0;
}
.pr-plan-box{
  display:flex; flex-direction:column; gap:3px;
  padding:13px 14px; border-radius:12px;
  border:1.8px solid var(--gray-200); background:#fff;
  transition:border-color var(--t-fast,.15s) var(--ease,ease),
             background var(--t-fast,.15s) var(--ease,ease),
             box-shadow var(--t-mid,.25s) var(--ease,ease),
             transform var(--t-mid,.25s) var(--ease-out,ease);
}
.pr-plan-opt:hover .pr-plan-box{ border-color:var(--gray-300); transform:translateY(-2px); }
.pr-plan-name{ font-size:.86rem; font-weight:700; color:var(--gray-800); }
.pr-plan-cost{ font-size:.74rem; color:var(--gray-500); font-variant-numeric:tabular-nums; }
.pr-plan-opt input:checked + .pr-plan-box{
  border-color:var(--navy-light);
  background:rgba(37,99,235,.05);
  box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.pr-plan-opt input:checked + .pr-plan-box .pr-plan-name{ color:var(--navy); }
.pr-plan-opt input:focus-visible + .pr-plan-box{ box-shadow:var(--focus); }

.pr-terms{ margin-top:18px; align-items:flex-start; gap:10px; }
.pr-terms input{ margin-top:3px; accent-color:var(--navy-light); width:16px; height:16px; }

.pr-info-card{ border-radius:20px; box-shadow:var(--shadow); }

/* ── Responsive ──
   Four across needs ~1180px to keep the ₹ figures on one line; below that
   it steps 4 → 2 → 1 rather than squeezing. */
@media (max-width:1180px){
  .pr-cards{ grid-template-columns:repeat(2,1fr); gap:22px; max-width:760px; margin:0 auto; }
  .pr-plan-picker{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .pr-cards{ grid-template-columns:1fr; max-width:460px; }
  .pr-section{ padding-top:60px; }
}
@media (max-width:560px){
  .pr-toggle{ display:grid; width:100%; }
  .pr-toggle-btn{ flex:1; justify-content:center; padding:10px 12px; font-size:.82rem; }
  .pr-save{ display:none; }
  .pr-card{ padding:28px 20px 30px; }
  .pr-amt{ font-size:2.5rem; }
  .pr-plan-picker{ grid-template-columns:1fr; }
}

@media (hover:none){
  .pr-card:hover{ transform:none; box-shadow:0 4px 18px rgba(15,23,42,.05); }
  .pr-card:hover .pr-icon{ transform:none; }
  .pr-btn:hover{ transform:none; gap:9px; }
  .pr-btn:hover::after{ left:-60%; }
  .pr-plan-opt:hover .pr-plan-box{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .pr-btn::after{ display:none; }
}

/* ── Hiring portals ──────────────────────────────────────────
   These used to be radio buttons on the seeker form, which made a job
   seeker whichever you picked. They are links because each portal has its
   own fields (CIN, GST, proof of role) and its own login. */
.pr-hiring-doors{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--gray-200);
}
.pr-doors-lead{ font-size:.85rem; color:var(--gray-500); margin-bottom:12px; }
.pr-doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pr-doors a{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 14px; border-radius:12px;
  border:1.5px solid var(--gray-200); background:#fff;
  font-size:.86rem; font-weight:700; color:var(--gray-800);
  transition:border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),
             transform var(--t-mid) var(--ease-out),
             box-shadow var(--t-mid) var(--ease);
}
.pr-doors a span{ font-size:.74rem; font-weight:500; color:var(--gray-500); }
.pr-doors a:hover{
  border-color:var(--navy-light); background:rgba(37,99,235,.04);
  color:var(--navy); transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,99,235,.14);
}
@media (max-width:640px){ .pr-doors{ grid-template-columns:1fr; } }
@media (hover:none){ .pr-doors a:hover{ transform:none; box-shadow:none; } }