/* /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; }

/* ---------------------------------------------------------- „От казус до досие"
   Seven steps, so the three-column `.steps` grid from welcome.css would leave one
   orphan on its own row. Four across reads as a sequence and breaks 4+3. */
@media(min-width:1000px){ .steps.flow{grid-template-columns:repeat(4,1fr); gap:26px 22px;} }
.steps.flow .step{padding-top:4px;}
.steps.flow .step .no{font-size:2rem;}
.steps.flow .step .viewlink{margin-top:10px; font-size:.84rem;}

/* ---------------------------------------------------------------- the worked example (§5)
   The paid task demonstrated on one clause. Built from what the page already has — the
   citation box and the kind label are the same components the real report uses, so the
   example looks like the product rather than like an advert for it. */
#demo .demo { max-width: none; margin: 0; }   /* the full 1080px column like every section (6 Oct 2026) */
#demo .demo-steps { list-style: none; margin: 0; padding: 0; }
#demo .d-step { background: var(--panel, #1a212b); border: 1px solid var(--border, #2d3744);
  border-radius: 10px; padding: 18px 20px; margin: 0 0 14px; }
#demo .d-step h3 { margin: 0 0 10px; font-size: 1rem; color: var(--muted, #8b98a5);
  letter-spacing: .02em; }
#demo .d-clause, #demo .d-doc-body { margin: 0 0 10px; padding: 10px 12px;
  background: var(--inset, #0d1218); border-left: 3px solid var(--border, #2d3744);
  border-radius: 0 6px 6px 0; font-style: italic; }
#demo .d-src { font-size: .85rem; color: var(--muted, #8b98a5); margin: 0 0 12px; }
#demo .d-find { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 8px; }
#demo .d-redline { line-height: 1.7; }
#demo .d-redline del { color: var(--danger, #f85149); text-decoration: line-through; }
#demo .d-redline ins { color: var(--accent, #3fb950); text-decoration: underline; }
#demo .d-decide { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#demo .d-doc { border: 1px solid var(--border, #2d3744); border-radius: 8px; overflow: hidden;
  margin: 10px 0; }
#demo .d-doc-head { background: var(--panel-2, #243140); padding: 8px 12px; font-size: .9rem; }
#demo .d-doc-body { margin: 0; border-left: 0; border-radius: 0; font-style: normal; }
#demo .d-outcome { font-weight: 700; margin: 0 0 10px; }
#demo .demo-cta { text-align: center; margin-top: 18px; display: flex; flex-wrap: wrap;
  gap: 10px; justify-content: center; }
#demo .demo-cta .fineprint { flex: 1 1 100%; margin: 8px 0 0; }
@media (max-width: 560px) {
  #demo .d-step { padding: 14px; }
  #demo .d-decide .btn, #demo .demo-cta .btn { flex: 1 1 100%; }
}

/* The Pro hero is the offer alone now: its right-hand column used to hold the historical-law
   conversation, which has moved down to the research section where it belongs. Without this
   the 1.05fr/.95fr grid from welcome.css would leave half the hero empty above 940px.
   (finishing release §3) */
@media (min-width: 940px) {
  /* the same 1080px column as every section below, so the left edges line up (6 Oct 2026: the
     owner saw the hero narrower than the rest); the TEXT keeps a readable measure inside it */
  #main.hero .wrap { grid-template-columns: 1fr; }
  #main.hero .wrap > * { max-width: 820px; }
}
/* …and the mock keeps its shape in its new home. */
#flow .hart.research { margin: 0 0 28px; }

/* ---- UX consolidation (Sep 2026): hero → how it works → the price, once ------------------ */
.hero .pro-promise{font-size:1.15rem; color:var(--text); margin-top:18px;}
.hero .hero-cta{display:flex; flex-wrap:wrap; gap:12px;}
.hero .direct{flex-basis:100%; margin:4px 0 0; font-size:.9rem; color:var(--muted);}
.hero .direct a{color:var(--muted); text-decoration:underline; text-underline-offset:3px;}
.hero .direct a:hover{color:var(--text);}
/* §16: the three workflows are the largest thing after the hero. */
/* (its own 40px top padding removed 6 Oct 2026: every section gets the same 78px rhythm) */
.flows3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:26px;}
.flow3{display:flex; flex-direction:column; gap:12px; padding:22px; border:1px solid var(--line);
       border-radius:16px; background:var(--panel);}
.flow3 h3{margin:0; font-size:1.3rem;}
.flow3 p{margin:0; color:var(--muted); font-size:.95rem;}
.flow3 .more{margin-top:auto; color:var(--green); text-decoration:none; font-weight:600; font-size:.95rem;}
.flow3 .more:hover{text-decoration:underline;}
.chain{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.chain li{position:relative; padding:8px 12px 8px 34px; border-radius:10px; background:var(--ink-2, rgba(255,255,255,.03));
          border:1px solid var(--line-soft); font-weight:600; font-size:.95rem; counter-increment:chain;}
.chain{counter-reset:chain;}
.chain li::before{content:counter(chain); position:absolute; left:10px; top:50%; transform:translateY(-50%);
          width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:.7rem;
          background:rgba(63,185,80,.16); color:var(--green);}
@media(max-width:900px){ .flows3{grid-template-columns:1fr;} }
/* §17: one price, one style. */
/* (its 10px top padding removed 6 Oct 2026: the price sat glued under the workflow cards) */
.price-card{max-width:560px; margin:0 auto; text-align:center; padding:28px 24px; border:1px solid var(--green-line, var(--line));
            border-radius:18px; background:var(--panel);}
.pc-amount b{font-size:2.4rem; line-height:1; font-variant-numeric:tabular-nums;}
.pc-amount span{color:var(--muted); font-size:1.1rem;}
.pc-vat{margin:6px 0 0; color:var(--muted);}
.pc-trial{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; font-weight:600;}
.pc-trial li::before{content:"✓ "; color:var(--green);}
.pc-terms{margin:14px auto 0; font-size:.85rem; color:var(--muted-2, var(--muted)); max-width:48ch;}
.pc-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:20px;}

