/* marketing.css — public pages (landing, legal, support, funnels). Consumes the prava
   tokens (tokens.css) — same look as the app, light+dark, yellow default. No app component
   styles here. Craft baseline: one type scale, one spacing rhythm, one depth language
   (consistent borders / radii / shadows), accent used as PUNCTUATION not decoration. */

/* No horizontal scroll, ever. Paint html+body the theme bg so nothing shows a canvas strip
   around .mk (an 8px body margin used to read as a thin frame on phones). */
html, body{ margin:0; overflow-x:hidden; max-width:100%; background:var(--ds-bg); }
[data-theme="prava"] *, [data-theme="prava"] *::before, [data-theme="prava"] *::after{ box-sizing:border-box; }
[data-theme="prava"] .mk{ min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden;
  background:var(--ds-bg); color:var(--ds-text);
  /* one rhythm + depth system, consumed everywhere below */
  --mk-maxw:1120px; --mk-gutter:24px;
  --mk-r:18px;          /* controls, small cards            */
  --mk-r-card:20px;     /* content cards                    */
  --mk-r-lg:28px;       /* large panels / bands             */
  --mk-sec:96px;        /* section vertical rhythm          */
  --mk-hairline:1px solid var(--ds-border);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
@media (max-width:600px){ [data-theme="prava"] .mk{ --mk-sec:62px; --mk-gutter:18px; } }

/* Links: no underline by default; ACCENT colour on text links only (never buttons/brand —
   that once rendered CTA text accent-on-accent). Underline-on-hover for text links only.
   `color:inherit` exists only to kill the UA blue on links that declare no colour of their
   own. It must NEVER reach a BUTTON: at (0,2,1) it outranked `.mk-cta` (0,2,0), so every
   anchor-CTA inherited the page text colour — near-black in light (passed by luck) and
   near-WHITE on the yellow gradient in dark (1.27:1). Buttons are excluded here and keep
   the dark text they declare themselves. (audit B1) */
[data-theme="prava"] .mk a{ text-decoration:none; }
[data-theme="prava"] .mk a:not(.mk-cta):not(.mk-sticky):not(.fn-cta){ color:inherit; }
[data-theme="prava"] .mk a:not(.mk-cta):not(.mk-brand):not(.mk-sticky){ color:var(--ds-accent); }
[data-theme="prava"] .mk a:not(.mk-cta):not(.mk-brand):not(.mk-sticky):hover{ text-decoration:underline; text-underline-offset:3px; }
[data-theme="prava"] .mk-wrap{ width:100%; max-width:var(--mk-maxw); margin:0 auto; padding:0 var(--mk-gutter); }
[data-theme="prava"] .mk-narrow{ max-width:740px; }

/* ═══ Top bar — glass, hairline, quiet ═══ */
[data-theme="prava"] .mk-top{ position:sticky; top:0; z-index:20; backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  background:color-mix(in srgb, var(--ds-bg) 78%, transparent); border-bottom:var(--mk-hairline); }
[data-theme="prava"] .mk-top__in{ display:flex; align-items:center; gap:18px; height:62px; }
/* The wordmark is inline SVG so «teori» inherits this colour on both schemes while the
   gold x stays gold. Height, not width: the lockup is ~3:1 and the header is height-bound. */
[data-theme="prava"] .mk-brand{ display:flex; align-items:center; color:var(--ds-text); }
[data-theme="prava"] .mk-brand svg{ display:block; height:23px; width:auto; }
[data-theme="prava"] .mk-foot .mk-brand svg{ height:20px; }
@media (max-width:560px){ [data-theme="prava"] .mk-brand svg{ height:20px; } }
[data-theme="prava"] .mk-nav{ display:flex; gap:22px; margin-left:auto; align-items:center; }
/* :not(.mk-cta) — this rule is (0,2,1) and would otherwise repaint the header CTA's text
   grey on the yellow fill (2.19–3.88:1). Nav LINKS are muted; the nav BUTTON is not. (audit I3) */
[data-theme="prava"] .mk-nav a:not(.mk-cta){ color:var(--ds-text-soft); font-size:14px; font-weight:600; transition:color .16s; }
[data-theme="prava"] .mk-nav a:not(.mk-cta):hover{ color:var(--ds-text); text-decoration:none; }

/* Language dropdown with inline-SVG flags (never emoji — Windows renders those as letters). */
[data-theme="prava"] .mk-langdd{ position:relative; }
[data-theme="prava"] .mk-langdd__btn{ display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border:var(--mk-hairline);
  border-radius:var(--r-pill); background:var(--ds-surface); color:var(--ds-text); cursor:pointer; font:inherit; line-height:0; transition:border-color .16s, background .16s; }
[data-theme="prava"] .mk-langdd__btn:hover{ border-color:color-mix(in srgb, var(--ds-accent) 55%, var(--ds-border)); }
[data-theme="prava"] .mk-langdd__fl{ width:22px; height:15px; border-radius:3px; overflow:hidden; display:inline-flex; flex:0 0 auto; box-shadow:0 0 0 1px rgba(0,0,0,.14); }
[data-theme="prava"] .mk-langdd__fl svg, [data-theme="prava"] .mk-fl svg{ width:100%; height:100%; display:block; }
[data-theme="prava"] .mk-langdd__chev{ width:15px; height:15px; color:var(--ds-text-soft); transition:transform .2s; }
[data-theme="prava"] .mk-langdd.is-open .mk-langdd__chev{ transform:rotate(180deg); }
[data-theme="prava"] .mk-langdd__menu{ position:absolute; top:calc(100% + 9px); right:0; min-width:182px; margin:0; padding:6px; list-style:none;
  background:var(--ds-surface); border:var(--mk-hairline); border-radius:16px; box-shadow:var(--prava-sh-tab); z-index:60;
  opacity:0; transform:translateY(-6px) scale(.98); transform-origin:top right; pointer-events:none; transition:opacity .18s, transform .18s; }
[data-theme="prava"] .mk-langdd.is-open .mk-langdd__menu{ opacity:1; transform:none; pointer-events:auto; }
[data-theme="prava"] .mk-langdd__i{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--ds-text); transition:background .14s; }
[data-theme="prava"] .mk-langdd__i:hover{ background:var(--ds-accent-soft); }
[data-theme="prava"] .mk-langdd__i[aria-selected="true"]{ color:var(--ds-accent); }
[data-theme="prava"] .mk-langdd__i[aria-selected="true"]::after{ content:"✓"; margin-left:auto; font-weight:800; }
[data-theme="prava"] .mk-band__flags{ display:inline-flex; gap:6px; justify-content:center; margin-top:2px; }
[data-theme="prava"] .mk-fl{ width:24px; height:16px; border-radius:3px; overflow:hidden; display:inline-flex; box-shadow:0 0 0 1px rgba(0,0,0,.14); }
/* ── mobile menu ────────────────────────────────────────────────────────────────────────
   The nav used to be simply hidden below 760px, which left the phone with no way to reach
   any section, the language switcher or the CTA. Same markup, different shape: the burger
   toggles .is-open on the header and the nav becomes a panel. Cloning the nav into a second
   element would have duplicated the language dropdown and its handlers. */
