/* =========================================================
   EMARK - UAE E-INVOICING PAGE
   /assets/css/e-invoicing.css
   ========================================================= */


/* =========================================================
   PAGE TOKENS
   ========================================================= */

:root {
  --einv-blue: #083E7F;
  --einv-blue-dark: #04284F;
  --einv-blue-deep: #052F61;

  --einv-green: #00A86B;
  --einv-green-light: #8FE8C6;
  --einv-green-soft: #E8F8F2;

  --einv-text: #172238;
  --einv-text-soft: #5F6B7A;

  --einv-border: #E3EAF1;
  --einv-soft: #F7F9FC;
  --einv-white: #FFFFFF;

  --einv-radius-sm: 10px;
  --einv-radius: 16px;
  --einv-radius-lg: 24px;

  --einv-container: 1180px;
}


.emark-einv-hero,
.emark-einv-context,
.emark-einv-section,
.emark-einv-support,
.emark-einv-timeline,
.emark-einv-journey,
.emark-einv-faq,
.emark-einv-cta {
  box-sizing: border-box;
}


.emark-einv-hero *,
.emark-einv-context *,
.emark-einv-section *,
.emark-einv-support *,
.emark-einv-timeline *,
.emark-einv-journey *,
.emark-einv-faq *,
.emark-einv-cta * {
  box-sizing: border-box;
}



/* =========================================================
   HERO
   ========================================================= */

.emark-einv-hero {
  position: relative;

  overflow: hidden;

  padding:
    100px
    24px
    96px;

  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F8FAFD 100%
    );
}


.emark-einv-hero__container {
  position: relative;

  z-index: 2;

  width: min(
    100%,
    var(--einv-container)
  );

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(370px, 0.75fr);

  align-items: center;

  gap: 80px;
}


/* ---------------------------------------------------------
   HERO BACKGROUND
   --------------------------------------------------------- */

.emark-einv-hero__backdrop {
  position: absolute;
  inset: 0;

  pointer-events: none;
}


.emark-einv-hero__grid {
  position: absolute;

  width: 520px;
  height: 520px;

  right: -80px;
  top: -120px;

  opacity: 0.42;

  background-image:
    linear-gradient(
      rgba(8, 62, 127, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(8, 62, 127, 0.035) 1px,
      transparent 1px
    );

  background-size:
    34px
    34px;

  transform:
    perspective(800px)
    rotateX(58deg)
    rotateZ(-17deg);

  transform-origin: center;
}


.emark-einv-hero__glow {
  position: absolute;

  width: 500px;
  height: 500px;

  right: -150px;
  top: -170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 168, 107, 0.11),
      rgba(8, 62, 127, 0.04) 42%,
      transparent 70%
    );

  filter: blur(4px);
}



/* =========================================================
   HERO CONTENT
   ========================================================= */

.emark-einv-hero__breadcrumb {
  display: flex;
  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 27px;

  color: #7A8593;

  font-size: 0.74rem;
  font-weight: 650;
}


.emark-einv-hero__breadcrumb a {
  color: var(--einv-blue);

  text-decoration: none;

  transition:
    color 170ms ease;
}


.emark-einv-hero__breadcrumb a:hover {
  color: var(--einv-green);
}


.emark-einv-hero__eyebrow,
.emark-einv-section__eyebrow {
  margin:
    0
    0
    15px;

  color: var(--einv-green);

  font-size: 0.72rem;
  font-weight: 850;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.emark-einv-hero h1 {
  max-width: 680px;

  margin: 0;

  color: var(--einv-text);

  font-size:
    clamp(
      2.7rem,
      5vw,
      4.65rem
    );

  line-height: 0.99;

  letter-spacing: -0.045em;

  font-weight: 820;
}


.emark-einv-hero__lead {
  max-width: 670px;

  margin:
    27px
    0
    0;

  color: var(--einv-text-soft);

  font-size: 1.04rem;

  line-height: 1.75;
}



/* =========================================================
   HERO BUTTONS
   ========================================================= */

.emark-einv-hero__actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 13px;

  margin-top: 33px;
}


.emark-einv-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding:
    0
    20px;

  border-radius: 10px;

  text-decoration: none;

  font-size: 0.82rem;

  font-weight: 780;

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.emark-einv-btn--primary {
  color: #FFFFFF;

  background:
    var(--einv-blue);

  border:
    1px solid
    var(--einv-blue);

  box-shadow:
    0 12px 28px
    rgba(8, 62, 127, 0.13);
}


.emark-einv-btn--primary span {
  transition:
    transform
    180ms ease;
}


.emark-einv-btn--secondary {
  color: var(--einv-blue);

  background: #FFFFFF;

  border:
    1px solid
    rgba(8, 62, 127, 0.15);
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-btn--primary:hover {
    transform:
      translateY(-2px);

    background:
      #06366E;

    box-shadow:
      0 15px 32px
      rgba(8, 62, 127, 0.17);
  }


  .emark-einv-btn--primary:hover span {
    transform:
      translateX(3px);
  }


  .emark-einv-btn--secondary:hover {
    transform:
      translateY(-2px);

    border-color:
      rgba(8, 62, 127, 0.25);

    background:
      #F8FAFD;
  }

}



