/*
  File role: the look of the e-Registratura packages page (/e-reg/).

  Identity comes from the site, not from this page: the dark #001120 and the
  ember #E4812F are the ones /ro/ uses since 22.09.2026, and the typefaces are
  the global Inter Tight + Inter loaded by general/styles.css. Nothing here is a
  per-page palette.

  Everything is scoped under body.ereg-pk, a class only this page carries, so no
  rule written here can reach the shared header, the footer or another page.

  The sign-in door at /e-reg/login/ has its own stylesheet; the two never share.

  @file_version 1.17.0
*/

body.ereg-pk {
  --pk-abyss:   #001120;   /* the dark of /ro/ */
  --pk-deep:    #04203c;   /* the band that sits under it */
  --pk-ember:   #E4812F;   /* the accent, on actions and on what AI+ adds */
  --pk-green:   #0f7b65;   /* the VOGO green, used only to say "included" */
  --pk-ink:     #111317;
  --pk-muted:   #4d5562;
  --pk-line:    #d7dbe1;
  --pk-paper:   #ffffff;
  --pk-paper-2: #f5f7fb;

  background: var(--pk-paper);
  color: var(--pk-ink);
}

body.ereg-pk .pk-wrap {
  width: min(1120px, 100vw - 32px);
  margin: 0 auto;
}

/* Screen-reader-only text: the table caption and the word behind each mark. */
body.ereg-pk .pk-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- The menu: permanently the scrolled look of /ro/ ----
   Fixed, not sticky: header/header.php and general/styles.css set
   overflow-x:hidden on html and body, which makes body a scroll container and
   cancels position:sticky. Fixed is kept because the hero already reserves
   var(--vh-h) for a header that sits over it.
   The bar is always filled with the /ro/ home image and veil (no transparent
   state at the top), so the menu looks the same as the scrolled home page.
   background-attachment:fixed anchors the slice to the window; the colour
   underneath is the net where mobile browsers ignore fixed attachment. */
body.ereg-pk .vogo-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background:
    linear-gradient(90deg, rgba(0,17,32,.94) 0%, rgba(0,17,32,.78) 42%, rgba(0,17,32,.34) 70%, rgba(0,17,32,.24) 100%),
    url('/ro/img/bk-image-hero.webp') center top / cover no-repeat fixed,
    #001120;
  box-shadow: 0 1px 0 rgba(0,0,0,.28);
}
body.ereg-pk .vogo-header .vh-band-top {
  background: transparent;
  border-bottom-color: transparent;
}

/* ---- Hero: the scene, dark, with the name on it ---- */
body.ereg-pk .pk-hero {
  background:
    linear-gradient(90deg, rgba(0,17,32,.95) 0%, rgba(0,17,32,.88) 42%, rgba(4,32,60,.55) 72%, rgba(4,32,60,.35) 100%),
    url('img/eRegistratura.webp') right center / cover no-repeat,
    var(--pk-abyss);
  color: #fff;
}
/* The copy starts at the container's left edge, in line with every section
   below it; only its measure is limited. The first row (the suite links) sits
   ~30px under the fixed header on desktop and ~20px on phones (27.09.2026, as on
   /ro/e-gov/ and /ro/e-biz/); the header height is always included. */
body.ereg-pk .pk-hero__inner {
  padding: calc(clamp(20px, 2.6vw, 32px) + var(--vh-h, 57px)) 0 clamp(48px, 8vw, 88px);
  max-width: 640px;
  margin: 0;
}
body.ereg-pk .pk-hero h1 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: #fff;
}
body.ereg-pk .pk-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0 0 28px;
  max-width: 52ch;
}

/* ---- Actions ---- */
body.ereg-pk .pk-actions { display: flex; flex-wrap: wrap; gap: 12px; }
body.ereg-pk .pk-actions--inline { margin-top: 20px; }

body.ereg-pk .pk-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 6px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: .96rem;
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body.ereg-pk .pk-btn i { font-size: 1.05rem; }

body.ereg-pk .pk-btn--accent {
  background: var(--pk-ember);
  color: #fff;
}
body.ereg-pk .pk-btn--accent:hover { background: #cf7120; color: #fff; }

body.ereg-pk .pk-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.42);
}
body.ereg-pk .pk-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

/* On the white section the ghost button needs ink, not white. */
body.ereg-pk .pk-section:not(.pk-section--dark) .pk-btn--ghost {
  color: var(--pk-ink);
  border-color: var(--pk-line);
}
body.ereg-pk .pk-section:not(.pk-section--dark) .pk-btn--ghost:hover { background: var(--pk-paper-2); color: var(--pk-ink); }

