/* /pravna-pomosht — the consumer funnel's landing page.

   Mobile first and deliberately thin: paid consumer traffic arrives mostly on a phone, and the
   question box has to be reachable without scrolling. Nothing here is heavier than text, so the
   page paints in one pass with no layout shift and no blocking script. */
.pp { max-width: 720px; margin: 0 auto; padding: 18px 16px 40px; }
.pp h1 { font-size: clamp(24px, 6vw, 34px); line-height: 1.2; margin: 10px 0 8px; }
.pp .lede { color: var(--muted); font-size: 16px; line-height: 1.5; margin: 0 0 16px; }

.pp-ask { display: flex; flex-direction: column; gap: 10px; }
.pp-ask textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit;
  font-size: 16px;                 /* 16px or iOS zooms the page on focus */
  line-height: 1.45; color: var(--text); background: var(--inset);
  border: 1px solid var(--border); border-radius: 12px; resize: vertical; min-height: 88px; }
.pp-ask textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pp-ask .btn { align-self: stretch; padding: 13px 18px; font-size: 16px; font-weight: 600;
  border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent);   /* flips with the theme: near-black on the bright
                                green, white on the dark one */ cursor: pointer; }

.pp-trust, .pp-honest, .pp-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }
.pp-trust { color: var(--muted); }
.pp-honest { color: var(--text); }
.pp-note { color: var(--muted); }

.pp h2 { font-size: 17px; margin: 26px 0 10px; }
.pp-ex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-ex a { display: block; padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.4; }
.pp-ex a:hover { border-color: var(--accent); }

.pp-other { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.pp-other a { color: var(--accent); }

@media (min-width: 700px) {
  .pp-ask { flex-direction: row; align-items: flex-start; }
  .pp-ask textarea { flex: 1; }
  .pp-ask .btn { align-self: auto; min-width: 132px; }
  .pp-ex { display: grid; grid-template-columns: 1fr 1fr; }
}