/* =========================================================
   HERO DIGITAL VISUAL
   ========================================================= */

.emark-einv-hero__visual {
  position: relative;

  width: 100%;
  max-width: 440px;

  justify-self: end;

  perspective: 1100px;
}


.emark-einv-visual__stage {
  position: relative;

  width: 100%;
  height: 390px;

  transform-style: preserve-3d;
}


/* ---------------------------------------------------------
   INVOICE CARD
   --------------------------------------------------------- */

.emark-einv-visual__invoice {
  position: absolute;

  z-index: 4;

  width: 245px;
  min-height: 275px;

  left: 70px;
  top: 40px;

  padding: 24px;

  color: #FFFFFF;

  border-radius: 20px;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(0, 168, 107, 0.28),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #052F61 0%,
      #083E7F 100%
    );

  box-shadow:
    0 28px 70px
    rgba(8, 62, 127, 0.24);

  transform:
    rotateY(-8deg)
    rotateX(4deg)
    rotateZ(-2deg);

  transform-style: preserve-3d;

  animation:
    emark-einv-invoice-float
    9s ease-in-out infinite;
}


.emark-einv-visual__invoice-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding-bottom: 18px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.13);
}


.emark-einv-visual__invoice-head span {
  font-size: 0.75rem;

  font-weight: 850;

  letter-spacing: 0.12em;
}


.emark-einv-visual__invoice-head small {
  display: grid;

  place-items: center;

  width: 42px;
  height: 30px;

  color: #FFFFFF;

  background:
    rgba(0, 168, 107, 0.20);

  border:
    1px solid
    rgba(143, 232, 198, 0.18);

  border-radius: 8px;

  font-size: 0.59rem;

  font-weight: 850;
}


.emark-einv-visual__invoice-lines {
  display: grid;

  gap: 15px;

  margin-top: 30px;
}


.emark-einv-visual__invoice-lines span {
  display: block;

  height: 8px;

  background:
    rgba(255, 255, 255, 0.13);

  border-radius: 999px;
}


.emark-einv-visual__invoice-lines span:nth-child(1) {
  width: 82%;
}


.emark-einv-visual__invoice-lines span:nth-child(2) {
  width: 100%;
}


.emark-einv-visual__invoice-lines span:nth-child(3) {
  width: 61%;
}


.emark-einv-visual__invoice-total {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 20px;

  margin-top: 37px;

  padding-top: 19px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.12);
}


.emark-einv-visual__invoice-total > span {
  display: block;

  width: 76px;
  height: 10px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.22);
}


.emark-einv-visual__invoice-total strong {
  display: grid;

  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 50%;

  color: #053F2D;

  background:
    var(--einv-green-light);

  font-size: 0.88rem;

  box-shadow:
    0 7px 20px
    rgba(0, 0, 0, 0.12);
}



/* =========================================================
   HERO NODES
   ========================================================= */

.emark-einv-visual__node {
  position: absolute;

  z-index: 6;

  min-width: 148px;

  padding:
    14px
    16px;

  border-radius: 13px;

  background:
    rgba(255, 255, 255, 0.97);

  border:
    1px solid
    rgba(8, 62, 127, 0.08);

  box-shadow:
    0 15px 38px
    rgba(18, 43, 73, 0.11);
}


.emark-einv-visual__node small {
  display: block;

  margin-bottom: 4px;

  color:
    var(--einv-green);

  font-size: 0.54rem;

  font-weight: 850;

  letter-spacing: 0.10em;
}


.emark-einv-visual__node strong {
  display: block;

  color:
    var(--einv-text);

  font-size: 0.72rem;

  line-height: 1.25;
}


.emark-einv-visual__node--business {
  left: 0;
  top: 7px;

  transform:
    rotateZ(-2deg);
}


.emark-einv-visual__node--provider {
  right: 0;
  top: 155px;

  transform:
    rotateZ(2deg);
}


.emark-einv-visual__node--authority {
  left: 6px;
  bottom: 17px;

  min-width: 120px;

  transform:
    rotateZ(-1deg);
}



/* =========================================================
   HERO CONNECTORS
   ========================================================= */

.emark-einv-visual__connector {
  position: absolute;

  z-index: 2;

  display: block;

  height: 1px;

  opacity: 0.60;

  background:
    linear-gradient(
      90deg,
      rgba(0, 168, 107, 0.1),
      rgba(0, 168, 107, 0.75),
      rgba(0, 168, 107, 0.1)
    );

  transform-origin: left center;
}


.emark-einv-visual__connector::after {
  content: "";

  position: absolute;

  right: -2px;
  top: 50%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--einv-green);

  transform:
    translateY(-50%);

  box-shadow:
    0 0 0 5px
    rgba(0, 168, 107, 0.08);
}


.emark-einv-visual__connector--one {
  width: 150px;

  left: 98px;
  top: 93px;

  transform:
    rotate(16deg);
}


.emark-einv-visual__connector--two {
  width: 155px;

  left: 100px;
  bottom: 88px;

  transform:
    rotate(-15deg);
}



/* =========================================================
   HERO STATUS
   ========================================================= */

.emark-einv-visual__status {
  width: fit-content;

  display: flex;

  align-items: center;

  gap: 11px;

  margin:
    6px
    0
    0
    auto;

  padding:
    11px
    14px;

  border:
    1px solid
    rgba(8, 62, 127, 0.08);

  border-radius: 12px;

  background:
    #FFFFFF;

  box-shadow:
    0 12px 30px
    rgba(18, 43, 73, 0.065);
}


.emark-einv-visual__status > span {
  display: block;

  width: 8px;
  height: 8px;

  flex: 0 0 auto;

  border-radius: 50%;

  background:
    var(--einv-green);

  box-shadow:
    0 0 0 5px
    rgba(0, 168, 107, 0.08);
}


.emark-einv-visual__status strong {
  display: block;

  color:
    var(--einv-text);

  font-size: 0.68rem;

  line-height: 1.25;
}


.emark-einv-visual__status small {
  display: block;

  margin-top: 2px;

  color: #7A8593;

  font-size: 0.55rem;
}



/* =========================================================
   HERO FLOATING MOTION
   ========================================================= */

@keyframes emark-einv-invoice-float {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -6px;
  }

}



/* =========================================================
   QUICK CONTEXT
   ========================================================= */

.emark-einv-context {
  padding:
    0
    24px
    92px;

  background:
    #F8FAFD;
}


.emark-einv-context__container {
  width:
    min(
      100%,
      var(--einv-container)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}


.emark-einv-context article {
  display: grid;

  grid-template-columns:
    auto
    1fr;

  gap: 17px;

  min-height: 190px;

  padding: 26px;

  border:
    1px solid
    var(--einv-border);

  border-radius:
    var(--einv-radius);

  background: #FFFFFF;

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.emark-einv-context article > span {
  display: grid;

  place-items: center;

  width: 39px;
  height: 39px;

  color:
    var(--einv-blue);

  background:
    rgba(8, 62, 127, 0.055);

  border:
    1px solid
    rgba(8, 62, 127, 0.07);

  border-radius: 9px;

  font-size: 0.65rem;

  font-weight: 850;
}


.emark-einv-context article small {
  display: block;

  margin-bottom: 7px;

  color:
    var(--einv-green);

  font-size: 0.57rem;

  font-weight: 850;

  letter-spacing: 0.1em;
}


.emark-einv-context article h2 {
  margin: 0;

  color:
    var(--einv-text);

  font-size: 1rem;

  line-height: 1.35;

  font-weight: 780;
}


.emark-einv-context article p {
  margin:
    11px
    0
    0;

  color:
    var(--einv-text-soft);

  font-size: 0.82rem;

  line-height: 1.65;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-context article:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(8, 62, 127, 0.12);

    box-shadow:
      0 14px 30px
      rgba(18, 43, 73, 0.055);
  }

}



/* =========================================================
   GENERIC INFORMATION SECTION
   ========================================================= */

.emark-einv-section {
  padding:
    105px
    24px;

  background: #FFFFFF;
}


.emark-einv-section__container {
  width:
    min(
      100%,
      var(--einv-container)
    );

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 0.78fr)
    minmax(0, 1.05fr);

  gap: 100px;
}


.emark-einv-section__heading h2,
.emark-einv-support__intro h2,
.emark-einv-timeline__intro h2,
.emark-einv-journey__heading h2,
.emark-einv-faq__heading h2 {
  margin: 0;

  color:
    var(--einv-text);

  font-size:
    clamp(
      2rem,
      3.4vw,
      3.25rem
    );

  line-height: 1.05;

  letter-spacing: -0.035em;

  font-weight: 810;
}


.emark-einv-section__body {
  align-self: end;
}


.emark-einv-section__body p {
  margin: 0;

  color:
    var(--einv-text-soft);

  font-size: 0.98rem;

  line-height: 1.78;
}


.emark-einv-section__body p + p {
  margin-top: 22px;
}



/* =========================================================
   HOW EMARK CAN SUPPORT
   DARK BLUE SECTION
   ========================================================= */

.emark-einv-support {
  position: relative;

  overflow: hidden;

  padding:
    110px
    24px;

  color: #FFFFFF;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(0, 168, 107, 0.20),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #04284F 0%,
      #083E7F 70%,
      #064C68 100%
    );
}


.emark-einv-support::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -120px;
  bottom: -220px;

  border:
    1px solid
    rgba(255, 255, 255, 0.055);

  border-radius: 50%;

  box-shadow:
    0 0 0 70px
    rgba(255, 255, 255, 0.018),
    0 0 0 140px
    rgba(255, 255, 255, 0.012);

  pointer-events: none;
}


.emark-einv-support__container {
  position: relative;

  z-index: 2;

  width:
    min(
      100%,
      var(--einv-container)
    );

  margin: 0 auto;
}


.emark-einv-support__intro {
  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 0.8fr);

  gap: 90px;

  align-items: end;

  margin-bottom: 55px;
}


.emark-einv-support
.emark-einv-section__eyebrow {
  color:
    var(--einv-green-light);
}