/* ---- Sections ---- */
body.ereg-pk .pk-section { padding: clamp(48px, 7vw, 88px) 0; }
body.ereg-pk .pk-section--dark {
  background: linear-gradient(180deg, var(--pk-abyss) 0%, var(--pk-deep) 100%);
  color: #fff;
}

body.ereg-pk .pk-h2 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 12px;
}
body.ereg-pk .pk-sub {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--pk-muted);
  margin: 0 0 32px;
  max-width: 68ch;
}

/* ---- The section that closes the page stands on its own shade, so the grid
        on it reads as a single object rather than as lines on the page. ---- */
body.ereg-pk .pk-section--packages { background: var(--pk-paper-2); }

/* ---- The grid of tiers ---- */
body.ereg-pk .pk-gridwrap {
  overflow-x: auto;
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-radius: 16px;
  box-shadow: 0 18px 44px -32px rgba(7,23,58,.55);
}

body.ereg-pk .pk-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  /* Fixed layout: the five columns share the width equally, whatever the length
     of a package code or of a column head. */
  table-layout: fixed;
}
/* The package code is the longest value in the grid, so its column takes a
   larger share and the other six split what is left evenly between them. */
body.ereg-pk .pk-grid th,
body.ereg-pk .pk-grid td { width: 13%; }
body.ereg-pk .pk-grid th:first-child,
body.ereg-pk .pk-grid td:first-child { width: 22%; }
/* The head takes the dark of the site: it is the one band that says what each
   column counts, and it separates the grid from the page without a rule. */
body.ereg-pk .pk-grid thead th {
  text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgba(255,255,255,.88);
  background: var(--pk-abyss);
  padding: 14px 14px;
}
body.ereg-pk .pk-grid thead th:first-child { border-top-left-radius: 15px; }
body.ereg-pk .pk-grid thead th:last-child { border-top-right-radius: 15px; }
body.ereg-pk .pk-grid tbody th,
body.ereg-pk .pk-grid tbody td {
  padding: 17px 14px;
  border-bottom: 1px solid var(--pk-line);
  vertical-align: middle;
  text-align: center;
}
body.ereg-pk .pk-grid tbody th {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--pk-ink);
}
body.ereg-pk .pk-grid tbody tr:hover { background: var(--pk-paper-2); }

/* The tiers that add the agentic assistant carry the accent on their edge —
   the one place the reader is looking for when comparing. */
body.ereg-pk .pk-grid tbody tr.is-ai { background: rgba(228,129,47,.045); }
body.ereg-pk .pk-grid tbody tr.is-ai th { box-shadow: inset 3px 0 0 var(--pk-ember); }
body.ereg-pk .pk-grid tbody tr:last-child th,
body.ereg-pk .pk-grid tbody tr:last-child td { border-bottom: 0; }

body.ereg-pk .pk-seats {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
body.ereg-pk .pk-storage {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(17,48,85,.07);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
}
body.ereg-pk .pk-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(15,123,101,.12);
  color: var(--pk-green);
}
body.ereg-pk .pk-no { color: #b6bcc6; }

/* ---- What every tier includes ---- */
body.ereg-pk .pk-common {
  margin-top: 26px;
  padding: 26px 28px;
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-radius: 14px;
}
body.ereg-pk .pk-common h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 14px;
}
body.ereg-pk .pk-common ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 26px;
}
body.ereg-pk .pk-common li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.55;
  color: var(--pk-ink);
}
body.ereg-pk .pk-common li i { color: var(--pk-ember); font-size: 1.05rem; line-height: 1.5; }
body.ereg-pk .pk-note {
  margin: 18px 0 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--pk-muted);
}

/* ---- What the application covers ---- */
body.ereg-pk .pk-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
}
body.ereg-pk .pk-fact p {
  margin: 8px 0 0;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 34ch;
}
body.ereg-pk .pk-fact__n {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--pk-ember);
}
body.ereg-pk .pk-more {
  margin: 32px 0 0;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
}
body.ereg-pk .pk-more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
body.ereg-pk .pk-more a:hover { color: var(--pk-ember); }