[data-theme="prava"] .mk-burger{ display:none; margin-left:auto; width:42px; height:42px; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer;
  border-radius:12px; border:1px solid var(--ds-border); background:var(--ds-surface); color:var(--ds-text); }
[data-theme="prava"] .mk-burger span{ display:block; width:18px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .18s ease, opacity .14s ease; }
[data-theme="prava"] .mk-top.is-open .mk-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
[data-theme="prava"] .mk-top.is-open .mk-burger span:nth-child(2){ opacity:0; }
[data-theme="prava"] .mk-top.is-open .mk-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion:reduce){ [data-theme="prava"] .mk-burger span{ transition:none; } }

/* Scoped to [data-nav="menu"] — the header that actually ships a burger. The funnel and
   legal pages carry a nav holding only the language switcher; collapsing it there would
   hide the switcher behind a button that does not exist on those pages. */
@media (max-width:760px){
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-top__in{ position:relative; }
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-burger{ display:flex; }
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-nav{ display:none; position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; margin-left:0; padding:6px 6px 14px;
    background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:16px;
    box-shadow:0 18px 44px rgba(16,24,32,.18); }
  [data-theme="prava"] .mk-top[data-nav="menu"].is-open .mk-nav{ display:flex; }
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-nav a:not(.mk-cta){ display:block; padding:14px 12px; font-size:16px; color:var(--ds-text); }
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-nav a:not(.mk-cta) + a:not(.mk-cta){ border-top:1px solid var(--ds-border); }
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-nav .mk-langdd{ margin:10px 12px 0; }
  [data-theme="prava"] .mk-top[data-nav="menu"] .mk-nav .mk-cta{ display:inline-flex; justify-content:center; margin:12px 12px 0; }
}

/* ═══ Buttons — dark text on the bright accent gradient (readable on yellow AND teal) ═══ */
[data-theme="prava"] .mk-cta{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--r-pill); font-size:15.5px; font-weight:800; letter-spacing:.01em; cursor:pointer; border:0;
  background:var(--prava-cta-grad); color:#333333; box-shadow:var(--prava-sh-cta); white-space:nowrap; overflow:hidden;
  transition:filter .16s, transform .14s, box-shadow .24s; }
[data-theme="prava"] .mk-cta:hover{ text-decoration:none; filter:brightness(1.05); transform:translateY(-2px);
  box-shadow:0 12px 30px color-mix(in srgb, var(--ds-accent) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
[data-theme="prava"] .mk-cta:active{ transform:translateY(0) scale(.99); }
[data-theme="prava"] .mk-cta--sm{ padding:9px 17px; font-size:14px; }
[data-theme="prava"] .mk-cta--lg{ padding:17px 32px; font-size:16.5px; }
[data-theme="prava"] .mk-cta--ghost{ background:none; color:var(--ds-text); border:1.5px solid var(--ds-border); box-shadow:none; }
[data-theme="prava"] .mk-cta--ghost:hover{ border-color:color-mix(in srgb, var(--ds-accent) 60%, var(--ds-border)); background:var(--ds-accent-soft); filter:none; color:var(--ds-text); }

/* ═══ HERO — sells by SHOWING the product in a clean device ═══ */
[data-theme="prava"] .mk-hero{ padding:64px 0 40px; position:relative; overflow:hidden; isolation:isolate; }
/* ONE tasteful backdrop: a soft accent glow up top (breathing), plus a faint dawn wash.
   The old triple-blob "acid" field is gone — restraint reads as expensive. */
[data-theme="prava"] .mk-hero__glow{ position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:min(860px,124vw); height:520px; max-width:100vw;
  background:radial-gradient(closest-side, var(--prava-glow), transparent 70%); pointer-events:none; z-index:-2; }
[data-theme="prava"] .mk-hero::before{ content:""; position:absolute; inset:0; z-index:-3; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ds-accent) 6%, transparent), transparent 42%); }
[data-theme="prava"] .mk-hero__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; position:relative; z-index:1; }
@media (max-width:900px){ [data-theme="prava"] .mk-hero{ padding:44px 0 28px; }
  [data-theme="prava"] .mk-hero__in{ grid-template-columns:1fr; gap:38px; text-align:center; } }
[data-theme="prava"] .mk-hero__copy{ min-width:0; }
[data-theme="prava"] .mk-kicker{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ds-accent); background:var(--ds-accent-soft); padding:7px 13px; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--ds-accent) 22%, transparent); }
[data-theme="prava"] .mk-h1{ font-size:clamp(32px,5.2vw,56px); font-weight:800; line-height:1.04; margin:20px 0 0; letter-spacing:-.03em; }
[data-theme="prava"] .mk-lede{ font-size:clamp(16px,2vw,19px); color:var(--ds-text-soft); line-height:1.6; margin:18px 0 0; max-width:544px; }
@media (max-width:900px){ [data-theme="prava"] .mk-lede{ margin-inline:auto; } }
[data-theme="prava"] .mk-hero__points{ list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:13px; }
@media (max-width:900px){ [data-theme="prava"] .mk-hero__points{ max-width:440px; margin-inline:auto; text-align:left; } }
[data-theme="prava"] .mk-hero__points li{ display:flex; align-items:flex-start; gap:11px; font-size:15px; font-weight:600; line-height:1.45; }
[data-theme="prava"] .mk-hero__points svg{ flex:0 0 auto; width:22px; height:22px; color:#333333;
  background:var(--prava-cta-grad); border-radius:50%; padding:3.5px; margin-top:1px;
  box-shadow:0 2px 7px color-mix(in srgb, var(--ds-accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
[data-theme="prava"] .mk-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
@media (max-width:900px){ [data-theme="prava"] .mk-hero__cta{ justify-content:center; } }
[data-theme="prava"] .mk-hero__note{ font-size:12.5px; color:var(--ds-hint); margin-top:15px; }

/* Device — clean modern frame, STRAIGHT-ON (deliberate, never a random tilt), full screen
   visible with no crop (screen aspect-ratio matches the 390×844 capture), premium layered
   depth + a soft accent back-bloom. */
[data-theme="prava"] .mk-hero__media{ display:flex; justify-content:center; position:relative; }
[data-theme="prava"] .mk-hero__media::before{ content:""; position:absolute; top:47%; left:50%;
  width:min(560px,94vw); height:min(560px,94vw); transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ds-accent) 34%, transparent), transparent 70%);
  filter:blur(42px); opacity:.52; pointer-events:none; z-index:0; }
[data-theme="prava"] .mk-device{ position:relative; z-index:1; width:min(340px,82vw); border-radius:50px; padding:12px;
  background:linear-gradient(158deg,#333c47 0%,#171d24 46%,#0a0e13 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),                                                    /* contact */
    0 42px 80px -22px rgba(0,0,0,.55),                                           /* deep drop */
    0 26px 54px -26px color-mix(in srgb, var(--ds-accent) 42%, transparent),     /* accent spill */
    inset 0 2px 1px rgba(255,255,255,.20),                                       /* top rim-light */
    inset 0 -3px 3px rgba(0,0,0,.5),                                             /* bottom edge */
    inset 0 0 0 1px rgba(255,255,255,.06);                                       /* hairline */
  transition:transform .5s cubic-bezier(.2,.7,.3,1); }
[data-theme="prava"] .mk-device__screen{ position:relative; aspect-ratio:390/844; border-radius:38px; overflow:hidden;
  background:#0b0e13; box-shadow:inset 0 0 0 1px rgba(0,0,0,.55); }
[data-theme="prava"] .mk-device__img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
/* Grounding floor shadow so the device reads as floating, not pasted. */
[data-theme="prava"] .mk-device::after{ content:""; position:absolute; left:50%; bottom:-5%; width:70%; height:36px;
  transform:translateX(-50%); background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent 76%); filter:blur(14px); z-index:-1; pointer-events:none; }
@media (hover:hover) and (pointer:fine){ [data-theme="prava"] .mk-device:hover{ transform:translateY(-7px); } }
@media (max-width:900px){ [data-theme="prava"] .mk-device{ width:min(300px,78vw); border-radius:46px; } }

/* ═══ Stats / trust band — neutral card, accent only on the numbers ═══ */
[data-theme="prava"] .mk-band{ padding:8px 0; }
[data-theme="prava"] .mk-band__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  background:var(--prava-elev); border:var(--mk-hairline); border-radius:var(--mk-r-lg);
  box-shadow:var(--prava-sh-card); padding:26px 20px; }
@media (max-width:560px){ [data-theme="prava"] .mk-band__grid{ grid-template-columns:1fr 1fr; gap:24px 14px; padding:24px 16px; } }
[data-theme="prava"] .mk-band__i{ text-align:center; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
[data-theme="prava"] .mk-band__i:not(:last-child)::after{ content:""; position:absolute; right:-7px; top:14%; height:72%; width:1px; background:var(--ds-border); }
@media (max-width:560px){ [data-theme="prava"] .mk-band__i:nth-child(even)::after{ display:none; } }
[data-theme="prava"] .mk-band__n{ font-size:clamp(26px,4.4vw,38px); font-weight:800; letter-spacing:-.025em; line-height:1; min-height:38px; display:flex; align-items:center;
  background:var(--prava-accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
[data-theme="prava"] .mk-band__l{ font-size:12px; color:var(--ds-text-soft); margin-top:8px; line-height:1.35; }
/* The language cell sits in a row of big numerals, so it needs comparable mass without
   pretending to be a number. Four chips — flag plus code — read as one block at a glance
   and stay legible at 390px, where four bare 42×28 flags used to collide with the divider. */
/* 2×2, not a wrapping row: four chips on one line overflow the quarter-width cell and
   the fourth drops alone onto a second line, which makes this cell taller than the
   three numerals beside it. A fixed grid keeps the row even at every width. */
[data-theme="prava"] .mk-band__flags{ display:grid; grid-template-columns:repeat(2,auto); gap:6px;
  justify-content:center; align-content:center; min-height:38px; margin-top:0; }
[data-theme="prava"] .mk-band__flags .mk-lang{ display:inline-flex; align-items:center; gap:5px;
  padding:4px 8px 4px 5px; border-radius:999px; background:var(--ds-surface);
  border:1px solid var(--ds-border); font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--ds-text-soft); line-height:1; }
[data-theme="prava"] .mk-band__flags .mk-fl{ width:20px; height:14px; border-radius:3px; display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.10); }
@media (max-width:560px){ [data-theme="prava"] .mk-band__flags .mk-lang{ padding:3px 7px 3px 4px; font-size:10px; } }

/* ═══ Sections — generous, consistent rhythm ═══ */
[data-theme="prava"] .mk-section{ padding:var(--mk-sec) 0; }
[data-theme="prava"] .mk-section--alt{ background:color-mix(in srgb, var(--ds-surface) 55%, var(--ds-bg)); border-block:var(--mk-hairline); }

/* Texture, not decoration: the sparse sections were reading as unfinished because a plain
   flat background gives the eye nothing to sit on between two blocks of type. Both layers
   are built from the theme's own tokens and both are pointer-events:none behind the
   content, so nothing here can eat a click or shift contrast — the grid is a hairline of
   --ds-border and the glow is the same --prava-glow the hero already uses. */
[data-theme="prava"] .mk-section--tex{ position:relative; isolation:isolate; overflow:hidden; }
[data-theme="prava"] .mk-section--tex::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(var(--ds-border) 1px, transparent 1px),
                   linear-gradient(90deg, var(--ds-border) 1px, transparent 1px);
  background-size:56px 56px; opacity:.55;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%, #000 12%, transparent 76%);
          mask-image:radial-gradient(120% 78% at 50% 0%, #000 12%, transparent 76%); }
[data-theme="prava"] .mk-section--tex::after{ content:""; position:absolute; z-index:-3; pointer-events:none;
  top:-160px; left:50%; transform:translateX(-50%); width:min(820px,120vw); height:420px; max-width:100vw;
  background:radial-gradient(closest-side, var(--prava-glow), transparent 72%); }

/* Cards get a top hairline that lights up on hover — the same accent, used sparingly. */
[data-theme="prava"] .mk-card{ position:relative; }
[data-theme="prava"] .mk-card::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:2px;
  border-radius:0 0 3px 3px; background:var(--prava-cta-grad); opacity:0; transition:opacity .18s ease; }
[data-theme="prava"] .mk-card:hover::before, [data-theme="prava"] .mk-card:focus-within::before{ opacity:.9; }
@media (hover:hover){ [data-theme="prava"] .mk-card{ transition:transform .18s ease, box-shadow .18s ease; }
  [data-theme="prava"] .mk-card:hover{ transform:translateY(-2px); } }
@media (prefers-reduced-motion:reduce){ [data-theme="prava"] .mk-card{ transition:none; }
  [data-theme="prava"] .mk-card:hover{ transform:none; } }
[data-theme="prava"] .mk-h2{ font-size:clamp(26px,3.4vw,36px); font-weight:800; text-align:center; letter-spacing:-.025em; line-height:1.14; }
[data-theme="prava"] .mk-sub{ text-align:center; color:var(--ds-text-soft); margin:13px auto 0; font-size:16.5px; max-width:580px; line-height:1.55; }
[data-theme="prava"] .mk-ctarow{ display:flex; justify-content:center; margin-top:42px; }

/* How it works — three real app screens (same clean frame family as the hero device) */
[data-theme="prava"] .mk-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:48px; }
@media (max-width:760px){ [data-theme="prava"] .mk-steps{ grid-template-columns:1fr; gap:44px; max-width:300px; margin-inline:auto; } }
[data-theme="prava"] .mk-step{ position:relative; text-align:center; }
[data-theme="prava"] .mk-phone{ position:relative; border-radius:34px; padding:8px; margin:0 auto 22px; max-width:264px; aspect-ratio:390/844;
  background:linear-gradient(158deg,#2b333d,#0c1015);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05); }
[data-theme="prava"] .mk-phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; border-radius:27px; }
[data-theme="prava"] .mk-step__n{ position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; background:var(--prava-cta-grad); color:#333333; font-weight:800;
  display:grid; place-items:center; box-shadow:var(--prava-sh-cta); font-size:15.5px; z-index:2; }
[data-theme="prava"] .mk-step__t{ font-size:17px; font-weight:800; margin-top:6px; letter-spacing:-.015em; }
[data-theme="prava"] .mk-step__d{ font-size:14px; color:var(--ds-text-soft); line-height:1.5; margin-top:7px; max-width:280px; margin-inline:auto; }

/* ═══ Benefit cards ═══ */
[data-theme="prava"] .mk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
@media (max-width:860px){ [data-theme="prava"] .mk-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ [data-theme="prava"] .mk-grid{ grid-template-columns:1fr; } }
[data-theme="prava"] .mk-card{ background:var(--prava-elev); border:var(--mk-hairline); border-radius:var(--mk-r-card);
  padding:26px 24px; box-shadow:var(--prava-sh-card); }
/* Icon tile — one house style everywhere on the landing: yellow gradient tile + dark (#333)
   icon + soft accent glow (matches the trust "shield" the owner liked). */
[data-theme="prava"] .mk-card__ic{ width:48px; height:48px; border-radius:14px; background:var(--prava-cta-grad);
  color:#333333; display:grid; place-items:center; margin-bottom:17px;
  box-shadow:0 4px 14px color-mix(in srgb, var(--ds-accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; }
[data-theme="prava"] .mk-card__ic svg{ width:24px; height:24px; }
[data-theme="prava"] .mk-card__t{ font-size:17.5px; font-weight:800; letter-spacing:-.015em; }
[data-theme="prava"] .mk-card__d{ font-size:14.5px; color:var(--ds-text-soft); line-height:1.55; margin-top:9px; }

/* ═══ Trust block ═══ */
[data-theme="prava"] .mk-trust{ display:flex; gap:17px; align-items:center; padding:24px 26px;
  border:1px solid color-mix(in srgb, var(--ds-accent) 24%, var(--ds-border)); border-radius:var(--mk-r-lg);
  background:color-mix(in srgb, var(--ds-accent) 6%, var(--ds-surface)); box-shadow:var(--prava-sh-card); }
[data-theme="prava"] .mk-trust__ic{ flex:0 0 auto; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--prava-cta-grad); color:#333333; box-shadow:0 4px 14px color-mix(in srgb, var(--ds-accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
[data-theme="prava"] .mk-trust__ic svg{ width:27px; height:27px; }
[data-theme="prava"] .mk-trust__t{ font-weight:800; font-size:17.5px; letter-spacing:-.015em; }
[data-theme="prava"] .mk-trust__d{ font-size:14.5px; color:var(--ds-text-soft); line-height:1.55; margin-top:5px; }

/* ═══ Reviews ═══ */
[data-theme="prava"] .mk-revgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:38px; }
[data-theme="prava"] .mk-rev{ background:var(--prava-elev); border:var(--mk-hairline); border-radius:var(--mk-r-card);
  padding:24px; box-shadow:var(--prava-sh-card); text-align:left; }
[data-theme="prava"] .mk-rev__text{ font-size:15px; line-height:1.62; }
[data-theme="prava"] .mk-rev__who{ font-size:13px; color:var(--ds-text-soft); margin-top:14px; font-weight:700; }
[data-theme="prava"] .mk-reviews{ text-align:center; }
/* Reviews has one compact card, so it gets a tighter vertical rhythm than a full section —
   no yawning empty space around the single element. */
[data-theme="prava"] .mk-reviews.mk-section{ padding-block:calc(var(--mk-sec) * .62); }
/* Honest empty-state: an INTENTIONAL card (icon + message + soft CTA), never a bare void.
   We never inject invented testimonials — this is what shows until real beta quotes land. */
[data-theme="prava"] .mk-reviews__box{ margin:26px auto 0; padding:34px 28px; max-width:520px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background:var(--prava-elev); border:var(--mk-hairline); border-radius:var(--mk-r-lg); box-shadow:var(--prava-sh-card); }
[data-theme="prava"] .mk-reviews__ic{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--prava-cta-grad); color:#333333;
  box-shadow:0 4px 14px color-mix(in srgb, var(--ds-accent) 38%, transparent), inset 0 1px 0 rgba(255,255,255,.5); }
[data-theme="prava"] .mk-reviews__ic svg{ width:28px; height:28px; }
[data-theme="prava"] .mk-reviews__txt{ color:var(--ds-text-soft); font-size:15.5px; line-height:1.55; margin:0; max-width:420px; }
[data-theme="prava"] .mk-reviews__box .mk-cta{ margin-top:4px; }

/* ═══ FAQ accordion (native <details>) ═══ */
[data-theme="prava"] .mk-faq{ margin-top:38px; display:flex; flex-direction:column; gap:12px; }
[data-theme="prava"] .mk-faq__i{ border:var(--mk-hairline); border-radius:var(--mk-r-card); background:var(--prava-elev);
  box-shadow:var(--prava-sh-card); overflow:hidden; transition:border-color .18s; }
[data-theme="prava"] .mk-faq__i[open]{ border-color:color-mix(in srgb, var(--ds-accent) 40%, var(--ds-border)); }
[data-theme="prava"] .mk-faq__i summary{ list-style:none; cursor:pointer; padding:18px 20px; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; }
[data-theme="prava"] .mk-faq__i summary::-webkit-details-marker{ display:none; }
[data-theme="prava"] .mk-faq__i summary::after{ content:""; width:10px; height:10px; border-right:2px solid var(--ds-text-soft);
  border-bottom:2px solid var(--ds-text-soft); transform:rotate(45deg); transition:transform .2s, border-color .2s; flex:0 0 auto; margin-top:-3px; }
[data-theme="prava"] .mk-faq__i[open] summary{ color:var(--ds-accent); }
[data-theme="prava"] .mk-faq__i[open] summary::after{ transform:rotate(225deg); margin-top:3px; border-color:var(--ds-accent); }
[data-theme="prava"] .mk-faq__a{ padding:0 20px 18px; color:var(--ds-text-soft); line-height:1.62; font-size:15px; }

/* ═══ Final CTA — a contained premium panel (gradient-lit, glowing), not a bare band ═══ */
[data-theme="prava"] .mk-final{ padding:var(--mk-sec) 0; }
[data-theme="prava"] .mk-final__panel{ position:relative; overflow:hidden; text-align:center; border-radius:var(--r-shell,28px);
  padding:64px 24px; border:1px solid color-mix(in srgb, var(--ds-accent) 22%, var(--ds-border));
  background:
    radial-gradient(120% 140% at 50% -20%, color-mix(in srgb, var(--ds-accent) 14%, transparent), transparent 60%),
    var(--prava-elev);
  box-shadow:var(--prava-sh-hero); }
[data-theme="prava"] .mk-final__glow{ position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:min(640px,110%); height:360px; background:radial-gradient(closest-side, var(--prava-glow), transparent 70%); pointer-events:none; }
[data-theme="prava"] .mk-final__h{ font-size:clamp(28px,4vw,44px); font-weight:800; letter-spacing:-.025em; position:relative; line-height:1.1; }
[data-theme="prava"] .mk-final__sub{ color:var(--ds-text-soft); font-size:16.5px; margin-top:13px; position:relative; }
[data-theme="prava"] .mk-final__cta{ margin-top:30px; position:relative; justify-content:center; display:flex; gap:12px; flex-wrap:wrap; }
[data-theme="prava"] .mk-final .mk-hero__note{ position:relative; text-align:center; }

/* ═══ Sticky mobile CTA ═══ */
[data-theme="prava"] .mk-sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:40; display:none;
  align-items:center; justify-content:center; padding:15px; border-radius:var(--r-pill);
  background:var(--prava-cta-grad); color:#333333; font-weight:800; font-size:16px; letter-spacing:.01em;
  box-shadow:0 12px 32px rgba(0,0,0,.32), var(--prava-sh-cta); text-decoration:none;
  opacity:0; transform:translateY(24px); transition:opacity .3s, transform .3s; pointer-events:none; }
[data-theme="prava"] .mk-sticky.is-on{ opacity:1; transform:none; pointer-events:auto; }
@media (max-width:760px){ [data-theme="prava"] .mk-sticky{ display:flex; } }

/* ═══ Footer ═══ */
[data-theme="prava"] .mk-foot{ margin-top:auto; border-top:var(--mk-hairline); padding:34px 0; }
[data-theme="prava"] .mk-foot__row{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }
[data-theme="prava"] .mk-foot__links{ display:flex; flex-wrap:wrap; gap:16px; }
[data-theme="prava"] .mk-foot__links a{ color:var(--ds-text-soft); font-size:13.5px; }
[data-theme="prava"] .mk-foot__note{ color:var(--ds-hint); font-size:12.5px; margin-top:15px; line-height:1.5; max-width:680px; }

/* ═══ Legal / support article ═══ */
[data-theme="prava"] .mk-draft{ background:color-mix(in srgb, var(--prava-timer) 16%, var(--ds-surface));
  border:1px solid color-mix(in srgb, var(--prava-timer) 45%, transparent); color:var(--ds-text);
  border-radius:var(--mk-r-card); padding:12px 16px; font-size:13.5px; font-weight:600; margin:18px 0; }
[data-theme="prava"] .mk-article{ padding:34px 0 20px; }
[data-theme="prava"] .mk-article h1{ font-size:clamp(26px,4vw,34px); font-weight:900; letter-spacing:-.025em; }
[data-theme="prava"] .mk-article .mk-meta{ color:var(--ds-hint); font-size:13px; margin-top:6px; }
[data-theme="prava"] .mk-article h2{ font-size:18px; font-weight:800; margin:26px 0 6px; }
[data-theme="prava"] .mk-terms{ counter-reset: clause; }
[data-theme="prava"] .mk-terms h2{ counter-increment: clause; }
[data-theme="prava"] .mk-terms h2::before{ content: counter(clause) ". "; color:var(--ds-accent); }
[data-theme="prava"] .mk-article p{ color:var(--ds-text-soft); line-height:1.65; font-size:15px; margin:0; }
[data-theme="prava"] .mk-article .lead{ color:var(--ds-text); font-size:16px; }
[data-theme="prava"] .mk-article .mk-faq{ margin-top:14px; }
[data-theme="prava"] .mk-faq__q{ font-weight:800; font-size:15.5px; margin-top:18px; }
[data-theme="prava"] .mk-article .mk-faq__a{ color:var(--ds-text-soft); line-height:1.6; font-size:14.5px; margin-top:4px; padding:0; }

/* ═══ Support page header ═══ */
[data-theme="prava"] .mk-support-hero{ padding:56px 0 4px; position:relative; overflow:hidden; text-align:center; }
[data-theme="prava"] .mk-support-hero__h{ font-size:clamp(30px,4.5vw,44px); font-weight:800; letter-spacing:-.025em; margin:16px 0 0; line-height:1.08; }
[data-theme="prava"] .mk-support-hero .mk-lede{ margin:14px auto 0; text-align:center; }
[data-theme="prava"] .mk-card__link{ color:var(--ds-accent); font-weight:700; word-break:break-word; }

/* ── Motion: scroll-reveal (section + staggered children), hover lift, breathing glow.
   .mk-reveal is added by JS only, so a JS/observer failure leaves content visible; the whole
   block is skipped under reduced-motion. ──────────────────────────────────────────────── */
[data-theme="prava"] .mk-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); will-change:opacity, transform; }
[data-theme="prava"] .mk-reveal.is-in{ opacity:1; transform:none; }
/* children stagger within a revealed grid (cards, steps) — subtle, sequential */
[data-theme="prava"] .mk-reveal .mk-card, [data-theme="prava"] .mk-reveal .mk-step{ opacity:0; transform:translateY(16px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1); }
[data-theme="prava"] .mk-reveal.is-in .mk-card, [data-theme="prava"] .mk-reveal.is-in .mk-step{ opacity:1; transform:none; }
[data-theme="prava"] .mk-reveal.is-in .mk-card:nth-child(2), [data-theme="prava"] .mk-reveal.is-in .mk-step:nth-child(2){ transition-delay:.07s; }
[data-theme="prava"] .mk-reveal.is-in .mk-card:nth-child(3), [data-theme="prava"] .mk-reveal.is-in .mk-step:nth-child(3){ transition-delay:.14s; }
[data-theme="prava"] .mk-reveal.is-in .mk-card:nth-child(4){ transition-delay:.21s; }
[data-theme="prava"] .mk-reveal.is-in .mk-card:nth-child(5){ transition-delay:.28s; }
[data-theme="prava"] .mk-reveal.is-in .mk-card:nth-child(6){ transition-delay:.35s; }
@media (hover:hover) and (pointer:fine){
  [data-theme="prava"] .mk-card, [data-theme="prava"] .mk-faq__i{ transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s; }
  [data-theme="prava"] .mk-card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--ds-accent) 42%, var(--ds-border));
    box-shadow:var(--prava-sh-hero), 0 22px 46px -26px color-mix(in srgb, var(--ds-accent) 40%, transparent); }
  [data-theme="prava"] .mk-card:hover .mk-card__ic{ transform:scale(1.05);
    box-shadow:0 8px 20px color-mix(in srgb, var(--ds-accent) 52%, transparent), inset 0 1px 0 rgba(255,255,255,.55); }
  [data-theme="prava"] .mk-step:hover .mk-phone{ transform:translateY(-5px); transition:transform .22s; }
}
[data-theme="prava"] .mk-cta{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  [data-theme="prava"] .mk-hero__glow{ animation:mk-breathe 8s ease-in-out infinite; }
  /* one slow shimmer on the primary hero CTA — alive, not noisy */
  [data-theme="prava"] .mk-hero .mk-cta:not(.mk-cta--ghost)::after{ content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
    background-size:220% 100%; animation:mk-shimmer 5s ease-in-out infinite; pointer-events:none; }
}
@keyframes mk-breathe{ 0%,100%{ opacity:.8; transform:translateX(-50%) scale(1); } 50%{ opacity:1; transform:translateX(-50%) scale(1.06); } }
@keyframes mk-shimmer{ 0%{ background-position:140% 0; } 55%,100%{ background-position:-40% 0; } }
@media (prefers-reduced-motion: reduce){
  [data-theme="prava"] .mk-reveal, [data-theme="prava"] .mk-reveal .mk-card, [data-theme="prava"] .mk-reveal .mk-step{ opacity:1; transform:none; transition:none; }
}

/* ═══ Back to top ═══════════════════════════════════════════════════════════════════
   Sits above the sticky mobile CTA rather than beside it: at 390px the CTA spans the full
   width, so anything sharing its line would overlap it. Hidden until the reader is past a
   screenful, and `hidden` rather than opacity:0 so it never takes a tab stop while unseen. */
[data-theme="prava"] .mk-totop{ position:fixed; right:16px; bottom:24px; z-index:45;
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  border-radius:14px; border:1px solid var(--ds-border); background:var(--ds-surface); color:var(--ds-text);
  box-shadow:0 8px 24px rgba(16,24,32,.16); opacity:0; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease; }
[data-theme="prava"] .mk-totop[hidden]{ display:none; }
[data-theme="prava"] .mk-totop.is-in{ opacity:1; transform:none; }
[data-theme="prava"] .mk-totop:hover{ border-color:var(--ds-accent); }
[data-theme="prava"] .mk-totop:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:3px; }
[data-theme="prava"] .mk-totop svg{ width:20px; height:20px; }
@media (max-width:760px){ [data-theme="prava"] .mk-totop{ right:12px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); } }
/* Only the landing carries the sticky CTA, so only there does the button need to step up. */
[data-theme="prava"] body[data-page="landing"] .mk-totop{ bottom:24px; }
@media (max-width:760px){ [data-theme="prava"] body[data-page="landing"] .mk-totop{ bottom:calc(80px + env(safe-area-inset-bottom,0px)); } }
/* The consent sheet is a fixed overlay on the first visit, right where this button sits.
   consent.js puts .pv-consent-open on <html> while it is up — stand down until then. */
.pv-consent-open [data-theme="prava"] .mk-totop{ display:none; }
@media (prefers-reduced-motion:reduce){ [data-theme="prava"] .mk-totop{ transition:none; } }

[data-theme="prava"] .mk-brand:focus-visible{ outline:2px solid var(--ds-accent); outline-offset:4px; border-radius:6px; }