.emark-einv-support__intro h2 {
  color: #FFFFFF;
}


.emark-einv-support__intro > p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.96rem;

  line-height: 1.75;
}


.emark-einv-support__grid {
  display: grid;

  grid-template-columns:
    repeat(6, 1fr);

  gap: 15px;
}


.emark-einv-support__grid article {
  grid-column:
    span 2;

  min-height: 215px;

  padding: 25px;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    var(--einv-radius);

  background:
    rgba(255, 255, 255, 0.055);

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}


/* Last two cards centred */

.emark-einv-support__grid article:nth-child(4) {
  grid-column:
    2 / span 2;
}


.emark-einv-support__grid article:nth-child(5) {
  grid-column:
    4 / span 2;
}


.emark-einv-support__grid article > span {
  display: grid;

  place-items: center;

  width: 37px;
  height: 37px;

  margin-bottom: 27px;

  color:
    var(--einv-green-light);

  background:
    rgba(0, 168, 107, 0.11);

  border:
    1px solid
    rgba(143, 232, 198, 0.14);

  border-radius: 9px;

  font-size: 0.63rem;

  font-weight: 850;
}


.emark-einv-support__grid h3 {
  margin: 0;

  color: #FFFFFF;

  font-size: 1rem;

  font-weight: 780;
}


.emark-einv-support__grid p {
  margin:
    12px
    0
    0;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 0.82rem;

  line-height: 1.65;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-support__grid article:hover {
    transform:
      translateY(-3px);

    background:
      rgba(255, 255, 255, 0.08);

    border-color:
      rgba(143, 232, 198, 0.18);
  }

}



/* =========================================================
   TIMELINE
   ========================================================= */

.emark-einv-timeline {
  padding:
    110px
    24px;

  background:
    #FFFFFF;

  scroll-margin-top:
    130px;
}


.emark-einv-timeline__container {
  width:
    min(
      100%,
      var(--einv-container)
    );

  margin: 0 auto;
}


.emark-einv-timeline__intro {
  max-width: 780px;

  margin-bottom: 50px;
}


.emark-einv-timeline__intro > p:last-child {
  max-width: 690px;

  margin:
    21px
    0
    0;

  color:
    var(--einv-text-soft);

  font-size: 0.95rem;

  line-height: 1.75;
}


.emark-einv-timeline__grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 15px;

  position: relative;
}


.emark-einv-timeline__grid::before {
  content: "";

  position: absolute;

  left: 4%;
  right: 4%;

  top: 45px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(8, 62, 127, 0.07),
      rgba(0, 168, 107, 0.24),
      rgba(8, 62, 127, 0.07)
    );

  z-index: 0;
}


.emark-einv-timeline__grid article {
  position: relative;

  z-index: 1;

  min-height: 280px;

  padding:
    24px;

  border:
    1px solid
    var(--einv-border);

  border-radius:
    var(--einv-radius);

  background:
    #FFFFFF;

  box-shadow:
    0 8px 24px
    rgba(18, 43, 73, 0.025);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}


.emark-einv-timeline__head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 33px;
}


.emark-einv-timeline__head > span {
  display: grid;

  place-items: center;

  width: 39px;
  height: 39px;

  flex: 0 0 auto;

  color:
    var(--einv-blue);

  background:
    #F4F7FA;

  border:
    1px solid
    rgba(8, 62, 127, 0.08);

  border-radius: 10px;

  font-size: 0.64rem;

  font-weight: 850;
}


.emark-einv-timeline__head small {
  color:
    var(--einv-green);

  font-size: 0.53rem;

  font-weight: 850;

  letter-spacing: 0.08em;

  text-align: right;
}


.emark-einv-timeline__grid article > strong {
  display: block;

  color:
    var(--einv-text);

  font-size: 1.35rem;

  line-height: 1.15;

  letter-spacing: -0.025em;
}


.emark-einv-timeline__grid article > p {
  margin:
    17px
    0
    0;

  color:
    var(--einv-text-soft);

  font-size: 0.81rem;

  line-height: 1.67;
}



/* Priority card */

.emark-einv-timeline__grid
.emark-einv-timeline__card--priority {
  border-color:
    rgba(0, 168, 107, 0.18);

  background:
    linear-gradient(
      180deg,
      #F1FBF7 0%,
      #FFFFFF 100%
    );

  box-shadow:
    0 16px 34px
    rgba(0, 168, 107, 0.075);
}


.emark-einv-timeline__card--priority
.emark-einv-timeline__head > span {
  color:
    #057C52;

  background:
    rgba(0, 168, 107, 0.08);

  border-color:
    rgba(0, 168, 107, 0.12);
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-timeline__grid article:hover {
    transform:
      translateY(-3px);

    border-color:
      rgba(8, 62, 127, 0.12);

    box-shadow:
      0 15px 30px
      rgba(18, 43, 73, 0.055);
  }

}


.emark-einv-timeline__note {
  max-width: 800px;

  margin:
    26px
    0
    0;

  color:
    #7A8593;

  font-size: 0.72rem;

  line-height: 1.6;
}



/* =========================================================
   PREPARATION JOURNEY
   ========================================================= */

