/* The role pages' shared parts (Mat, 2026-10-15): every role page runs in the
   same order. What it does (the hero), what you get (one table, the plans as
   columns), the price, then the way in, with the questions and the
   addresses at the foot. Loaded after each page's own styles, so it uses
   their colours and type (--yel, --rule, --condensed...). */

.rp { padding-block: clamp(56px, 6vw, 96px) clamp(8px, 1vw, 16px); border-top: 1px solid var(--rule); }
.rp .lead a { text-decoration: underline; text-underline-offset: 3px; }
.rp-note { margin-top: 18px; max-width: 60em; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.rp-note a { text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.rp-note a:hover { color: var(--yel); }
.tag-open { display: inline-block; padding: 6px 10px 5px; background: var(--yel); color: var(--on-yel); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.tag-soon { display: inline-block; padding: 5px 9px 4px; border: 1px solid var(--rule); color: var(--ink-soft); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.hero .tag-open, .hero .tag-soon { margin-left: 12px; vertical-align: 2px; }
/* A role page hides its Coming soon tag once that role is open; display above would keep it showing. */
.tag-soon[hidden] { display: none; }

/* ---------- what you get: the plans side by side ---------- */
.ft { width: 100%; border-collapse: collapse; margin-top: clamp(28px, 3vw, 44px); }
.ft th { padding: 0 0 14px clamp(12px, 1.4vw, 20px); text-align: left; vertical-align: bottom; font: 400 clamp(24px, 2.4vw, 34px) / 1 var(--condensed); text-transform: uppercase; }
.ft th:first-child { padding-left: 0; }
.ft th.on { color: var(--yel); }
/* On one line, or a plan whose price wraps sits its name higher than the others'. */
.ft th small { display: block; margin-top: 6px; font: 500 11px / 1.3 var(--mono); letter-spacing: 0.08em; text-transform: none; white-space: nowrap; color: var(--ink-faint); }
.ft td { padding: 12px 0 12px clamp(12px, 1.4vw, 20px); border-top: 1px solid var(--rule); font-size: clamp(12.5px, 1vw, 14px); line-height: 1.45; color: var(--ink-soft); vertical-align: top; }
.ft td:first-child { padding-left: 0; color: var(--ink); font-size: clamp(13px, 1.05vw, 15px); }
.ft td code { font-family: inherit; color: var(--yel); }
.ft .grp td { padding: 26px 0 10px; border-top: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yel); }
.ft .y { color: var(--yel); font-weight: 700; }
.ft .n { color: var(--rule); }
.ft col.feat { width: auto; }
.ft col.plan { width: clamp(120px, 16%, 220px); }

/* ---------- the price ---------- */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); align-items: stretch; }
.pc { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.2vw, 32px); border: 1px solid var(--rule); }
.pc.on { border-color: var(--yel); }
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pc h3 { font: 400 clamp(30px, 2.8vw, 42px) / 1 var(--condensed); text-transform: uppercase; }
.pc.on h3 { color: var(--yel); }
.pc .amt { font: 900 clamp(48px, 4.6vw, 72px) / 0.9 var(--display); letter-spacing: -0.05em; }
.pc .per { font-size: clamp(12.5px, 1vw, 14px); line-height: 1.5; color: var(--ink-soft); }
.pc p.line { padding-top: 10px; border-top: 1px solid var(--rule); font-size: clamp(12.5px, 1vw, 14px); line-height: 1.55; color: var(--ink-soft); }
.pc p.line b { color: var(--ink); }
.price-rows { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--rule); }

/* ---------- what the same tools cost elsewhere (Mat, 2026-10-25) ---------- */
.vs { width: 100%; max-width: 980px; border-collapse: collapse; margin-top: clamp(24px, 2.6vw, 38px); border-top: 1px solid var(--rule); }
.vs th, .vs td { padding: 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: baseline; font-weight: 400; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.45; color: var(--ink-soft); }
.vs td:nth-child(2) { padding-left: 20px; color: var(--ink-faint); }
.vs td:last-child { padding-left: 20px; text-align: right; white-space: nowrap; font-weight: 700; color: var(--ink); }
.vs tfoot th { color: var(--ink); font-weight: 700; }
.vs tfoot td { font: 900 clamp(28px, 2.8vw, 42px) / 1 var(--display); letter-spacing: -0.04em; }
.vs .vs-total td { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.vs .vs-us th, .vs .vs-us td { color: var(--yel); border-bottom: 0; }
@media (max-width: 560px) {
  .vs, .vs tbody, .vs tfoot { display: block; }
  .vs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .vs th, .vs td { padding: 0; border: 0; }
  .vs tbody td:nth-child(2) { grid-column: 1; grid-row: 2; padding: 3px 0 0; font-size: 12px; }
  .vs tbody td:last-child { grid-column: 2; grid-row: 1 / 3; padding-left: 0; }
  .vs tfoot td { padding-left: 0; }
  .vs .vs-us { border-bottom: 0; }
}

/* ---------- the way in ---------- */
/* .rp.join, not .join: the header's button is a.join too, and this padding
   made its box about 80px taller. */
.rp.join { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 40px; padding-bottom: clamp(48px, 5vw, 80px); }
.join h2 { margin-top: clamp(10px, 1vw, 14px); font: 900 clamp(48px, 6vw, 96px) / 0.9 var(--display); letter-spacing: -0.045em; text-transform: none; }
.join .lead { max-width: 34em; }
.join-ctas { display: flex; flex-direction: column; gap: 12px; min-width: min(100%, 300px); }
.join-ctas .btn { width: 100%; }

/* ---------- phones: each feature, then its plans underneath ---------- */
@media (max-width: 760px) {
  .ft, .ft tbody, .ft tr, .ft td { display: block; }
  .ft thead { display: none; }
  .ft colgroup { display: none; }
  .ft tr { display: grid; grid-template-columns: repeat(var(--plans, 3), minmax(0, 1fr)); gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
  .ft tr.grp { padding: 24px 0 2px; border-top: 0; }
  .ft td { padding: 0; border: 0; }
  .ft td:first-child { grid-column: 1 / -1; padding-bottom: 6px; }
  .ft .grp td { padding: 0; }
  .ft td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
  .join-ctas { width: 100%; }
}

/* Read out, not shown. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }