/**
 * File role: what /ro/notar-asist/ (VOGO Notar Asist, formerly /ro/ai-notari/) adds to the shared e-Registratura frame (/ro/e-reg/e-reg.css, body.ereg-pk): the hero
 * with the home page's picture on the right (19.10.2026, user request) and the tall phone screens, narrower than the laptop screens of
 * the other product pages. Colours are the frame's tokens.
 *
 * $file_version: 1.0.2 (23.10.2026: the section "Aplicația biroului", screen rows as on /ro/aiao/);
 *                1.0.1 (19.10.2026: the home page's hero picture); 1.0.0 (new file, 19.10.2026)
 */
/* The hero: the home page's picture (https://vogo.me/ro/), dark on the left under the text and clear on the right,
   with the same gradient as ro/ecm-sections.css (.ro-ecm .vogo-gov-hero). */
body.ainot-pk .pk-hero {
  background:
    linear-gradient(90deg, rgba(0,17,32,.92) 0%, rgba(0,17,32,.72) 42%, rgba(0,17,32,.20) 70%, rgba(0,17,32,.10) 100%),
    url('/ro/img/bk-image-hero.webp') center / cover no-repeat,
    var(--pk-abyss);
}

/* The screens are phone pictures: narrow and centred in their column. */
body.ainot-pk .ainot-phone { max-width: 360px; margin: 0 auto; }
body.ainot-pk .ainot-phone img { width: 100%; height: auto; }

/* The note that the examples are fictitious. */
body.ainot-pk .ainot-note { margin: 4px 0 26px; font-size: 13px; color: #5b6472; text-align: center; }

/* The packages (PRO, PREMIUM): the list of what each includes, left-aligned under the card text. */
body.ainot-pk .ainot-pack ul { margin: 12px 0 0; padding-left: 18px; text-align: left; }
body.ainot-pk .ainot-pack li { margin: 6px 0; font-size: 14.5px; line-height: 1.5; }

/* ---- "Aplicația biroului" (1.0.2): the screens one per row on the dark band, text and picture alternating, as the
        screen rows of /ro/aiao/ (aiao.css .ai-screens), on the frame's tokens. ---- */
body.ainot-pk .na-screens {
  padding: clamp(56px, 7vw, 92px) 0;
  background:
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.06), transparent 46%),
    linear-gradient(135deg, var(--pk-abyss) 0%, var(--pk-deep) 55%, var(--pk-abyss) 100%);
  color: #fff;
}
body.ainot-pk .na-screens__head { max-width: 760px; margin: 0 auto 18px; text-align: center; }
body.ainot-pk .na-screens__kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--pk-ember); }
body.ainot-pk .na-screens__head h2 {
  margin: 10px 0 12px;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.18; letter-spacing: -.015em; color: #fff;
}
body.ainot-pk .na-screens__head p { margin: 0; font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,.8); }
body.ainot-pk .na-screen {
  display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: center;
  padding: clamp(26px, 4vw, 44px) 0;
}
body.ainot-pk .na-screen + .na-screen { border-top: 1px solid rgba(255,255,255,.1); }
body.ainot-pk .na-screen--flip .na-screen__text { order: 2; }
body.ainot-pk .na-screen__step { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.45); }
body.ainot-pk .na-screen h3 {
  margin: 8px 0 14px;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem); font-weight: 700; line-height: 1.22; letter-spacing: -.015em; color: #fff;
}
body.ainot-pk .na-screen h3::before {
  content: ""; display: block; width: 34px; height: 3px; margin-bottom: 16px; background: var(--pk-ember); border-radius: 2px;
}
body.ainot-pk .na-screen p { margin: 0 0 14px; font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,.82); }
body.ainot-pk .na-screen ul { margin: 0; padding: 0; list-style: none; }
body.ainot-pk .na-screen li {
  position: relative; margin: 8px 0; padding-left: 22px; font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.78);
}
body.ainot-pk .na-screen li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--pk-ember);
}
body.ainot-pk .na-screen__shot { margin: 0; }
body.ainot-pk .na-screen__shot img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid rgba(228,129,47,.22); box-shadow: 0 34px 70px -34px rgba(0,0,0,.85);
}
/* The phone screen: narrow, centred in its column, with rounder corners. */
body.ainot-pk .na-screen__shot--phone { max-width: 320px; margin: 0 auto; }
body.ainot-pk .na-screen__shot--phone img { border-radius: 26px; }
body.ainot-pk .na-screens__note { margin: 18px 0 0; font-size: 13px; text-align: center; color: rgba(255,255,255,.55); }

@media (max-width: 980px) {
  body.ainot-pk .na-screen { grid-template-columns: 1fr; gap: 26px; }
  body.ainot-pk .na-screen--flip .na-screen__text { order: 0; }
}