.emark-einv-journey {
  padding:
    110px
    24px;

  background:
    var(--einv-soft);
}


.emark-einv-journey__container {
  width:
    min(
      100%,
      var(--einv-container)
    );

  margin:
    0 auto;
}


.emark-einv-journey__heading {
  max-width: 720px;

  margin-bottom: 52px;
}


.emark-einv-journey__track {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 16px;
}


.emark-einv-journey__track::before {
  content: "";

  position: absolute;

  top: 29px;
  left: 7%;
  right: 7%;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--einv-blue),
      var(--einv-green)
    );

  opacity: 0.13;
}


.emark-einv-journey__track article {
  position: relative;

  z-index: 1;

  min-height: 205px;

  padding:
    24px;

  border:
    1px solid
    var(--einv-border);

  border-radius:
    var(--einv-radius);

  background:
    #FFFFFF;
}


.emark-einv-journey__track article > span {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 30px;

  color: #FFFFFF;

  background:
    var(--einv-blue);

  border:
    5px solid
    var(--einv-soft);

  outline:
    1px solid
    rgba(8, 62, 127, 0.08);

  border-radius: 50%;

  font-size: 0.62rem;

  font-weight: 850;
}


.emark-einv-journey__track article:last-child > span {
  background:
    var(--einv-green);
}


.emark-einv-journey__track h3 {
  margin: 0;

  color:
    var(--einv-text);

  font-size: 1rem;

  font-weight: 780;
}


.emark-einv-journey__track p {
  margin:
    11px
    0
    0;

  color:
    var(--einv-text-soft);

  font-size: 0.81rem;

  line-height: 1.65;
}



/* =========================================================
   FAQ
   ========================================================= */

.emark-einv-faq {
  padding:
    110px
    24px;

  background: #FFFFFF;
}


.emark-einv-faq__container {
  width:
    min(
      100%,
      980px
    );

  margin: 0 auto;
}


.emark-einv-faq__heading {
  max-width: 760px;

  margin-bottom: 47px;
}


.emark-einv-faq__list {
  border-top:
    1px solid
    var(--einv-border);
}


.emark-einv-faq details {
  border-bottom:
    1px solid
    var(--einv-border);
}


.emark-einv-faq summary {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    24px
    4px;

  color:
    var(--einv-text);

  cursor: pointer;

  list-style: none;

  font-size: 0.96rem;

  line-height: 1.4;

  font-weight: 750;
}


.emark-einv-faq summary::-webkit-details-marker {
  display: none;
}


.emark-einv-faq summary > span {
  position: relative;

  width: 28px;
  height: 28px;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(8, 62, 127, 0.12);

  border-radius: 50%;

  transition:
    background 180ms ease,
    border-color 180ms ease;
}


.emark-einv-faq summary > span::before,
.emark-einv-faq summary > span::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 1.5px;

  background:
    var(--einv-blue);

  transform:
    translate(-50%, -50%);

  transition:
    transform 180ms ease;
}


.emark-einv-faq summary > span::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


.emark-einv-faq details[open]
summary > span {
  background:
    var(--einv-green-soft);

  border-color:
    rgba(0, 168, 107, 0.18);
}


.emark-einv-faq details[open]
summary > span::after {
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


.emark-einv-faq details > div {
  padding:
    0
    52px
    24px
    4px;
}


.emark-einv-faq details p {
  max-width: 790px;

  margin: 0;

  color:
    var(--einv-text-soft);

  font-size: 0.88rem;

  line-height: 1.72;
}



/* =========================================================
   FINAL CTA
   ========================================================= */

.emark-einv-cta {
  padding:
    0
    24px
    110px;

  background:
    #FFFFFF;
}


.emark-einv-cta__container {
  width:
    min(
      100%,
      var(--einv-container)
    );

  margin: 0 auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 40px;

  padding:
    48px
    52px;

  overflow: hidden;

  position: relative;

  border-radius:
    22px;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(0, 168, 107, 0.19),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #04284F 0%,
      #083E7F 100%
    );
}


.emark-einv-cta__container::after {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  right: -90px;
  bottom: -150px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 50%;

  box-shadow:
    0 0 0 42px
    rgba(255, 255, 255, 0.025),
    0 0 0 84px
    rgba(255, 255, 255, 0.018);

  pointer-events: none;
}


.emark-einv-cta__container > div,
.emark-einv-cta__container > a {
  position: relative;

  z-index: 2;
}


.emark-einv-cta__container p {
  margin:
    0
    0
    9px;

  color:
    var(--einv-green-light);

  font-size: 0.67rem;

  font-weight: 850;

  letter-spacing: 0.10em;

  text-transform: uppercase;
}


.emark-einv-cta__container h2 {
  max-width: 680px;

  margin: 0;

  color: #FFFFFF;

  font-size:
    clamp(
      1.75rem,
      3vw,
      2.7rem
    );

  line-height: 1.08;

  letter-spacing: -0.03em;

  font-weight: 790;
}


