/* /pro — the professional landing page.
 *
 * Loaded AFTER welcome.css and deliberately small: the two pages are the same product, so
 * everything shared (buttons, tiers, steps, faq, footer, the citation chip) stays in welcome.css
 * and is used unchanged here. What follows are only the blocks /pro adds — the ROI figures, the
 * per-profession columns, the limits — plus two grid overrides where /pro's counts differ from
 * /welcome's (two tiers instead of three, four steps instead of three).
 *
 * The palette is welcome.css's: this page inherits its tokens rather than defining its own, so a
 * change to the site's colour goes on being one change. The site is single-theme dark by design.
 */

/* ── the economics: three figures, read before the paragraphs under them ── */
.econ{display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px;}
@media(min-width:820px){ .econ{grid-template-columns:repeat(3,1fr);} }
.ecard{background:var(--panel-2); border:1px solid var(--line); border-radius:16px; padding:24px 22px;}
/* the figure is the point of the card, so it is set in the serif at display size and the
   label under it is what turns it from a number into a claim */
.ecard .ec-n{font-family:var(--serif); font-size:2.2rem; line-height:1; color:var(--green);
             font-variant-numeric:tabular-nums;}
.ecard .ec-l{margin-top:8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
             color:var(--muted-2);}
.ecard p{margin:14px 0 0; color:var(--muted); font-size:.92rem; line-height:1.6;}
/* the sentence that admits the reader might not need this. Set apart, not hidden. */
.econ-note{margin:26px 0 0; max-width:72ch; color:var(--muted); font-size:.92rem;
           padding-left:16px; border-left:2px solid var(--line);}
.econ-note a{color:var(--green); text-decoration:none;}
.econ-note a:hover{text-decoration:underline;}

/* ── by profession: four columns of plain lists, no card chrome competing with the text ── */
.who-grid{display:grid; grid-template-columns:1fr; gap:18px; margin-top:40px;}
@media(min-width:720px){ .who-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:1000px){ .who-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
.wcard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 20px;}
.wcard h3{font-family:var(--sans); font-size:1.02rem; font-weight:600; margin:0 0 14px; line-height:1.35;}
.wcard ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.wcard li{position:relative; padding-left:20px; font-size:.88rem; color:var(--muted); line-height:1.5;}
.wcard li::before{content:"·"; position:absolute; left:6px; top:-1px; color:var(--green);
                  font-weight:700; font-size:1.1rem;}

/* ── the limits: the same four-up grid as .gains, in a quieter register on purpose ── */
.limits{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:40px;}
.lim{background:var(--ink-2); border:1px solid var(--line-soft); border-radius:16px; padding:22px 20px;}
.lim .ic{font-size:22px; line-height:1; margin-bottom:12px; opacity:.9;}
.lim h3{font-family:var(--sans); font-size:1rem; font-weight:600; margin:0 0 8px; line-height:1.35;}
.lim p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.6;}

/* ── two overrides where /pro's counts differ from /welcome's ── */
/* welcome has three access tiers; here there are two, and a third of the row each would leave
   them stranded against the left edge */
@media(min-width:820px){
  .tiers.pro-tiers{grid-template-columns:repeat(2,1fr); max-width:820px; margin-left:auto; margin-right:auto;}
}
/* four steps, not three: at three columns the fourth drops alone onto its own row */
@media(min-width:1000px){ #day .steps{grid-template-columns:repeat(4,1fr);} }

/* the hero on /pro carries the price line under the buttons; without the section's own bottom
   padding the trust strip lands directly on it */
#main.hero .wrap{padding-bottom:64px;}

@media(max-width:640px){
  .ecard, .wcard, .lim{padding:18px;}
  .ecard .ec-n{font-size:1.9rem;}
}

/* /welcome puts the privacy cards in the narrow half of a two-column row, so each one is card
   shaped. Here they have the whole width to themselves and stretched into banners with the
   heading marooned on the left; three across restores the proportion. */
/* Three 287px cards need ~960px. At 820–999px they were three columns anyway and the third
   ran 28px past the right edge — the page scrolled sideways on a tablet. Two until 1000. */
@media(min-width:820px){ #conf .priv-list{grid-template-columns:1fr 1fr;} }
@media(min-width:1000px){ #conf .priv-list{grid-template-columns:repeat(3,1fr);} }
/* „Толкова се изплаща месецът" measured 3.76:1 at 12px — the shared muted token and half a point up. */
.ec-l { color: var(--muted, #8b98a5); font-size: 12.5px; }