/* ---- Phones: the table stops being a table and becomes seven blocks ---- */
@media (max-width: 980px) {
  body.ereg-pk .pk-common ul { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 860px) {
  body.ereg-pk .pk-facts { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 720px) {
  body.ereg-pk .pk-hero { background: linear-gradient(180deg, rgba(0,17,32,.88) 0%, rgba(0,17,32,.94) 100%), url('img/eRegistratura.webp') center center / cover no-repeat, var(--pk-abyss); }
  body.ereg-pk .pk-btn { width: 100%; justify-content: center; }
  body.ereg-pk .pk-common { padding: 22px 20px; }
}


/* ---- The three actions in the copied section, asked plain (22.09.2026) ----
   No fill, a thin blue line, the same ink on the label and on the icon. Scoped
   to this page: ro/ecm-sections.css is shared with /ro/ and /en/ and is not
   touched, so the same buttons stay filled there. The Login button keeps its
   fill, as the one primary action of the bar. */
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--primary,
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--seap,
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--demo {
  background: transparent;
  color: #0C2F59;
  border: 1px solid #0C2F59;
  box-shadow: none;
}
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--primary i,
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--seap i,
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--demo i {
  color: #0C2F59;
}
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--primary:hover,
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--seap:hover,
body.ereg-pk .ro-ecm .ecm-reg__cta .egov-cta-btn--demo:hover {
  background: rgba(12,47,89,.07);
  color: #0C2F59;
  transform: none;
  box-shadow: none;
}

/* ---- The rewritten copy: what the reader checks in the first screen ---- */

/* The product name above the headline: the search is for what it does, the name
   is what confirms whose it is. */
body.ereg-pk .pk-kicker {
  font-family: Inter, system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  color: var(--pk-ember);
  margin: 0 0 10px;
}

body.ereg-pk .pk-hero__note {
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin: -14px 0 26px;
  max-width: 54ch;
}

/* ---- How the institution buys it ---- */
body.ereg-pk .pk-buy {
  margin-top: 26px;
  padding: 26px 28px;
  background: var(--pk-paper);
  border: 1px solid var(--pk-line);
  border-left: 3px solid var(--pk-ember);
  border-radius: 0; /* accent bar without rounded corners (27.09.2026) */
}
body.ereg-pk .pk-buy h3 {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 12px;
}
body.ereg-pk .pk-buy p {
  margin: 0 0 10px;
  line-height: 1.65;
  color: var(--pk-muted);
  max-width: 76ch;
}

/* ---- The closing invitation ---- */
body.ereg-pk .pk-final__lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin: 0 0 26px;
  max-width: 62ch;
}
body.ereg-pk .pk-fine {
  margin: 28px 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
}
body.ereg-pk .pk-fine strong { color: rgba(255,255,255,.88); }

@media (max-width: 720px) {
  body.ereg-pk .pk-buy { padding: 22px 20px; }
}

/* ---- Questions, the only piece kept from the audit pass ---- */
body.ereg-pk .pk-faq { background: var(--pk-paper); }
body.ereg-pk .pk-faq__list {
  margin-top: 26px;
  border-top: 1px solid var(--pk-line);
  max-width: 900px;
}
body.ereg-pk .pk-faq__item { border-bottom: 1px solid var(--pk-line); }
body.ereg-pk .pk-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  position: relative;
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--pk-ink);
}
body.ereg-pk .pk-faq__item summary::-webkit-details-marker { display: none; }
/* The sign says what the click does: a plus that becomes a minus. */
body.ereg-pk .pk-faq__item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--pk-ember);
}
body.ereg-pk .pk-faq__item[open] summary::after { content: "\2212"; }
body.ereg-pk .pk-faq__item summary:focus-visible { outline: 2px solid var(--pk-ember); outline-offset: 3px; }
body.ereg-pk .pk-faq__item p {
  margin: 0 0 20px;
  padding-right: 44px;
  line-height: 1.7;
  color: var(--pk-muted);
  max-width: 78ch;
}

/* ---- The twenty registers, as grouped cards (22.09.2026) ----
   One long list gave no way in; five families of four give the reader a place to
   look. Page-local: /ro/ keeps the list it has, and ro/ecm-sections.css is not
   touched. One surface, one border, one radius - no colour per card. */
body.ereg-pk .reg-cards { display: grid; gap: 34px; margin-top: 22px; }

body.ereg-pk .reg-family__name {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #113055;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17,48,85,.14);
}

body.ereg-pk .reg-family__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

body.ereg-pk .reg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid #dde4f3;
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.ereg-pk .reg-card:hover {
  border-color: #b9c6e3;
  box-shadow: 0 10px 26px -20px rgba(7,23,58,.5);
}

body.ereg-pk .reg-card__code {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(17,48,85,.06);
  font-family: Inter, system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #56638a;
}

body.ereg-pk .reg-card__name {
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0a1838;
  margin: 0;
}

/* Two lines of description, whatever the length of the entry. */
body.ereg-pk .reg-card__desc {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
  color: #56638a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.ereg-pk .reg-card__law {
  margin: auto 0 0;
  padding-top: 8px;
  font-size: .78rem;
  line-height: 1.4;
  color: #6b7280;
  border-top: 1px dashed rgba(17,48,85,.14);
}