.emark-einv-cta__container > a {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex: 0 0 auto;

  min-height: 48px;

  padding:
    0
    20px;

  color:
    #053F2D;

  background:
    var(--einv-green-light);

  border-radius: 10px;

  text-decoration: none;

  font-size: 0.8rem;

  font-weight: 820;

  transition:
    transform 180ms ease,
    background 180ms ease;
}


.emark-einv-cta__container > a span {
  transition:
    transform 180ms ease;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-cta__container > a:hover {
    transform:
      translateY(-2px);

    background:
      #A4EDD1;
  }


  .emark-einv-cta__container > a:hover span {
    transform:
      translateX(3px);
  }

}



/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .emark-einv-hero__container {
    grid-template-columns:
      minmax(0, 1fr)
      330px;

    gap: 45px;
  }


  .emark-einv-hero__visual {
    max-width: 330px;
  }


  .emark-einv-visual__stage {
    height: 340px;
  }


  .emark-einv-visual__invoice {
    width: 215px;

    min-height: 245px;

    left: 50px;
  }


  .emark-einv-visual__node {
    min-width: 125px;

    padding:
      12px
      13px;
  }


  .emark-einv-visual__connector--one {
    width: 120px;
  }


  .emark-einv-visual__connector--two {
    width: 120px;
  }


  .emark-einv-support__grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .emark-einv-support__grid article,
  .emark-einv-support__grid article:nth-child(4),
  .emark-einv-support__grid article:nth-child(5) {
    grid-column:
      auto;
  }


  .emark-einv-support__grid article:last-child {
    grid-column:
      1 / -1;
  }


  .emark-einv-timeline__grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .emark-einv-timeline__grid::before {
    display: none;
  }

}



