/* portal-look.css — the three Busola landing pages dressed like the portal (20.10.2026).
 *
 * Gabriel: „pune logo-ul sus și ajustează să fie același design cu platforma (portal)".
 * The portal's look is `portal.css` on 10.10.0.52 (card #103): warm background, white cards
 * with 22px corners and a soft shadow, Geist for everything, Instrument Serif italic for the
 * green accent in titles, pill buttons, the dark forest card, lime accents.
 *
 * Loaded AFTER each page's own CSS, so it only overrides. Colours and fonts come from
 * `tema/tema-sanatate.css` (the portal's copy, `--p-*`, `--font-p*`): no `#hex` here.
 *
 *   body.pl         — common to all three
 *   body.pl.pl-mac  — B and C (Adi's mock-up: .btn, .feature, .free-card, …)
 *   body.pl.landing — A (full-screen video hero, busola.css)
 */

/* ── common ───────────────────────────────────────────────────────────── */
body.pl { background: var(--p-fond); color: var(--p-cerneala); font-family: var(--font-p);
  -webkit-font-smoothing: antialiased; }
.pl h1, .pl h2, .pl h3, .pl h4, .pl summary { font-family: var(--font-p); font-weight: 600;
  letter-spacing: -.035em; color: var(--p-cerneala); }
.pl h1 { letter-spacing: -.05em; }
.pl .serif, .pl h1 span, .pl h2 .serif { font-family: var(--font-p-serif); font-style: italic;
  font-weight: 400; letter-spacing: -.005em; color: var(--p-verde); }
.pl .logo { display: block; width: 180px; height: auto; }
.pl .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--p-verde-text); }

/* ── B and C: Adi's mock-up, mapped onto the portal's tokens ─────────── */
body.pl-mac {
  --ink: var(--p-cerneala); --muted: var(--p-gri); --card: var(--p-hartie);
  --line: var(--p-linie-2); --green: var(--p-verde); --lime: var(--p-lime);
  --soft: var(--p-menta-2); --cyan: var(--p-cyan); --purple: var(--p-mov);
  --orange: var(--p-portocaliu); --shadow: var(--p-umbra);
}
.pl-mac nav { height: 78px; }
.pl-mac nav .marca { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.pl-mac nav .marca span { display: none; }

.pl-mac .btn { border-radius: 99px; font-weight: 600; min-height: 46px; padding: 12px 22px;
  font-size: 15px; letter-spacing: -.01em; }
.pl-mac .btn-primary { background: var(--p-verde); color: var(--p-alb);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--p-verde) 60%, transparent); }
.pl-mac .btn-primary:hover { background: var(--p-verde-tare); transform: translateY(-1px); }

.pl-mac .kicker, .pl-mac .hero-points span { background: var(--p-hartie); border-color: var(--p-linie-2);
  color: var(--p-verde-text); font-weight: 600; }
.pl-mac .kicker i { background: var(--p-lime); }
.pl-mac .hero-points span { color: var(--p-cerneala-2); }
.pl-mac h1 { font-weight: 600; line-height: 1.02; }
.pl-mac .hero > div > p, .pl-mac .section-head p { color: var(--p-cerneala-2); }

/* the cards: same paper, border, corners and shadow as .p-card in the portal */
.pl-mac .card-start, .pl-mac .feature, .pl-mac .free-card, .pl-mac .step, .pl-mac .aud,
.pl-mac .privacy div, .pl-mac .human, .pl-mac .founder, .pl-mac .loop, .pl-mac .final-card,
.pl-mac .faq details {
  background: var(--p-hartie); border: 1px solid var(--p-linie); border-radius: 22px;
  box-shadow: var(--p-umbra); }
.pl-mac .faq details { border-radius: 16px; }
.pl-mac .card-start:before { background: color-mix(in srgb, var(--p-lime) 22%, transparent); }
.pl-mac .film { border-radius: 16px; background: var(--p-tint); }

/* icons as in the portal: rounded square, soft tint */
.pl-mac .icon { width: 38px; height: 38px; border-radius: 12px; font-size: 13px; font-weight: 600;
  background: var(--p-menta-2); color: var(--p-verde); }
.pl-mac .feature:nth-child(3n+2) .icon { background: var(--p-cyan-moale); color: var(--p-cyan); }
.pl-mac .feature:nth-child(3n) .icon { background: var(--p-mov-moale); color: var(--p-mov); }
.pl-mac .feature:nth-child(4) .icon, .pl-mac .feature:nth-child(7) .icon {
  background: var(--p-portocaliu-moale); color: var(--p-portocaliu); }
.pl-mac .free-card .check { color: var(--p-verde); }
.pl-mac .num { color: var(--p-verde-text); font-weight: 600; }
.pl-mac .feature h3, .pl-mac .free-card h3, .pl-mac .step h3 { letter-spacing: -.02em; }