/* ---- start with a task (Google-to-Pro release, 28 Sep 2026) ---- */
/* display:block - welcome.css (also on this page) makes any .tasks a 3-column grid, which
   squeezed the three cards into ONE of its columns (118px each at 1366) */
.hero .tasks{display:block; margin:22px 0 4px; max-width:980px;}
.hero .tasks-h{margin:0 0 10px; color:var(--muted); font-size:.95rem;}
.hero .task-cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
.hero .task-card{display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--panel);}
.hero .task-t{margin:0; font-size:1.05rem; line-height:1.3;}
.hero .task-r{margin:0; color:var(--muted); font-size:.92rem; line-height:1.5; flex:1;}
.hero .task-go{align-self:flex-start; white-space:normal; text-align:left;}
.hero .task-link{color:var(--accent); font-weight:600;}
@media (max-width:820px){ .hero .task-cards{grid-template-columns:minmax(0,1fr);} .hero .task-go{align-self:stretch;} }

/* agent positioning (30 Sep 2026): the note that explains the word „агент" beside it, the two
   stages under the demonstration, and the price section's heading */
.hero .agent-note { max-width: 62ch; margin: 10px 0 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }
#demo .stages { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; max-width: 70ch; }
#demo .stages li { padding-left: 14px; border-left: 2px solid var(--border); line-height: 1.5; }
.cena-head { max-width: 70ch; margin: 0 auto 18px; }
.cena-head h2 { margin-bottom: 8px; }

/* professional-conversion closeout (3 Oct 2026): who it is for, the offer line under the two
   actions, the finding-type line and the reason under the proposed wording in the demo */
.hero .audience { margin: 14px 0 0; font-size: 1.02rem; color: var(--text); font-weight: 600; }
.hero .offer { margin: 12px 0 0; font-size: .98rem; color: var(--text); }
.hero .offer a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
#demo .kinds { max-width: 70ch; font-size: .95rem; color: var(--muted); margin-bottom: 36px; }   /* space before the demo card (owner, 6 Oct 2026) */
#demo .d-why { margin: 8px 0 0; }
#demo .d-files { margin: 10px 0 0; font-size: .92rem; }

/* The detail, folded (overhaul step one, 6 Oct 2026): one quiet row instead of twelve sections. */
.pro-more { border-bottom: 1px solid var(--line-soft); }
.pro-more > summary { list-style: none; cursor: pointer; padding: 34px 0; font-weight: 600; font-size: 1.05rem; color: var(--text); }
.pro-more > summary::-webkit-details-marker { display: none; }
.pro-more > summary .wrap { display: block; }
.pro-more > summary .wrap::before { content: "+"; display: inline-block; width: 1.4em; color: var(--green); font-weight: 700; }
.pro-more[open] > summary .wrap::before { content: "−"; }
.pro-more > summary .pm-hint { color: var(--muted); font-weight: 400; font-size: .9rem; }
.pro-more[open] > summary .pm-hint { display: none; }
.pro-more > summary:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }

/* ---- /pro rebuilt (7 Oct 2026): six sections, one column ---------------------------------- */
.pro2-hero .trial-help { margin: 10px 0 0; color: var(--muted); }
.pro2-hero .offer { margin: 14px 0 4px; }
.pro2-hero .free-alt { margin: 12px 0 0; font-size: .95rem; color: var(--muted); }
.pro2-hero .free-alt a, .pro2-links a, .pro2-data a { color: var(--text); text-underline-offset: 3px; }
.pro2-hero .coverage { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .92rem; line-height: 1.6; max-width: 820px; }
.pro2-hero .coverage .muted { color: var(--muted); }
.pro2-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.pro2-col { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.pro2-col h3 { margin: 0 0 8px; font-size: 1.2rem; }
.pro2-col p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .pro2-cols { grid-template-columns: 1fr; } }
.pro2-more, .pro2-free { max-width: 70ch; margin: 18px 0 0; }
.pro2-free { color: var(--muted); }
.pro2-links { margin: 18px 0 0; }
.pro2-prose { max-width: 70ch; }
.pro2-prose p { margin: 0 0 14px; }
.pro2-faq .faq { max-width: 820px; }
.pro2-final { text-align: center; }
.pro2-final .hero-cta { justify-content: center; display: flex; }

/* the demo opens on the whole finding; the step-by-step buttons are not needed then */
#pro-demo.all .d-next { display:none; }
#pro-demo.all .d-step + .d-step { margin-top:18px; }