/* The one thing left to say after the twenty: there can be more. */
body.ereg-pk .reg-callout {
  margin: 26px 0 0;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid #dde4f3;
  border-left: 3px solid var(--pk-ember);
  border-radius: 0; /* accent bar without rounded corners (27.09.2026) */
  font-size: .94rem;
  line-height: 1.6;
  color: #2c3a63;
}

@media (max-width: 1100px) {
  body.ereg-pk .reg-family__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  body.ereg-pk .reg-family__grid { grid-template-columns: 1fr; }
  body.ereg-pk .reg-cards { gap: 26px; }
}

/* ---- Load on scroll, the same numbers as /ro/ ----
   The hidden state is applied by script, never in the markup, so a visitor with
   JavaScript off sees the whole page instead of a blank one. */
body.ereg-pk .rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
body.ereg-pk .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.ereg-pk .rv { opacity: 1; transform: none; transition: none; }
}

/* ---- The band of screens runs the full width of the window (22.09.2026) ----
   It sits inside a 1200px container, so it is pulled out to the window edges the
   usual way. The rows inside keep a readable measure: a line of text stretched
   across 1900px is not read, it is scanned and abandoned.
   100vw is safe here because html and body carry overflow-x: hidden site-wide. */
body.ereg-pk .ro-ecm #registratura .ecm-reg__screens {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 44px;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
body.ereg-pk .ro-ecm #registratura .ecm-reg__screen {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- The opening text of the section ----
   No picture: the four screens follow immediately below, and a second visual
   above them said nothing new. The measure is what a person actually reads. */
body.ereg-pk .ro-ecm #registratura .reg-intro {
  max-width: 78ch;
  margin: 4px auto 0;
}
body.ereg-pk .ro-ecm #registratura .reg-intro p {
  margin: 0 0 16px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: #2c3a63;
}
body.ereg-pk .ro-ecm #registratura .reg-intro p:last-child { margin-bottom: 0; }
body.ereg-pk .ro-ecm #registratura .reg-intro strong { color: var(--pk-ember); }

/* The three short sentences at the end are the conclusion, not another paragraph. */
body.ereg-pk .ro-ecm #registratura .reg-intro__close {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(17,48,85,.14);
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  font-weight: 700;
  color: #0a1838;
}

/* ---- The film under the opening text (28.09.2026) ----
   A 16:9 frame that follows the width of the column, up to 960px, centred; the iframe fills it, so there is
   nothing to scroll sideways on a phone. 7px corners, as the other panels. */
body.ereg-pk .ro-ecm #registratura .reg-video {
  max-width: 960px;
  margin: 36px auto 8px;
}
body.ereg-pk .ro-ecm #registratura .reg-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: #001120;
  box-shadow: 0 10px 30px rgba(0,17,32,.18);
}
body.ereg-pk .ro-ecm #registratura .reg-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  body.ereg-pk .ro-ecm #registratura .reg-video { margin: 24px auto 4px; }
}

/* ---- The comparison grid on a phone (fix, 23.09.2026) ----
   The equal 20% columns and the centred cells are right for the table; once the
   rows become blocks they squeeze the package code onto four lines and leave the
   labels and values misaligned. Below the breakpoint the cells size themselves,
   the label sits left and the value right. */


/* ---- The two agents at the foot of the grid (23.09.2026) ----
   Not tiers: no seats, no storage, no marks. The name keeps the first column and
   what it takes to have it runs across the rest, so the row cannot be mistaken
   for a package. A line above them says where the tiers end. */
body.ereg-pk .pk-grid tbody tr.pk-servicerow:first-of-type th,
body.ereg-pk .pk-grid tbody tr.pk-servicerow:first-of-type td { border-top: 2px solid var(--pk-line); }

