/* ==========================================================================
   Pricing.

   Three cards, one raised; a comparison table; the FAQ from pages.css. Prefix
   is pr- throughout, because this page also loads main.css and pages.css and a
   generic class name will collide with one of them sooner or later.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */
.pr-hero{padding-bottom:clamp(16px,2vw,28px)}
.pr-hero-in{max-width:760px}
.pr-hero h1{margin:20px 0 18px;text-wrap:balance}
.pr-hero .lead{max-width:640px}
.pr-hero-note{margin-top:14px;font-size:13.5px;color:var(--ink-3)}

/* --- the plans ----------------------------------------------------------- */
.pr-plans-sec{padding-top:clamp(28px,3vw,40px)}
.pr-plans{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);
  align-items:stretch;
}
.pr-plan{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
/* The middle plan is the one most people should pick, so it is the one that
   stands out: the brand border, a little lift, and the primary button. */
.pr-plan.is-hot{
  border-color:transparent;
  background:
    linear-gradient(var(--paper),var(--paper)) padding-box,
    var(--grad) border-box;
  box-shadow:var(--shadow);
}
@media (min-width:861px){.pr-plan.is-hot{transform:translateY(-10px)}}
.pr-tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--ink);padding:6px 12px;border-radius:99px;white-space:nowrap;
}
.pr-name{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em;margin:0 0 10px}
.pr-price{display:flex;align-items:baseline;gap:2px;margin:0 0 12px;color:var(--ink);font-weight:700;letter-spacing:-.04em;font-size:clamp(40px,4vw,52px);line-height:1;font-family:'Unbounded',Inter,sans-serif}
.pr-cur{font-size:.5em;align-self:flex-start;margin-top:.22em;letter-spacing:0}
.pr-per{font-family:Inter,sans-serif;font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-left:6px}
.pr-lead{font-size:15px;line-height:1.55;color:var(--ink-2);min-height:3.1em;margin:0 0 20px}
.pr-cta{width:100%;justify-content:center;margin-bottom:22px}
.pr-list{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line-2);display:grid;gap:11px}
.pr-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pr-list li svg{flex:none;margin-top:4px;color:var(--violet);stroke-width:2.6}
.pr-list li span{min-width:0}
.pr-note{margin:16px 0 0;font-size:13px;color:var(--ink-3)}
.pr-under{margin:clamp(22px,3vw,34px) auto 0;max-width:640px;text-align:center;font-size:14px;line-height:1.6;color:var(--ink-3)}
.pr-under a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){
  .pr-plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin:0 auto}
  .pr-lead{min-height:0}
}

/* --- the table ----------------------------------------------------------- */
.pr-table-wrap{
  margin-top:clamp(24px,3vw,36px);overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
}
.pr-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
.pr-table th,.pr-table td{padding:14px 18px;text-align:left;vertical-align:middle;border-top:1px solid var(--line-2)}
.pr-table thead th{border-top:0;font-size:15px;font-weight:600;color:var(--ink);padding-top:18px;padding-bottom:16px}
.pr-table thead th small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.pr-table thead th.is-hot{color:var(--violet)}
.pr-table tbody th{font-weight:500;color:var(--ink-2);width:46%}
.pr-table td{width:18%;color:var(--ink)}
.pr-table td.is-hot{background:rgba(124,108,255,.045)}
.pr-group th{
  background:var(--paper-2);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:10px 18px;
}
.pr-yes{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;
  background:rgba(58,223,165,.16);color:#0B8F63}
.pr-yes svg{stroke-width:2.8}
.pr-no{color:var(--ink-4,#A5ABB8);font-size:18px;line-height:1}
.pr-val{font-weight:500}
/* A phone cannot show four columns, and a sideways scroll hides three of
   them. So each feature becomes a block: its name on one line, then the three
   plans side by side under it, each labelled with the plan it belongs to. */
@media (max-width:640px){
  .pr-table{min-width:0;font-size:13.5px}
  .pr-table thead{display:none}
  .pr-table tbody{display:block}
  .pr-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:12px 14px;border-top:1px solid var(--line-2)}
  .pr-table tr:first-child{border-top:0}
  .pr-table tr.pr-group{display:block;padding:0;border-top:0}
  .pr-table th,.pr-table td{padding:0;border-top:0;width:auto}
  .pr-table tbody th{grid-column:1/-1;width:auto;padding-bottom:2px}
  .pr-table tr.pr-group th{display:block;width:auto;padding:9px 14px}
  .pr-table td{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:13px;line-height:1.35}
  .pr-table td::before{content:attr(data-plan);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
  .pr-table td.is-hot{background:none}
  .pr-table td.is-hot::before{color:var(--violet)}
  .pr-yes{width:22px;height:22px}
}