/* Extra components for the pricing and method pages. Loaded after legal.css,
   which supplies the tokens, header, footer and reading measure. Kept in its
   own file so the Terms and Privacy pages are untouched by any of this. */

.lede{font-size:19.5px;line-height:1.65;color:var(--ink-soft);margin-top:16px}

/* ── Crumb ──────────────────────────────────────────────────────────────── */
.crumb{font-size:14px;color:var(--ink-faint);padding-top:28px}
.crumb a{color:var(--ink-faint);text-decoration:none}
.crumb a:hover{color:var(--blue);text-decoration:underline}

/* ── Plan cards ─────────────────────────────────────────────────────────── */
/* auto-fit rather than a fixed count: three cards on a laptop, one on a
   phone, without a media query per breakpoint. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;margin:34px 0 0;padding:0;list-style:none}

.plan{background:var(--ground);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px 24px;display:flex;flex-direction:column}
.plan.pick{border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-tint)}

.plan .tag{font-family:'Poppins',system-ui,sans-serif;font-weight:600;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-faint)}
.plan.pick .tag{color:var(--blue)}
.plan h3{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:20px;margin:10px 0 0;letter-spacing:-.02em}

.plan .price{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:38px;letter-spacing:-.035em;
  margin-top:14px;line-height:1;font-variant-numeric:tabular-nums}
.plan .per{font-size:15px;color:var(--ink-faint);margin-top:7px}

.plan ul{list-style:none;margin:20px 0 0;padding:0;font-size:15.5px;color:var(--ink-soft)}
.plan li{position:relative;padding-left:25px;margin-bottom:10px;line-height:1.55}
.plan li::before{content:'';position:absolute;left:2px;top:.55em;width:9px;height:9px;
  border-radius:50%;background:var(--sky-tint);border:2px solid var(--sky)}

.plan .go{margin-top:auto;padding-top:22px}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:16px;text-decoration:none;
  padding:14px 22px;border-radius:13px;background:var(--blue);color:#fff;
  border:1px solid var(--blue);transition:background .15s,border-color .15s}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost{background:transparent;color:var(--blue);border-color:var(--line)}
.btn.ghost:hover{background:var(--sky-tint);border-color:var(--sky);color:var(--blue)}
.btn.wide{width:100%}

.cta{background:var(--raise);border:1px solid var(--line);border-radius:22px;
  padding:34px 32px;margin-top:46px}
.cta h2{font-size:24px;letter-spacing:-.022em;border:0;padding:0;margin:0 0 10px}
.cta p{color:var(--ink-soft);margin-bottom:22px}
.cta .row{display:flex;gap:12px;flex-wrap:wrap}

/* ── Method index ───────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin-top:32px;padding:0;list-style:none}
.card{border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  text-decoration:none;color:inherit;display:block;transition:border-color .15s,background .15s}
.card:hover{border-color:var(--sky);background:var(--raise)}
.card h3{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:18px;margin:0 0 8px;letter-spacing:-.018em}
.card p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin:0}

/* ── Numbered routine ───────────────────────────────────────────────────── */
.steps{list-style:none;margin:26px 0 0;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:52px;margin-bottom:22px}
.steps li::before{content:counter(step);position:absolute;left:0;top:-1px;
  width:34px;height:34px;border-radius:50%;background:var(--sky-tint);color:var(--blue);
  font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.steps b{font-family:'Poppins',system-ui,sans-serif;font-weight:600;display:block;margin-bottom:3px}
.steps span{color:var(--ink-soft);font-size:16px}

/* ── Related links ──────────────────────────────────────────────────────── */
.related{margin-top:42px;padding-top:24px;border-top:1px solid var(--line)}
.related h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);border:0;padding:0;margin:0 0 14px}
.related ul{list-style:none;margin:0;padding:0}
.related li{margin-bottom:9px}
.related a{color:var(--ink-soft);text-decoration:none;font-size:16px}
.related a:hover{color:var(--blue);text-decoration:underline}

/* ── Tier comparison ──────────────────────────────────────────────────────
   Four columns is too wide for a phone, so the table scrolls inside its own
   container rather than the page scrolling sideways. The feature column is
   sticky, otherwise you lose track of which row you are reading. */
.cmpwrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:18px}
table.cmp{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
table.cmp th,table.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp thead th{font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  background:var(--raise);position:sticky;top:0}
table.cmp thead th.pro{color:var(--blue)}
table.cmp thead th.plus{color:var(--navy)}

table.cmp th[scope="row"]{text-align:left;font-weight:400;color:var(--ink);
  background:var(--ground);position:sticky;left:0;min-width:210px;
  box-shadow:1px 0 0 var(--line)}
table.cmp th[scope="row"] b{font-family:'Poppins',system-ui,sans-serif;font-weight:600;
  display:block;font-size:15.5px}
table.cmp th[scope="row"] span{display:block;font-size:13.5px;color:var(--ink-faint);margin-top:2px}
table.cmp td{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
table.cmp td.yes{color:var(--green,#0F7B54);font-weight:700}
table.cmp td.no{color:var(--ink-faint)}
table.cmp td.val{font-family:'Poppins',system-ui,sans-serif;font-weight:600;color:var(--ink)}

/* the price row on a plan card when there is no price to give */
.plan .price.none{font-size:22px;letter-spacing:-.01em;color:var(--ink-faint)}