body.ereg-pk .pk-grid tbody tr.pk-servicerow { background: #fbfcfe; }
body.ereg-pk .pk-grid tbody tr.pk-servicerow th {
  text-align: left;
  font-weight: 700;
  color: var(--pk-ink);
}
body.ereg-pk .pk-grid tbody tr.pk-servicerow td {
  text-align: left;
  font-size: .92rem;
  font-style: italic;
  color: var(--pk-muted);
}
/* The name of the agent stays on one line: it spans two columns and does not wrap. */
body.ereg-pk .pk-grid tbody tr.pk-servicerow th { white-space: nowrap; }

/* ---- The DNSH note (24.09.2026, restyled) ----
   A legal line: white, set in italic, and marked by a straight rule on its left
   rather than by a coloured panel. Square corners on purpose - it is a note, not
   a card. Same block on every page that carries it. */
body.ereg-pk .dnsh-section { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(38px, 5vw, 56px); }
body.ereg-pk .dnsh-note {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  background: #ffffff;
  border: 0;
  border-left: 3px solid #011b34;
  border-radius: 0;
}
body.ereg-pk .dnsh-note__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 0;
  background: transparent;
  color: #011b34;
  font-size: 1.05rem;
}
body.ereg-pk .dnsh-note p {
  margin: 0;
  font-size: .88rem;
  font-style: italic;
  line-height: 1.65;
  color: #56638a;
}
body.ereg-pk .dnsh-note strong { color: #011b34; font-style: italic; }

@media (max-width: 720px) {
  body.ereg-pk .dnsh-note { padding: 16px 18px; gap: 12px; }
}

/* ---- The comparison grid on a phone (24.09.2026) ----
   Written at the end of the file on purpose: the column widths above are of the
   same weight, and whichever comes last wins. The stacked rows carry the VOGO
   premium line - #011b34 on the left, square corners, no frame - so a package
   reads as one block. The tiers with the agent keep the ember line instead, the
   one mark that tells them apart. */

@media (max-width: 720px) {
  /* ---- The comparison grid on a phone: the single place that styles it ----
     The table stops being a table, so the cells size themselves and the package
     code stays on one line. Each row carries the VOGO premium line - #011b34 on
     the left, square corners, no frame - and the tiers with the agent carry the
     ember one instead, the single mark that tells them apart. */
  body.ereg-pk .pk-grid,
  body.ereg-pk .pk-grid tbody,
  body.ereg-pk .pk-grid tr { display: block; }
  body.ereg-pk .pk-grid { table-layout: auto; }
  body.ereg-pk .pk-grid thead { display: none; }
  body.ereg-pk .pk-grid th,
  body.ereg-pk .pk-grid td { width: auto; }
  /* The first column is 22% wide in the table, through a :first-child rule that
     outweighs the one above whatever the order. Here it has to give that up. */
  body.ereg-pk .pk-grid th:first-child,
  body.ereg-pk .pk-grid td:first-child { width: auto; }

  body.ereg-pk .pk-gridwrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  body.ereg-pk .pk-grid tbody tr {
    background: #fff;
    border: 0;
    border-left: 3px solid #011b34;
    border-radius: 0;
    padding: 16px 16px 10px;
    margin-bottom: 14px;
    box-shadow: 0 10px 26px -22px rgba(7,23,58,.45);
  }
  body.ereg-pk .pk-grid tbody tr.is-ai {
    background: #fff;
    border-left-color: var(--pk-ember);
  }

  body.ereg-pk .pk-grid tbody th {
    display: block;
    text-align: left;
    white-space: normal;
    font-size: 1rem;
    padding: 0 0 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--pk-line);
    box-shadow: none;
  }
  body.ereg-pk .pk-grid tbody td {
    display: flex;
    align-items: baseline;
    gap: 10px;
    text-align: right;
    padding: 7px 0;
    border-bottom: 0;
  }
  /* Each value says what it is, since the header row is gone. */
  body.ereg-pk .pk-grid tbody td::before {
    content: attr(data-label);
    margin-right: auto;
    text-align: left;
    font-size: .84rem;
    color: var(--pk-muted);
  }
  body.ereg-pk .pk-seats { font-size: 1.2rem; }

  /* The two agents at the foot of the grid. */
  body.ereg-pk .pk-grid tbody tr.pk-servicerow th { white-space: normal; }
  body.ereg-pk .pk-grid tbody tr.pk-servicerow td { text-align: left; }
}