/* the dark card: the portal's forest, not a flat dark green */
.pl-mac .problem { background: var(--p-padure); border-radius: 22px; box-shadow: var(--p-umbra-tare); }
.pl-mac .problem h2 { color: var(--p-alb); }
.pl-mac .problem p { color: var(--p-pe-padure); }
.pl-mac .problem .eyebrow { color: var(--p-lime) !important; }
.pl-mac .problem-item { background: var(--p-padure-2); border-color: color-mix(in srgb, var(--p-alb) 8%, transparent);
  color: var(--p-pe-padure); }
.pl-mac .problem-item b { color: var(--p-lime); }

/* the soft panels: the portal's mint gradient (like „Gândul zilei") */
.pl-mac .tease { background: linear-gradient(135deg, var(--p-menta-2), var(--p-hartie) 70%);
  border: 1px solid var(--p-linie); border-radius: 22px; box-shadow: var(--p-umbra); }
.pl-mac .pret-bula { background: var(--p-padure); color: var(--p-alb); border-radius: 18px; }
.pl-mac .pret-bula span { color: var(--p-lime); opacity: 1; }
.pl-mac .plan-facts div { background: var(--p-hartie); border-color: var(--p-linie); border-radius: 16px; }
.pl-mac .not-for { background: var(--p-portocaliu-moale); border-color: transparent; color: var(--p-cerneala-2);
  border-radius: 16px; }
.pl-mac .loop-node { background: var(--p-menta-2); border-color: var(--p-menta); border-radius: 16px; }
.pl-mac .loop-center { color: var(--p-gri-2); }
.pl-mac .loop-break { background: var(--p-padure); color: var(--p-pe-padure); border-radius: 16px; }
.pl-mac .loop-break b { color: var(--p-lime); }
.pl-mac .limita { background: var(--p-menta-2); border-color: var(--p-linie); border-radius: 14px; }
.pl-mac .credentials { color: var(--p-verde-text); font-weight: 600; }
.pl-mac .intimitate { background: linear-gradient(135deg, var(--p-menta-2), var(--p-hartie) 70%);
  border: 1px solid var(--p-linie); border-radius: 22px; box-shadow: var(--p-umbra); }
.pl-mac .sticky { background: color-mix(in srgb, var(--p-hartie) 88%, transparent); border-color: var(--p-linie);
  border-radius: 99px; }
.pl-mac footer { border-top-color: var(--p-linie-2); color: var(--p-gri); }
.pl-mac a[style*="var(--green)"] { color: var(--p-verde-text) !important; }

/* ── A: busola.css, onto the portal's tokens ─────────────────────────── */
body.pl.landing {
  --b-fundal: var(--p-fond); --b-alb: var(--p-hartie); --b-salvie: var(--p-menta-2);
  --b-menta: var(--p-tint); --b-verde: var(--p-verde); --b-verde-hover: var(--p-verde-tare);
  --b-verde-adanc: var(--p-cerneala); --b-text: var(--p-cerneala); --b-text-2: var(--p-cerneala-2);
  --b-bordura: var(--p-linie-2);
  --font-titlu: var(--font-p); --font-text: var(--font-p);
}
/* the logo sits on the film, so it gets the portal's paper behind it, as a pill */
.pl.landing .marca { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 99px;
  background: color-mix(in srgb, var(--p-hartie) 92%, transparent); box-shadow: var(--p-umbra-tare); }
.pl.landing .marca .logo { width: 150px; }
.pl.landing .marca span { display: none; }
.pl.landing .erou h1 { color: var(--p-alb); font-weight: 600; letter-spacing: -.05em; }
.pl.landing .erou h1 span { color: var(--p-lime); }
.pl.landing a.buton.principal.buton--mare { border-radius: 99px; font-weight: 600; font-family: var(--font-p);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--p-verde) 60%, transparent); }
.pl.landing .pas, .pl.landing .pachet, .pl.landing .om__poza {
  background: var(--p-hartie); border: 1px solid var(--p-linie); border-radius: 22px; box-shadow: var(--p-umbra); }
.pl.landing .sectiune--alb .pas { background: var(--p-hartie); }
.pl.landing .sectiune--menta { background: var(--p-tint); }
.pl.landing .sectiune--alb { background: var(--p-hartie); }
.pl.landing .semn { background: var(--p-menta-2); border-color: transparent; color: var(--p-verde); }
.pl.landing .pachet .pret { font-family: var(--font-p); font-weight: 600; letter-spacing: -.03em; }
.pl.landing .pachet .eticheta { border-radius: 99px; }
.pl.landing .intimitate { background: linear-gradient(135deg, var(--p-menta-2), var(--p-hartie) 70%);
  border: 1px solid var(--p-linie); box-shadow: var(--p-umbra); border-radius: 22px; }
.pl.landing .intrebare summary { font-family: var(--font-p); font-weight: 600; letter-spacing: -.02em; }
.pl.landing .om__limita { border-left-color: var(--p-lime); }
.pl.landing .subsol { color: var(--p-gri); }