/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 820px) {

  .emark-einv-hero {
    padding:
      78px
      22px
      76px;
  }


  .emark-einv-hero__container {
    grid-template-columns:
      1fr;

    gap: 54px;
  }


  .emark-einv-hero__visual {
    justify-self: start;

    width: min(
      100%,
      430px
    );

    max-width: none;
  }


  .emark-einv-visual__stage {
    height: 370px;
  }


  .emark-einv-visual__invoice {
    width: 235px;

    min-height: 260px;

    left: 70px;
  }


  .emark-einv-context {
    padding-bottom:
      80px;
  }


  .emark-einv-context__container {
    grid-template-columns:
      1fr;
  }


  .emark-einv-context article {
    min-height: 0;
  }


  .emark-einv-section {
    padding:
      85px
      22px;
  }


  .emark-einv-section__container {
    grid-template-columns:
      1fr;

    gap: 32px;
  }


  .emark-einv-support {
    padding:
      85px
      22px;
  }


  .emark-einv-support__intro {
    grid-template-columns:
      1fr;

    gap: 26px;

    margin-bottom: 42px;
  }


  .emark-einv-timeline,
  .emark-einv-journey,
  .emark-einv-faq {
    padding:
      85px
      22px;
  }


  .emark-einv-journey__track {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .emark-einv-journey__track::before {
    display: none;
  }


  .emark-einv-cta {
    padding:
      0
      22px
      85px;
  }


  .emark-einv-cta__container {
    flex-direction: column;

    align-items: flex-start;

    padding:
      40px;
  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .emark-einv-hero {
    padding:
      62px
      18px
      66px;
  }


  .emark-einv-hero h1 {
    font-size:
      clamp(
        2.35rem,
        11vw,
        3.25rem
      );

    line-height: 1.01;
  }


  .emark-einv-hero__lead {
    font-size: 0.94rem;
  }


  .emark-einv-hero__actions {
    align-items: stretch;

    flex-direction: column;
  }


  .emark-einv-btn {
    width: 100%;
  }


  .emark-einv-hero__visual {
    transform:
      scale(0.90);

    transform-origin:
      left top;

    margin-bottom:
      -35px;
  }


  .emark-einv-visual__stage {
    width: 360px;

    max-width: 100%;

    height: 350px;
  }


  .emark-einv-visual__invoice {
    width: 210px;

    min-height: 235px;

    left: 48px;

    padding: 20px;
  }


  .emark-einv-visual__node--business {
    left: 0;
  }


  .emark-einv-visual__node--provider {
    right: 0;
  }


  .emark-einv-visual__node--authority {
    left: 0;
  }


  .emark-einv-visual__status {
    margin-left: 0;
  }


  .emark-einv-context {
    padding:
      0
      18px
      68px;
  }


  .emark-einv-context article {
    padding: 21px;
  }


  .emark-einv-section,
  .emark-einv-support,
  .emark-einv-timeline,
  .emark-einv-journey,
  .emark-einv-faq {
    padding:
      72px
      18px;
  }


  .emark-einv-section__heading h2,
  .emark-einv-support__intro h2,
  .emark-einv-timeline__intro h2,
  .emark-einv-journey__heading h2,
  .emark-einv-faq__heading h2 {
    font-size:
      clamp(
        1.85rem,
        8vw,
        2.45rem
      );
  }


  .emark-einv-support__grid {
    grid-template-columns:
      1fr;
  }


  .emark-einv-support__grid article,
  .emark-einv-support__grid article:last-child {
    grid-column:
      auto;
  }


  .emark-einv-support__grid article {
    min-height: 0;
  }


  .emark-einv-timeline__grid {
    grid-template-columns:
      1fr;
  }


  .emark-einv-timeline__grid article {
    min-height: 0;
  }


  .emark-einv-journey__track {
    grid-template-columns:
      1fr;
  }


  .emark-einv-journey__track article {
    min-height: 0;
  }


  .emark-einv-faq summary {
    padding:
      20px
      0;

    font-size: 0.9rem;
  }


  .emark-einv-faq details > div {
    padding:
      0
      42px
      21px
      0;
  }


  .emark-einv-cta {
    padding:
      0
      18px
      72px;
  }


  .emark-einv-cta__container {
    padding:
      32px
      24px;

    border-radius: 18px;
  }


  .emark-einv-cta__container > a {
    width: 100%;

    justify-content: center;
  }

}



/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .emark-einv-hero__visual {
    transform:
      scale(0.82);

    margin-bottom:
      -65px;
  }


  .emark-einv-visual__stage {
    width: 350px;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .emark-einv-visual__invoice {
    animation: none;
  }


  .emark-einv-btn,
  .emark-einv-context article,
  .emark-einv-support__grid article,
  .emark-einv-timeline__grid article,
  .emark-einv-cta__container > a,
  .emark-einv-faq summary > span,
  .emark-einv-faq summary > span::after {
    transition: none;
  }

}

/* =========================================================
   HERO - SERVICE PROVIDER NODE POSITION FIX
   ========================================================= */

.emark-einv-visual__node--provider {
  right: -28px;
  top: 155px;

  min-width: 165px;

  z-index: 10;

  transform: rotateZ(2deg);
}

/* =========================================================
   QUICK CONTEXT - REFINED HOVER ACCENT
   ========================================================= */

.emark-einv-context article {
  position: relative;
  overflow: hidden;
}


.emark-einv-context article::before {
  content: "";

  position: absolute;

  left: 24px;
  right: 24px;
  top: 0;

  height: 3px;

  background: #00A86B;

  border-radius:
    0
    0
    999px
    999px;

  transform: scaleX(0);

  transform-origin: left center;

  transition:
    transform 220ms ease;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-context article:hover::before {
    transform: scaleX(1);
  }

}

/* =========================================================
   MOBILE HERO - SERVICE PROVIDER NODE FIX
   ========================================================= */

@media (max-width: 600px) {
    
     .emark-einv-visual__invoice 
     {
        width: 200px;
        left: 42px;
     }


  .emark-einv-visual__node--provider {
    right: -2px;
    top: 145px;

    width: 155px;
    min-width: 155px;

    z-index: 30;

    transform:
      translateZ(100px)
      rotateZ(1deg);
  }


  .emark-einv-visual__node--provider small,
  .emark-einv-visual__node--provider strong {
    position: relative;
    z-index: 2;
  }

}

/* =========================================================
   WHAT E-INVOICING MEANS - KEY POINTS
   ========================================================= */

.emark-einv-meaning-points {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 30px;
}


.emark-einv-meaning-points span {
  display: flex;
  flex-direction: column;

  gap: 3px;

  padding:
    14px
    16px;

  color: #667282;

  background: #F8FAFC;

  border:
    1px solid #E5EBF2;

  border-radius: 10px;

  font-size: 0.72rem;

  line-height: 1.4;
}


.emark-einv-meaning-points strong {
  color: #083E7F;

  font-size: 0.76rem;

  font-weight: 800;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-meaning-points span {
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      background 180ms ease;
  }


  .emark-einv-meaning-points span:hover {
    transform: translateY(-2px);

    background: #FFFFFF;

    border-color:
      rgba(0, 168, 107, 0.20);
  }

}


@media (max-width: 600px) {

  .emark-einv-meaning-points {
    grid-template-columns: 1fr;
  }

}

/* =========================================================
   E-INVOICING SUPPORT - FINAL STEP EMPHASIS
   ========================================================= */

.emark-einv-support__grid
.emark-einv-support__final {
  background:
    linear-gradient(
      145deg,
      rgba(0, 168, 107, 0.13),
      rgba(255, 255, 255, 0.055)
    );

  border-color:
    rgba(143, 232, 198, 0.20);
}


.emark-einv-support__final > span {
  color: #053F2D;

  background: #8FE8C6;

  border-color:
    rgba(143, 232, 198, 0.35);
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-support__grid
  .emark-einv-support__final:hover {
    background:
      linear-gradient(
        145deg,
        rgba(0, 168, 107, 0.18),
        rgba(255, 255, 255, 0.075)
      );

    border-color:
      rgba(143, 232, 198, 0.30);
  }

}
/* =========================================================
   E-INVOICING TIMELINE - STATUS & IMPLEMENTATION
   ========================================================= */

.emark-einv-timeline__status {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 13px;

  padding:
    5px
    8px;

  color: #647184;

  background: #F3F6F9;

  border:
    1px solid #E5EBF2;

  border-radius: 999px;

  font-size: 0.49rem;
  font-weight: 850;

  letter-spacing: 0.08em;
}


/* Current upcoming deadline */

.emark-einv-timeline__status--next {
  color: #057A51;

  background:
    rgba(0, 168, 107, 0.08);

  border-color:
    rgba(0, 168, 107, 0.15);
}


/* Implementation date inside each card */

.emark-einv-timeline__implementation {
  margin-top: 20px;

  padding-top: 16px;

  border-top:
    1px solid #E7ECF2;
}


.emark-einv-timeline__implementation small {
  display: block;

  margin-bottom: 4px;

  color: #7A8593;

  font-size: 0.57rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.07em;
}


.emark-einv-timeline__implementation b {
  display: block;

  color: #083E7F;

  font-size: 0.86rem;

  font-weight: 800;
}


/* Priority / upcoming deadline */

.emark-einv-timeline__card--priority
.emark-einv-timeline__implementation {
  border-top-color:
    rgba(0, 168, 107, 0.14);
}


.emark-einv-timeline__card--priority
.emark-einv-timeline__implementation b {
  color: #057A51;
}

/* =========================================================
   PREPARATION JOURNEY - REFINED PROGRESSION
   ========================================================= */

.emark-einv-journey__track::before {
  transform: scaleX(0);

  transform-origin: left center;

  transition:
    transform 900ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.emark-einv-journey.is-reveal-active
.emark-einv-journey__track::before {
  transform: scaleX(1);
}


/* Small step label */

.emark-einv-journey__track article > small {
  display: block;

  margin-bottom: 7px;

  color: #00A86B;

  font-size: 0.54rem;

  font-weight: 850;

  letter-spacing: 0.10em;
}


/* Cards */

.emark-einv-journey__track article {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-journey__track article:hover {
    transform: translateY(-3px);

    border-color:
      rgba(8, 62, 127, 0.12);

    box-shadow:
      0 14px 28px
      rgba(18, 43, 73, 0.05);
  }

}


/* =========================================================
   FINAL IMPLEMENTATION STEP
   ========================================================= */

.emark-einv-journey__final {
  background:
    linear-gradient(
      180deg,
      #F1FBF7 0%,
      #FFFFFF 100%
    ) !important;

  border-color:
    rgba(0, 168, 107, 0.17) !important;
}


.emark-einv-journey__final > span {
  background:
    #00A86B !important;
}


.emark-einv-journey__final h3 {
  color: #057A51;
}

/* =========================================================
   E-INVOICING FAQ - GUIDANCE NOTE
   ========================================================= */

.emark-einv-faq__note {
  position: relative;

  max-width: 820px;

  margin:
    28px
    0
    0;

  padding:
    15px
    17px
    15px
    42px;

  color: #687587;

  background: #F8FAFC;

  border:
    1px solid #E5EBF2;

  border-radius: 10px;

  font-size: 0.74rem;

  line-height: 1.65;
}


.emark-einv-faq__note::before {
  content: "i";

  position: absolute;

  left: 16px;
  top: 16px;

  display: grid;
  place-items: center;

  width: 17px;
  height: 17px;

  color: #FFFFFF;

  background: #083E7F;

  border-radius: 50%;

  font-size: 0.58rem;
  font-weight: 800;

  font-style: normal;
}

/* =========================================================
   FINAL CTA - REFINED
   ========================================================= */

.emark-einv-cta__content {
  position: relative;
  z-index: 2;
}


.emark-einv-cta__content > span {
  display: block;

  max-width: 650px;

  margin-top: 14px;

  color:
    rgba(255, 255, 255, 0.70);

  font-size: 0.86rem;

  line-height: 1.7;
}


.emark-einv-cta__actions {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  flex: 0 0 auto;

  gap: 12px;
}


.emark-einv-cta__actions a {
  text-decoration: none;
}


/* Primary */

.emark-einv-cta__primary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding:
    0
    20px;

  color: #053F2D;

  background: #8FE8C6;

  border:
    1px solid #8FE8C6;

  border-radius: 10px;

  font-size: 0.8rem;
  font-weight: 820;

  transition:
    transform 180ms ease,
    background 180ms ease;
}


.emark-einv-cta__primary > span {
  transition:
    transform 180ms ease;
}


/* Secondary */

.emark-einv-cta__secondary {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    0
    18px;

  color:
    rgba(255, 255, 255, 0.88);

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 10px;

  font-size: 0.78rem;
  font-weight: 750;

  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}


@media (hover: hover) and (pointer: fine) {

  .emark-einv-cta__primary:hover {
    transform:
      translateY(-2px);

    background: #A4EDD1;
  }


  .emark-einv-cta__primary:hover > span {
    transform:
      translateX(3px);
  }


  .emark-einv-cta__secondary:hover {
    transform:
      translateY(-2px);

    background:
      rgba(255, 255, 255, 0.085);

    border-color:
      rgba(255, 255, 255, 0.20);
  }

}


/* Mobile */

@media (max-width: 700px) {

  .emark-einv-cta__actions {
    width: 100%;

    flex-direction: column;

    align-items: stretch;
  }


  .emark-einv-cta__actions a {
    width: 100%;
  }

}

.emark-einv-timeline__note a {
  color: #083E7F;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.emark-einv-timeline__note a:hover {
  color: #00A86B;
}