/* ---- Wide blue band (27.09.2026): the look of the /ro/ capability bands ---- */
body.ereg-pk .pk-blue-band {
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.06), transparent 45%),
              linear-gradient(135deg, var(--pk-abyss) 0%, var(--pk-deep) 55%, var(--pk-abyss) 100%);
  border-top: 1px solid rgba(228,129,47,.22);
}
body.ereg-pk .pk-blue-band .pk-common { margin-top: 0; padding: 0; background: none; border: 0; }
body.ereg-pk .pk-blue-band .pk-common h3 { color: #fff; font-size: 1.35rem; margin-bottom: 22px; }
body.ereg-pk .pk-blue-band .pk-common li { color: rgba(255,255,255,.86); }
/* The SEAP box continues the packages section after the band: no second full top padding */
body.ereg-pk .pk-section--after-band { padding-top: clamp(32px, 4vw, 48px); }
body.ereg-pk .pk-section--after-band .pk-buy { margin-top: 0; }
/* The register families on the blue band */
body.ereg-pk .ecm-blue-band .reg-family__name { color: #fff; }

/* ---- Footer as on /ro/ (27.09.2026): the #001120 dark of the hero, white logo text, translucent white
   links with the ember on hover. The footer comes from general/styles.css (whole site): scoped to this page. */
body.ereg-pk .site-footer,
body.ereg-pk .site-footer.vogo-footer { background: var(--pk-abyss); }
body.ereg-pk .site-footer .logo img { width: auto; height: 42px; }
body.ereg-pk .site-footer .logo span { color: #fff; }
body.ereg-pk .site-footer h4 {
  color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
body.ereg-pk .site-footer,
body.ereg-pk .site-footer p { color: rgba(255,255,255,.72); }
body.ereg-pk .site-footer a { color: rgba(255,255,255,.72); transition: color .2s ease; }
body.ereg-pk .site-footer a:hover { color: var(--pk-ember); }
body.ereg-pk .site-footer .vf-bottom { border-top-color: rgba(255,255,255,.12); }
body.ereg-pk .site-footer .vf-social a { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.72); }
body.ereg-pk .site-footer .vf-social a:hover { border-color: var(--pk-ember); color: var(--pk-ember); }

/* ---- Suite links in the hero (27.09.2026) ----
   Copied from /ro/ (ro/ecm-sections.css: the base .ecm-aiao__links rules and the
   .ecm-aiao__links--hero variant), re-scoped to this page's hero, which is not inside
   .ro-ecm. Small light pills on the dark hero: thin translucent outline, translucent
   white icons (full white on hover/focus), ember text and border on hover. The row is
   the first row of the hero, 20px above the kicker (phone too); the current page's link
   (eReg) is drawn a little stronger. */
body.ereg-pk .pk-hero .ecm-aiao__links--hero { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
body.ereg-pk .pk-hero .ecm-aiao__links--hero a,
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:link,
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:visited {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.22); background: transparent;
  color: rgba(255,255,255,.78); text-decoration: none;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  transition: border-color .2s cubic-bezier(.22,.61,.36,1), color .2s cubic-bezier(.22,.61,.36,1), background .2s cubic-bezier(.22,.61,.36,1);
}
body.ereg-pk .pk-hero .ecm-aiao__links--hero a i { color: rgba(255,255,255,.72); font-size: 13px; }
/* The page you are on: stronger text and border, same shape. */
body.ereg-pk .pk-hero .ecm-aiao__links--hero a.is-current,
body.ereg-pk .pk-hero .ecm-aiao__links--hero a.is-current:link,
body.ereg-pk .pk-hero .ecm-aiao__links--hero a.is-current:visited {
  color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.45);
}
/* Icons only: full white on hover/focus; the text and border take the ember hover. */
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:hover i,
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:focus-visible i { color: #fff; }
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:hover,
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:focus-visible {
  border-color: var(--pk-ember); color: var(--pk-ember); background: transparent;
}
body.ereg-pk .pk-hero .ecm-aiao__links--hero a:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }
/* Phone: tighter pills; the 20px gap to the kicker stays. */
@media (max-width: 600px) {
  body.ereg-pk .pk-hero .ecm-aiao__links--hero { gap: 6px; margin: 20px 0 0; }
  body.ereg-pk .pk-hero .ecm-aiao__links--hero a,
  body.ereg-pk .pk-hero .ecm-aiao__links--hero a:link,
  body.ereg-pk .pk-hero .ecm-aiao__links--hero a:visited { padding: 6px 9px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ereg-pk .pk-hero .ecm-aiao__links--hero a { transition: none; }
}

/* ---- Provenance seal in the hero (27.09.2026) ----
   Copied from /ro/ (ro/ecm-sections.css, block of the same name), re-scoped to this
   page: the hero here is not inside .ro-ecm, so the orange is --pk-ember and the easing
   curve is written out. A hairline roundel ("MADE IN EUROPE" on the arc, the 12 EU stars
   in orange, the registered sign at the centre) and a plaque with the EUIPO record
   number; one link, to the public EUIPO record. The dark translucent glass keeps it
   legible over the hero photo. It sits 28px under the buttons (20px on phones),
   left edge on the first button's line (both start at the left of .pk-hero__inner). */
body.ereg-pk .pk-hero .vogo-gov-hero__seal,
body.ereg-pk .pk-hero .vogo-gov-hero__seal:link,
body.ereg-pk .pk-hero .vogo-gov-hero__seal:visited {
  display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: 100%;
  margin: 28px 0 0; padding: 7px 14px 7px 7px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 7px;
  background: rgba(0,17,32,.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; text-decoration: none;
  transition: border-color .25s cubic-bezier(.22,.61,.36,1), background .25s cubic-bezier(.22,.61,.36,1);
}
body.ereg-pk .pk-hero .vogo-gov-hero__seal:hover { border-color: rgba(228,129,47,.7); background: rgba(0,17,32,.46); }
body.ereg-pk .pk-hero .vogo-gov-hero__seal:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 2px; }

/* The roundel: stroke-only rings, arc lettering in translucent white. */
body.ereg-pk .pk-hero .vogo-gov-hero__seal-mark { width: 64px; height: 64px; flex: 0 0 64px; display: block; overflow: visible; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-ring { fill: none; stroke: rgba(255,255,255,.5); stroke-width: .8; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-ring--inner { stroke: rgba(255,255,255,.26); stroke-width: .6; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-arc { fill: rgba(255,255,255,.88); font-family: "Inter Tight", "Inter", sans-serif; font-size: 7.6px; font-weight: 700; letter-spacing: 1.5px; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-arc--low { fill: rgba(255,255,255,.58); font-weight: 600; letter-spacing: 1.2px; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-reg { fill: #fff; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; text-anchor: middle; dominant-baseline: central; }

/* The only motion: the 12 stars come in one after another, once, on load. */
body.ereg-pk .pk-hero .vogo-gov-hero__seal-star {
  fill: var(--pk-ember); opacity: .85;
  transform-box: fill-box; transform-origin: center;
  animation: vogoSealStarIn .5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(.5s + var(--i) * 70ms);
  transition: opacity .25s cubic-bezier(.22,.61,.36,1);
}
body.ereg-pk .pk-hero .vogo-gov-hero__seal:hover .vogo-gov-hero__seal-star { opacity: 1; }
/* Same keyframes as in ro/ecm-sections.css (identical body), declared here so this
   page does not depend on the shared stylesheet for them. */
@keyframes vogoSealStarIn {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: .85; transform: none; }
}

/* The plaque: a hairline divider, "EUIPO" on the first line, the record number under it. */
body.ereg-pk .pk-hero .vogo-gov-hero__seal-text { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); line-height: 1.15; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-name { white-space: nowrap; font-family: "Inter Tight", "Inter", sans-serif; font-size: 13px; font-weight: 700; color: #fff; }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-num { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.72); }
body.ereg-pk .pk-hero .vogo-gov-hero__seal-num i { font-size: 11px; color: var(--pk-ember); }

/* Phone: a tighter gap under the buttons and a smaller roundel. */
@media (max-width: 600px) {
  body.ereg-pk .pk-hero .vogo-gov-hero__seal,
  body.ereg-pk .pk-hero .vogo-gov-hero__seal:link,
  body.ereg-pk .pk-hero .vogo-gov-hero__seal:visited { margin: 20px 0 0; gap: 10px; padding: 6px 12px 6px 6px; }
  body.ereg-pk .pk-hero .vogo-gov-hero__seal-mark { width: 52px; height: 52px; flex-basis: 52px; }
  body.ereg-pk .pk-hero .vogo-gov-hero__seal-text { padding-left: 10px; }
  body.ereg-pk .pk-hero .vogo-gov-hero__seal-name { font-size: 12.5px; }
  body.ereg-pk .pk-hero .vogo-gov-hero__seal-num { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  body.ereg-pk .pk-hero .vogo-gov-hero__seal-star { animation: none; }
  body.ereg-pk .pk-hero .vogo-gov-hero__seal,
  body.ereg-pk .pk-hero .vogo-gov-hero__seal-star { transition: none; }
}

/* ---- Hero buttons as on /ro/ (27.09.2026): transparent pill, thin white border, icon after the label ---- */
body.ereg-pk .pk-hero .pk-actions .pk-btn {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.75);
  padding: 16px 30px; border-radius: 999px; font-size: 1rem; box-shadow: none;
  transition: background .2s ease, border-color .2s ease;
}
body.ereg-pk .pk-hero .pk-actions .pk-btn:hover,
body.ereg-pk .pk-hero .pk-actions .pk-btn:focus-visible { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; transform: none; box-shadow: none; }
body.ereg-pk .pk-hero .pk-actions .pk-btn i { color: #fff; }

/* ---- The line with four short texts at the end of the hero, as .ai-args on /ro/aiao/ (27.09.2026) ---- */
body.ereg-pk .pk-hero-args {
  list-style: none; margin: 30px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: .9rem; color: rgba(255,255,255,.82);
}
body.ereg-pk .pk-hero-args li { display: flex; align-items: center; gap: 9px; }
body.ereg-pk .pk-hero-args li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-ember); }
@media (max-width: 600px) {
  body.ereg-pk .pk-hero .pk-actions .pk-btn { width: 100%; justify-content: center; }
  body.ereg-pk .pk-hero-args { gap: 10px 18px; font-size: .86rem; }
}

/* The three hero buttons stay on one line on wider screens: together (675px) they are wider than the
   640px text column, so the row is allowed to run past it (28.09.2026). Phones keep the stacked buttons. */
@media (min-width: 761px) {
  body.ereg-pk .pk-hero .pk-actions { flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 48px); }
}

/* ---- The hero film (28.09.2026, user's choice "3") ----
   Moments of the operating film play silently behind the hero, under the same dark gradient as the picture they
   replace. The picture (the section's own background) stays underneath: it shows until the film plays, when the
   reader asks for reduced motion, or if the film cannot load. The gradient over the film is drawn only once the film
   plays (.pk-hero--film, set by e-reg.js), so the still picture never gets it twice. */
body.ereg-pk .pk-hero { position: relative; isolation: isolate; overflow: hidden; }
body.ereg-pk .pk-hero__film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  z-index: -2; opacity: 0; transition: opacity .8s ease;
}
body.ereg-pk .pk-hero--film .pk-hero__film { opacity: 1; }
body.ereg-pk .pk-hero--film::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,17,32,.95) 0%, rgba(0,17,32,.86) 40%, rgba(4,32,60,.45) 70%, rgba(4,32,60,.18) 100%);
}

/* The play button on the film, on the right: a ring that breathes, the label under it. */
body.ereg-pk .pk-hero__play {
  position: absolute; right: clamp(24px, 9vw, 150px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: none; border: 0; padding: 0; color: #fff; cursor: pointer; font: inherit;
}
body.ereg-pk .pk-hero__play-ring {
  width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pk-ember); color: #fff; font-size: 2.6rem;
  box-shadow: 0 0 0 0 rgba(228,129,47,.55), 0 14px 36px rgba(0,0,0,.35);
  animation: pk-play-breathe 2.4s ease-out infinite;
  transition: transform .25s ease;
}
body.ereg-pk .pk-hero__play-ring .bi { margin-left: 6px; }
body.ereg-pk .pk-hero__play:hover .pk-hero__play-ring,
body.ereg-pk .pk-hero__play:focus-visible .pk-hero__play-ring { transform: scale(1.08); }
body.ereg-pk .pk-hero__play:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
body.ereg-pk .pk-hero__play-label {
  font-weight: 600; font-size: .98rem; letter-spacing: .02em;
  background: rgba(0,17,32,.55); padding: 7px 14px; border-radius: 999px;
}
@keyframes pk-play-breathe {
  0%   { box-shadow: 0 0 0 0 rgba(228,129,47,.55), 0 14px 36px rgba(0,0,0,.35); }
  70%  { box-shadow: 0 0 0 26px rgba(228,129,47,0), 0 14px 36px rgba(0,0,0,.35); }
  100% { box-shadow: 0 0 0 0 rgba(228,129,47,0), 0 14px 36px rgba(0,0,0,.35); }
}
/* Narrower screens: the text takes the width, the film stays as the background under an even gradient, and the
   play button becomes a small ring in the top right corner, under the site's bar, without its label. */
@media (max-width: 1020px) {
  body.ereg-pk .pk-hero--film::before {
    background: linear-gradient(180deg, rgba(0,17,32,.86) 0%, rgba(0,17,32,.93) 100%);
  }
  body.ereg-pk .pk-hero__play { top: calc(var(--vh-h, 57px) + 16px); right: 16px; transform: none; }
  body.ereg-pk .pk-hero__play-ring { width: 56px; height: 56px; font-size: 1.6rem; }
  body.ereg-pk .pk-hero__play-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.ereg-pk .pk-hero__film { display: none; }
  body.ereg-pk .pk-hero__play-ring { animation: none; }
}

/* ---- The film, full screen (the play button on the hero) ---- */
body.ereg-pk .pk-film {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: rgba(0,10,22,.92); opacity: 0; transition: opacity .3s ease;
}
body.ereg-pk .pk-film.is-open { opacity: 1; }
body.ereg-pk .pk-film__frame {
  width: min(92vw, calc(88vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: scale(.96); transition: transform .3s ease;
}
body.ereg-pk .pk-film.is-open .pk-film__frame { transform: none; }
body.ereg-pk .pk-film__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
body.ereg-pk .pk-film__close {
  position: absolute; top: 18px; right: 22px; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff;
  font-size: 1.4rem; cursor: pointer;
}
body.ereg-pk .pk-film__close:hover { background: rgba(255,255,255,.18); }