/* =========================================================
   EASYPRINT LANDING — RESPONSIVE PROFESSIONAL UI
   Mobile-first final presentation layer
========================================================= */

:root {
  --landing-max: 1180px;

  --landing-navy: #184e83;
  --landing-blue: #2f9dde;
  --landing-cyan: #16b9d4;

  --landing-text: #2c4c6d;
  --landing-muted: #698096;

  --landing-card: rgba(255, 255, 255, 0.78);
  --landing-border: rgba(210, 231, 243, 0.88);

  --landing-shadow:
    0 16px 42px rgba(24, 78, 131, 0.10);
}


/* =========================================================
   GLOBAL TYPOGRAPHY
========================================================= */

html {
  scroll-padding-top: 84px;
}

body,
button,
input,
textarea,
select {
  font-family: Arial, Helvetica, sans-serif !important;
}

body {
  color: var(--landing-text);
}

.section-title,
.hero-top-text,
.upload-btn,
.nav-link,
.nav-link-button,
.price-card h3,
.price-card h4,
.pricing-service-title,
.pricing-kiosk-heading h3,
.pricing-kiosk-card h4,
.about-card h2,
.about-card strong,
.footer-brand h2,
.footer-brand p,
.footer-links a,
.footer-admin-link,
.footer-bottom p {
  font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   NAVIGATION
========================================================= */

.site-header {
  position: fixed !important;

  top: 10px !important;
  left: 12px !important;
  right: 12px !important;

  width: auto !important;

  padding: 0 !important;

  display: block !important;

  z-index: 1000 !important;

  pointer-events: none;
}

.site-header-inner {
  position: relative;

  width: 100%;
  max-width: var(--landing-max);

  min-height: 56px;

  margin: 0 auto;

  padding: 7px 8px 7px 14px;

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

  border: 1px solid
    rgba(216, 234, 244, 0.92);

  border-radius: 18px;

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

  box-shadow:
    0 10px 30px
    rgba(24, 78, 131, 0.10);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  pointer-events: auto;
}

.nav-brand {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  min-width: 0;

  text-decoration: none;
}

.nav-brand img {
  display: block;

  width: 96px;
  height: auto;

  max-width: 100%;
}

.nav-toggle {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  padding: 0;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  border: 0;
  border-radius: 12px;

  background:
    rgba(231, 246, 253, 0.95);

  color: var(--landing-navy);

  cursor: pointer;
}

.nav-toggle span {
  display: block;

  width: 18px;
  height: 2px;

  border-radius: 99px;

  background:
    currentColor;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}

.nav-menu {
  position: absolute !important;

  top: calc(100% + 8px);
  left: 0;
  right: 0;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding: 8px !important;

  display: none !important;

  flex-direction: column;
  align-items: stretch;

  gap: 3px !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(216, 234, 244, 0.95) !important;

  border-radius: 18px !important;

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

  box-shadow:
    0 18px 45px
    rgba(24, 78, 131, 0.16) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-menu.is-open {
  display: flex !important;
}

.nav-link {
  width: 100%;

  min-height: 43px !important;

  padding: 0 13px !important;

  justify-content: flex-start !important;

  border-radius: 11px !important;

  color:
    var(--landing-navy) !important;

  font-size: 13px !important;
  font-weight: 600 !important;

  text-align: left;

  white-space: normal !important;
}

.nav-link:hover,
.nav-link.active {
  transform: none !important;

  background:
    #edf8fd !important;
}

.nav-link-button {
  border: 0;

  background:
    transparent;

  cursor: pointer;
}


/* Decorative desktop section dots are unnecessary on phones. */

.section-indicator {
  display: none !important;
}


/* =========================================================
   SECTIONS
========================================================= */

.hero-section,
.how-section,
.pricing-section,
.about-section {
  min-height: auto !important;
}


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

.hero-section {
  padding:
    88px
    16px
    48px !important;
}

.hero-container {
  width: 100%;

  display: flex !important;
  flex-direction: column;

  gap: 14px !important;

  text-align: center;
}

.hero-image-wrap {
  order: 1;

  width: 100%;

  min-height: 0 !important;

  margin: 0 !important;
}

.hero-image-wrap::before {
  width:
    min(250px, 68vw) !important;

  height:
    min(250px, 68vw) !important;
}

.hero-image-wrap::after {
  bottom: 8px !important;

  width:
    min(210px, 58vw) !important;

  height: 24px !important;
}

.hero-kiosk {
  width:
    min(245px, 67vw) !important;

  max-width: 245px;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(24, 78, 131, 0.14)
    ) !important;
}

.hero-content {
  order: 2;

  width: 100%;
  max-width: 560px !important;

  margin: 0 auto !important;

  padding: 0;
}

.hero-top-text {
  margin: 4px 0 5px !important;

  color:
    #365b7b !important;

  font-size:
    clamp(18px, 5.5vw, 24px) !important;

  font-weight: 700 !important;

  line-height: 1.2;
}

.hero-logo {
  width:
    min(250px, 72vw) !important;

  margin:
    0 auto 16px !important;

  filter:
    drop-shadow(
      0 8px 12px
      rgba(24, 78, 131, 0.10)
    ) !important;
}

.hero-description {
  max-width: 430px;

  margin:
    0 auto 22px !important;

  color:
    var(--landing-text) !important;

  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

.upload-btn {
  width:
    min(100%, 300px) !important;

  min-width: 0 !important;

  height: 50px !important;

  padding: 0 20px !important;

  border-radius: 13px !important;

  font-size: 14.5px !important;
  font-weight: 700 !important;

  box-shadow:
    0 10px 25px
    rgba(47, 157, 222, 0.23) !important;
}

.hero-note {
  max-width: 330px;

  margin:
    12px auto 0 !important;

  color:
    #72869a !important;

  font-size: 11px !important;
  line-height: 1.55 !important;
}


/* =========================================================
   HOW IT WORKS
========================================================= */

.how-section {
  padding:
    46px
    16px
    56px !important;
}

.how-container {
  max-width: 1000px !important;
}

.how-container .section-title {
  margin:
    0 0 22px !important;

  font-size:
    clamp(27px, 7vw, 36px) !important;

  font-weight: 700 !important;

  line-height: 1.15;
}

.steps-grid {
  grid-template-columns: 1fr !important;

  gap: 10px !important;
}

.step-card {
  position: relative;

  min-height: 0 !important;

  padding:
    16px
    16px
    16px
    66px !important;

  display: block;

  border-radius: 17px !important;

  text-align: left !important;

  background:
    rgba(255, 255, 255, 0.78) !important;

  border:
    1px solid
    var(--landing-border) !important;

  box-shadow:
    0 8px 22px
    rgba(24, 78, 131, 0.07) !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.step-card::before {
  position: absolute;

  top: 50%;
  left: 14px;

  width: 38px !important;
  height: 38px !important;

  margin: 0 !important;

  transform:
    translateY(-50%);

  border-radius: 12px !important;

  font-size: 15px !important;
  font-weight: 700;
}

.step-card:hover {
  transform: none !important;
}

.step-card h3 {
  margin:
    0 0 4px !important;

  color:
    var(--landing-navy) !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  line-height: 1.3;
}

.step-card p {
  color:
    #607a93 !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* =========================================================
   PRICING
========================================================= */

.pricing-section {
  padding:
    52px
    16px
    60px !important;
}

.pricing-title {
  margin:
    0 0 9px !important;

  font-size:
    clamp(28px, 7.5vw, 38px) !important;

  font-weight: 700 !important;

  line-height: 1.15 !important;
}

.pricing-subtitle {
  max-width: 520px;

  margin:
    0 auto 24px !important;

  color:
    #657f98 !important;

  font-size: 12.5px !important;
  font-style: normal !important;

  line-height: 1.5 !important;
}

.pricing-mode-tabs {
  width: 100% !important;

  margin:
    0 auto 26px !important;

  display: grid !important;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(130px, 1fr)
    );

  gap: 8px !important;
}

.pricing-mode-tab {
  min-height: 42px;

  padding:
    8px 12px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 12px !important;
  font-weight: 600;

  white-space: normal;
}

.pricing-service-group {
  margin-bottom:
    34px !important;
}

.pricing-service-title {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.pricing-service-mode {
  margin:
    4px 0 14px !important;

  font-size: 11px !important;
}

.pricing-slider {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 12px !important;

  margin:
    0 0 26px !important;
}

.print-pricing-slider,
.copy-pricing-slider {
  display: grid !important;
}

.price-card,
.pricing-slider.has-active .price-card,
.pricing-slider.has-active .price-card.active {
  width: 100% !important;

  min-height: 0 !important;

  flex:
    none !important;

  padding:
    18px 16px !important;

  border-radius:
    18px !important;

  opacity: 1 !important;

  transform:
    none !important;

  cursor: default !important;

  pointer-events: none;

  border:
    1px solid
    var(--landing-border) !important;

  background:
    rgba(255, 255, 255, 0.80) !important;

  box-shadow:
    0 8px 24px
    rgba(24, 78, 131, 0.07) !important;
}

.price-card h3,
.price-card h4,
.pricing-slider.has-active .price-card.active h3,
.pricing-slider.has-active .price-card.active h4 {
  margin:
    0 0 8px !important;

  font-size:
    21px !important;

  font-weight: 700 !important;
}

.paper-badge,
.pricing-slider.has-active .price-card.active .paper-badge {
  margin:
    0 0 15px !important;

  padding:
    6px 10px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    9.5px !important;
}

.price-item {
  padding:
    4px 0;

  display: grid;

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

  grid-template-areas:
    "label price"
    "meta price";

  column-gap: 16px;

  text-align: left !important;
}

.price-item span {
  grid-area: label;

  margin:
    0 0 2px !important;

  color:
    #4e6e8e !important;

  font-size:
    12px !important;

  line-height: 1.35;
}

.price-item small {
  grid-area: meta;

  min-height: 0 !important;

  margin:
    0 !important;

  color:
    #8799aa !important;

  font-size:
    9.5px !important;

  line-height: 1.3 !important;
}

.price-item strong,
.pricing-slider.has-active .price-card.active .price-item strong {
  grid-area: price;

  align-self: center;

  font-size:
    22px !important;

  font-weight: 700;

  line-height: 1 !important;
}

.divider,
.pricing-slider.has-active .price-card.active .divider {
  width: 100% !important;

  height: 1px !important;

  margin:
    10px 0 !important;

  background:
    rgba(47, 157, 222, 0.12) !important;
}


/* =========================================================
   DUPLEX AVAILABILITY
========================================================= */

.pricing-kiosk-availability {
  margin:
    10px auto 0 !important;

  padding:
    20px 16px !important;

  border-radius:
    20px !important;
}

.pricing-kiosk-heading h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
}

.pricing-kiosk-heading p {
  margin:
    6px auto 16px !important;

  font-size: 11.5px !important;
}

.pricing-kiosk-grid {
  grid-template-columns:
    1fr !important;

  gap: 10px !important;
}

.pricing-kiosk-card {
  padding:
    14px !important;

  border-radius:
    15px !important;
}

.pricing-kiosk-card-top {
  gap: 8px !important;

  flex-direction:
    column !important;
}

.pricing-kiosk-card h4 {
  font-size:
    14px !important;

  font-weight: 700 !important;
}

.pricing-kiosk-card-top p,
.pricing-kiosk-paper {
  font-size:
    10px !important;
}

.pricing-kiosk-status {
  min-width: 0 !important;

  padding:
    7px 10px !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size:
    10px !important;
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
  padding:
    52px
    16px
    60px !important;
}

.about-card {
  width: 100% !important;

  padding:
    22px 18px !important;

  border-radius:
    20px !important;

  background:
    rgba(255, 255, 255, 0.76) !important;

  border:
    1px solid
    var(--landing-border) !important;

  box-shadow:
    var(--landing-shadow) !important;
}

.about-card h2 {
  margin:
    0 0 15px !important;

  font-size:
    27px !important;

  font-weight: 700 !important;
}

.about-card p {
  margin:
    0 0 11px !important;

  color:
    #466987 !important;

  font-size:
    13px !important;

  line-height:
    1.6 !important;
}

.about-card strong {
  font-weight:
    700 !important;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
  padding:
    34px
    18px
    16px !important;
}

.footer-content {
  gap:
    24px !important;
}

.footer-brand h2 {
  margin:
    0 0 7px !important;

  font-size:
    22px !important;

  font-weight:
    700 !important;
}

.footer-brand p {
  max-width:
    330px !important;

  font-size:
    12px !important;

  line-height:
    1.6 !important;
}

.footer-links {
  gap:
    10px 18px !important;
}

.footer-links a,
.footer-admin-link {
  font-size:
    12px !important;
}

.footer-socials {
  gap:
    9px !important;

  margin-top:
    15px !important;
}

.footer-socials a {
  width:
    36px !important;

  height:
    36px !important;
}

.footer-socials svg {
  width:
    17px !important;

  height:
    17px !important;
}

.footer-bottom {
  margin-top:
    24px !important;

  padding-top:
    14px !important;

  gap:
    10px !important;
}

.footer-bottom p {
  font-size:
    11px !important;
}


/* =========================================================
   DESKTOP / TABLET ENHANCEMENTS
========================================================= */

@media (min-width: 761px) {

  html {
    scroll-padding-top:
      92px;
  }

  .site-header {
    top:
      18px !important;

    left:
      24px !important;

    right:
      24px !important;
  }

  .site-header-inner {
    min-height:
      62px;

    padding:
      8px
      10px
      8px
      18px;

    border-radius:
      20px;
  }

  .nav-brand img {
    width:
      112px;
  }

  .nav-toggle {
    display:
      none;
  }

  .nav-menu {
    position:
      static !important;

    width:
      auto !important;

    display:
      flex !important;

    flex-direction:
      row;

    align-items:
      center;

    padding:
      0 !important;

    gap:
      2px !important;

    border:
      0 !important;

    border-radius:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    backdrop-filter:
      none !important;

    -webkit-backdrop-filter:
      none !important;
  }

  .nav-link {
    width:
      auto;

    min-height:
      38px !important;

    padding:
      0 12px !important;

    justify-content:
      center !important;

    font-size:
      12.5px !important;

    white-space:
      nowrap !important;
  }

  .hero-section {
    padding:
      118px
      32px
      64px !important;
  }

  .hero-container {
    max-width:
      1120px;

    display:
      grid !important;

    grid-template-columns:
      minmax(300px, 0.85fr)
      minmax(380px, 1fr);

    gap:
      clamp(38px, 6vw, 76px) !important;

    align-items:
      center;

    text-align:
      left;
  }

  .hero-image-wrap {
    order:
      1;
  }

  .hero-kiosk {
    width:
      min(390px, 34vw) !important;

    max-width:
      390px;
  }

  .hero-content {
    order:
      2;

    margin:
      0 !important;
  }

  .hero-logo {
    width:
      min(340px, 30vw) !important;

    margin:
      0 0 20px !important;
  }

  .hero-description {
    margin:
      0 0 26px !important;

    font-size:
      15.5px !important;
  }

  .hero-note {
    margin:
      14px 0 0 !important;
  }

  .how-section {
    padding:
      64px
      32px
      76px !important;
  }

  .steps-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      14px !important;
  }

  .pricing-section {
    padding:
      72px
      32px
      80px !important;
  }

  .pricing-slider {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(230px, 1fr)
      ) !important;

    gap:
      16px !important;
  }

  .price-card,
  .pricing-slider.has-active .price-card,
  .pricing-slider.has-active .price-card.active {
    pointer-events:
      auto;

    min-height:
      0 !important;
  }

  .pricing-kiosk-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(240px, 1fr)
      ) !important;
  }

  .about-section {
    padding:
      70px
      32px
      86px !important;
  }

  .about-card {
    padding:
      32px !important;
  }

  .footer-content {
    grid-template-columns:
      minmax(260px, 1.2fr)
      minmax(300px, 1fr) !important;
  }

  .footer-links {
    grid-template-columns:
      repeat(
        2,
        minmax(130px, 1fr)
      ) !important;
  }

  .footer-bottom {
    flex-direction:
      row !important;

    align-items:
      center !important;
  }

  .section-indicator {
    display:
      flex !important;
  }
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1100px) {

  .steps-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      ) !important;
  }

  .step-card {
    padding:
      20px
      18px
      20px
      70px !important;
  }

  .pricing-title {
    font-size:
      42px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

  .site-header {
    left:
      8px !important;

    right:
      8px !important;
  }

  .site-header-inner {
    padding-left:
      11px;
  }

  .nav-brand img {
    width:
      88px;
  }

  .hero-section {
    padding-left:
      12px !important;

    padding-right:
      12px !important;
  }

  .how-section,
  .pricing-section,
  .about-section {
    padding-left:
      12px !important;

    padding-right:
      12px !important;
  }

}


/* =========================================================
   MOTION ACCESSIBILITY
========================================================= */

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

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}

/* EASYPRINT PRICING REDESIGN V2
   ---------------------------------------------------------
   Public-facing pricing:
   - simple B&W + Color range
   - horizontal paper-size cards
   - no coverage percentages
   - no duplex kiosk cards
--------------------------------------------------------- */

.pricing-heading {
  max-width: 640px;
  margin: 0 auto 22px;
}

.pricing-eyebrow {
  margin: 0 0 7px;

  color: #2c92c7;

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 1.5px;
}

.pricing-title {
  margin: 0 0 9px !important;
}

.pricing-cache-note {
  width: min(100%, 620px);

  margin: 0 auto 18px;
  padding: 10px 13px;

  border: 1px solid
    rgba(47, 157, 222, 0.18);

  border-radius: 12px;

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

  color: #657f98;

  font-size: 11px;
  line-height: 1.45;
}


/* Availability */

.printing-availability {
  width: min(100%, 620px);

  margin: 0 auto 38px;

  display: grid;
  grid-template-columns: 1fr;

  gap: 8px;
}

.printing-availability-item {
  min-height: 54px;

  padding: 10px 13px;

  display: flex;
  align-items: center;

  gap: 11px;

  border: 1px solid
    rgba(214, 232, 243, 0.95);

  border-radius: 14px;

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

  text-align: left;
}

.availability-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;
}

.printing-availability-item.available
.availability-dot {
  background: #32a46d;

  box-shadow:
    0 0 0 4px
    rgba(50, 164, 109, 0.11);
}

.printing-availability-item.unavailable
.availability-dot {
  background: #d99a3a;

  box-shadow:
    0 0 0 4px
    rgba(217, 154, 58, 0.12);
}

.printing-availability-item strong {
  display: block;

  color: #204f7d;

  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}

.printing-availability-item small {
  display: block;

  margin-top: 2px;

  color: #71869a;

  font-size: 10.5px;
  line-height: 1.25;
}


/* Service */

.pricing-service-block {
  width: 100%;

  margin: 0 0 42px;

  text-align: left;
}

.pricing-service-heading {
  width: 100%;

  margin: 0 0 13px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 14px;
}

.pricing-service-kicker {
  display: block;

  margin-bottom: 4px;

  color: #6a8298;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 1.2px;
}

.pricing-service-heading h3 {
  margin: 0;

  color: #184e83;

  font-size: 23px;
  font-weight: 750;

  line-height: 1.1;
}

.pricing-swipe-hint {
  padding-bottom: 2px;

  color: #8295a6;

  font-size: 10px;

  white-space: nowrap;
}


/* Horizontal paper cards */

.pricing-card-scroller {
  width: calc(100% + 16px);

  margin-right: -16px;

  padding:
    2px
    16px
    14px
    0;

  display: flex;

  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-inline:
    contain;

  scroll-snap-type:
    x mandatory;

  scroll-padding-left: 0;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width: none;
}

.pricing-card-scroller::-webkit-scrollbar {
  display: none;
}

.pricing-paper-card {
  flex:
    0 0
    min(82vw, 290px);

  min-width: 0;

  padding: 17px;

  border: 1px solid
    rgba(211, 230, 241, 0.94);

  border-radius: 20px;

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

  box-shadow:
    0 10px 26px
    rgba(24, 78, 131, 0.08);

  scroll-snap-align: start;

  text-align: left;
}

.pricing-paper-card-header {
  min-height: 52px;

  margin-bottom: 15px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;
}

.pricing-paper-label {
  display: block;

  margin-bottom: 3px;

  color: #8a9cab;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.5px;

  text-transform: uppercase;
}

.pricing-paper-card h4 {
  margin: 0 !important;

  color: #174f83 !important;

  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.pricing-paper-card
.paper-badge {
  margin: 0 !important;

  padding: 6px 8px !important;

  flex: 0 0 auto;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 8.5px !important;

  white-space: nowrap;
}


/* Simple price rows */

.pricing-simple-row {
  min-height: 67px;

  padding: 12px 0;

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

  gap: 14px;

  border-top: 1px solid
    rgba(47, 157, 222, 0.11);
}

.pricing-simple-row > div {
  min-width: 0;
}

.pricing-type {
  display: block;

  color: #315c83;

  font-size: 12px;
  font-weight: 700;

  line-height: 1.25;
}

.pricing-simple-row small {
  display: block;

  margin-top: 3px;

  color: #8a9aa9;

  font-size: 9.5px;

  line-height: 1.25;
}

.pricing-amount {
  flex: 0 0 auto;

  color: #174f83;

  font-size: 18px;
  font-weight: 800;

  line-height: 1;

  white-space: nowrap;
}

.price-range-dash {
  display: inline-block;

  margin: 0 2px;

  color: #7390aa;

  font-weight: 500;
}

.pricing-color-note {
  width: min(100%, 620px);

  margin: -8px auto 0;

  color: #71869b;

  font-size: 10.5px;
  line-height: 1.5;

  text-align: center;
}


/* Kill legacy pricing controls/cards in case stale CSS survives */

.pricing-mode-tabs,
.pricing-mode-panel,
.pricing-kiosk-availability {
  display: none !important;
}


/* Tablet */

@media (min-width: 560px) {

  .printing-availability {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pricing-paper-card {
    flex-basis: 280px;
  }

}


/* Desktop: show all three comfortably */

@media (min-width: 900px) {

  .pricing-card-scroller {
    width: 100%;

    margin-right: 0;

    padding-right: 0;

    display: grid;

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

    overflow: visible;
  }

  .pricing-paper-card {
    width: auto;

    max-width: none;
  }

  .pricing-swipe-hint {
    display: none;
  }

  .pricing-service-heading h3 {
    font-size: 26px;
  }

}

/* EASYPRINT PRICING CLEANUP V3
   ---------------------------------------------------------
   Reduce visual noise and simplify pricing hierarchy.
--------------------------------------------------------- */

.pricing-heading {
  max-width: 560px;
  margin: 0 auto 18px;
  text-align: center;
}

.pricing-title {
  margin: 0 0 6px !important;
  font-size: clamp(26px, 7vw, 36px) !important;
}

.pricing-subtitle {
  margin: 0 auto 18px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* Compact availability row */

.printing-availability {
  width: min(100%, 620px);

  margin: 0 auto 30px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 8px;
}

.printing-availability-item {
  min-height: 0;

  padding: 8px 11px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  border-radius: 999px;

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

  border:
    1px solid
    rgba(214, 232, 243, 0.95);
}

.printing-availability-item strong {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.printing-availability-item small {
  display: none;
}

.availability-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}


/* Clear section separation */

.pricing-service-block {
  margin: 0 0 38px;
}

.pricing-service-heading {
  margin: 0 0 12px;

  display: block;

  text-align: left;
}

.pricing-service-heading h3 {
  margin: 0;

  font-size: 22px;
  font-weight: 800;

  line-height: 1.1;
}


/* Cleaner scroller */

.pricing-card-scroller {
  gap: 10px;
  padding-bottom: 12px;
}

.pricing-paper-card {
  flex:
    0 0
    min(78vw, 270px);

  padding: 16px;

  border-radius: 18px;

  box-shadow:
    0 7px 18px
    rgba(24, 78, 131, 0.06);
}

.pricing-paper-card-header {
  min-height: 0;

  margin-bottom: 14px;

  display: block;
}

.pricing-paper-card h4 {
  margin: 0 0 10px !important;

  font-size: 23px !important;
}

.pricing-paper-card .paper-badge {
  width: fit-content;

  margin: 0 !important;

  padding: 5px 8px !important;

  font-size: 8.5px !important;
}


/* Two simple rows */

.pricing-simple-row {
  min-height: 58px;

  padding: 11px 0;

  gap: 12px;
}

.pricing-type {
  font-size: 12px;
}

.pricing-simple-row small {
  display: none;
}

.pricing-amount {
  font-size: 18px;
}


/* Single global note */

.pricing-color-note {
  width: min(100%, 520px);

  margin: -4px auto 0;

  font-size: 10px;
  line-height: 1.45;
}


/* Desktop */

@media (min-width: 900px) {

  .pricing-service-block {
    margin-bottom: 44px;
  }

  .pricing-paper-card {
    min-height: 0;
  }

  .pricing-service-heading h3 {
    font-size: 25px;
  }

}

/* EASYPRINT HERO CLEANUP V4
   ---------------------------------------------------------
   Mobile hero visual hierarchy:
   - smaller kiosk
   - tighter rhythm
   - clearer headline hierarchy
   - more compact CTA/meta
--------------------------------------------------------- */

.hero-section {
  padding:
    84px
    16px
    38px !important;
}

.hero-container {
  gap: 8px !important;
}

.hero-image-wrap {
  margin-bottom: 2px !important;
}

.hero-kiosk {
  width:
    min(215px, 60vw) !important;

  max-width:
    215px !important;
}

.hero-image-wrap::before {
  width:
    min(220px, 62vw) !important;

  height:
    min(220px, 62vw) !important;
}

.hero-image-wrap::after {
  width:
    min(175px, 50vw) !important;

  height:
    20px !important;
}


/* Headline */

.hero-top-text {
  max-width:
    320px;

  margin:
    6px
    auto
    8px !important;

  color:
    #274f73 !important;

  font-size:
    clamp(
      27px,
      7.3vw,
      33px
    ) !important;

  font-weight:
    800 !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -0.5px;
}


/* Brand mark */

.hero-logo {
  width:
    min(
      215px,
      62vw
    ) !important;

  margin:
    0
    auto
    16px !important;
}


/* Description */

.hero-description {
  max-width:
    325px !important;

  margin:
    0
    auto
    18px !important;

  color:
    #3f627f !important;

  font-size:
    13.5px !important;

  line-height:
    1.5 !important;
}


/* CTA */

.upload-btn {
  width:
    min(
      100%,
      280px
    ) !important;

  height:
    48px !important;

  margin:
    0 auto !important;

  border-radius:
    12px !important;

  font-size:
    14px !important;

  box-shadow:
    0 8px 20px
    rgba(
      47,
      157,
      222,
      0.18
    ) !important;
}


/* Meta details */

.hero-note {
  max-width:
    330px !important;

  margin:
    12px
    auto
    0 !important;

  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    4px
    8px;

  color:
    #74899c !important;

  font-size:
    10px !important;

  line-height:
    1.35 !important;
}

.hero-note span {
  position: relative;

  white-space:
    nowrap;
}

.hero-note span:not(:last-child)::after {
  content: "•";

  margin-left:
    8px;

  color:
    #9fb0bf;
}


/* Very small phones */

@media (max-width: 360px) {

  .hero-kiosk {
    width:
      min(
        195px,
        58vw
      ) !important;
  }

  .hero-top-text {
    font-size:
      25px !important;
  }

  .hero-logo {
    width:
      min(
        195px,
        60vw
      ) !important;
  }

  .hero-description {
    font-size:
      13px !important;
  }

}


/* Desktop / tablet preservation */

@media (min-width: 761px) {

  .hero-section {
    padding:
      112px
      32px
      60px !important;
  }

  .hero-container {
    gap:
      clamp(
        36px,
        5vw,
        68px
      ) !important;
  }

  .hero-kiosk {
    width:
      min(
        365px,
        32vw
      ) !important;

    max-width:
      365px !important;
  }

  .hero-top-text {
    max-width:
      500px;

    margin:
      0
      0
      10px !important;

    font-size:
      clamp(
        32px,
        3.2vw,
        44px
      ) !important;

    line-height:
      1.08 !important;
  }

  .hero-logo {
    width:
      min(
        300px,
        27vw
      ) !important;

    margin:
      0
      0
      18px !important;
  }

  .hero-description {
    max-width:
      430px !important;

    margin:
      0
      0
      22px !important;

    font-size:
      15px !important;
  }

  .upload-btn {
    margin:
      0 !important;
  }

  .hero-note {
    justify-content:
      flex-start;

    margin:
      12px
      0
      0 !important;
  }

}

/* EASYPRINT WHITE NAV HERO V5
   ---------------------------------------------------------
   White-dominant landing:
   - blue as accent only
   - flat minimal header
   - calmer hero
   - lighter visual hierarchy
--------------------------------------------------------- */


/* =========================================================
   PAGE TONE
========================================================= */

body {
  background:
    #ffffff !important;
}

body::before,
body::after {
  opacity:
    0.16 !important;

  filter:
    blur(70px) !important;
}

main {
  background:
    #ffffff !important;
}


/* =========================================================
   MINIMAL HEADER
========================================================= */

.site-header {
  top:
    0 !important;

  left:
    0 !important;

  right:
    0 !important;

  padding:
    0 !important;

  background:
    rgba(255, 255, 255, 0.96) !important;

  border-bottom:
    1px solid
    rgba(25, 79, 124, 0.08) !important;

  box-shadow:
    none !important;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.site-header-inner {
  width:
    min(100%, 1180px) !important;

  min-height:
    66px !important;

  margin:
    0 auto !important;

  padding:
    0 18px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

.nav-brand {
  display:
    inline-flex;

  align-items:
    center;

  text-decoration:
    none;
}

.nav-brand img {
  width:
    106px !important;

  height:
    auto;
}


/* Simple hamburger */

.nav-toggle {
  width:
    40px !important;

  height:
    40px !important;

  padding:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  border:
    0 !important;

  border-radius:
    10px !important;

  background:
    transparent !important;

  color:
    #174f83 !important;

  box-shadow:
    none !important;
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  background:
    rgba(47, 157, 222, 0.06) !important;
}


/* Mobile menu becomes clean full-width sheet */

.nav-menu {
  top:
    66px !important;

  left:
    0 !important;

  right:
    0 !important;

  width:
    100% !important;

  padding:
    12px 18px
    18px !important;

  gap:
    2px !important;

  border:
    0 !important;

  border-top:
    1px solid
    rgba(25, 79, 124, 0.06) !important;

  border-radius:
    0 !important;

  background:
    rgba(255, 255, 255, 0.98) !important;

  box-shadow:
    0 10px 24px
    rgba(24, 78, 131, 0.06) !important;
}

.nav-link {
  width:
    100% !important;

  min-height:
    44px !important;

  padding:
    0 6px !important;

  justify-content:
    flex-start !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  color:
    #355d7d !important;

  font-size:
    13px !important;

  font-weight:
    600 !important;
}

.nav-link:hover,
.nav-link.active {
  color:
    #168fcb !important;

  background:
    transparent !important;
}


/* =========================================================
   HERO — MOSTLY WHITE
========================================================= */

.hero-section {
  position:
    relative;

  padding:
    96px
    18px
    52px !important;

  background:
    #ffffff !important;

  overflow:
    hidden;
}

.hero-section::before {
  content:
    "";

  position:
    absolute;

  top:
    90px;

  left:
    50%;

  width:
    min(330px, 78vw);

  height:
    min(330px, 78vw);

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(84, 190, 226, 0.16) 0%,
      rgba(84, 190, 226, 0.07) 50%,
      rgba(84, 190, 226, 0) 72%
    );

  pointer-events:
    none;
}

.hero-container {
  position:
    relative;

  z-index:
    1;

  max-width:
    1020px !important;

  gap:
    10px !important;
}


/* Kiosk */

.hero-image-wrap {
  min-height:
    0 !important;

  margin:
    0 0 4px !important;
}

.hero-image-wrap::before,
.hero-image-wrap::after {
  opacity:
    0.38 !important;
}

.hero-kiosk {
  width:
    min(205px, 56vw) !important;

  max-width:
    205px !important;

  filter:
    drop-shadow(
      0 14px 22px
      rgba(25, 79, 124, 0.10)
    ) !important;
}


/* Brand */

.hero-logo {
  width:
    min(205px, 58vw) !important;

  margin:
    2px
    auto
    16px !important;

  filter:
    none !important;
}


/* Copy */

.hero-description {
  max-width:
    315px !important;

  margin:
    0 auto
    20px !important;

  color:
    #4f6f89 !important;

  font-size:
    13.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}


/* CTA */

.upload-btn {
  width:
    min(100%, 274px) !important;

  height:
    48px !important;

  margin:
    0 auto !important;

  border:
    0 !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      135deg,
      #20b7c7,
      #2f9dde
    ) !important;

  color:
    #ffffff !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  box-shadow:
    0 8px 18px
    rgba(47, 157, 222, 0.16) !important;
}

.upload-btn:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 22px
    rgba(47, 157, 222, 0.20) !important;
}


/* Meta */

.hero-note {
  max-width:
    310px !important;

  margin:
    13px
    auto
    0 !important;

  gap:
    3px 7px !important;

  color:
    #8999a7 !important;

  font-size:
    9.5px !important;

  line-height:
    1.4 !important;
}

.hero-note span:not(:last-child)::after {
  color:
    #c1ccd5 !important;
}


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

@media (min-width: 761px) {

  .site-header {
    padding:
      0 24px !important;
  }

  .site-header-inner {
    min-height:
      72px !important;

    padding:
      0 !important;
  }

  .nav-toggle {
    display:
      none !important;
  }

  .nav-menu {
    position:
      static !important;

    width:
      auto !important;

    padding:
      0 !important;

    display:
      flex !important;

    flex-direction:
      row !important;

    gap:
      2px !important;

    border:
      0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;
  }

  .nav-link {
    width:
      auto !important;

    min-height:
      40px !important;

    padding:
      0 12px !important;

    justify-content:
      center !important;
  }

  .hero-section {
    padding:
      118px
      32px
      72px !important;
  }

  .hero-section::before {
    left:
      27%;

    top:
      105px;

    width:
      390px;

    height:
      390px;
  }

  .hero-container {
    grid-template-columns:
      minmax(300px, 0.8fr)
      minmax(380px, 1fr) !important;

    gap:
      clamp(48px, 7vw, 90px) !important;
  }

  .hero-kiosk {
    width:
      min(335px, 30vw) !important;

    max-width:
      335px !important;
  }

  .hero-logo {
    width:
      min(290px, 26vw) !important;

    margin:
      0
      0
      18px !important;
  }

  .hero-description {
    max-width:
      420px !important;

    margin:
      0
      0
      24px !important;

    font-size:
      15px !important;
  }

  .upload-btn {
    margin:
      0 !important;
  }

  .hero-note {
    justify-content:
      flex-start;

    margin:
      13px
      0
      0 !important;
  }

}

/* EASYPRINT PRICING STACKED V6
   ---------------------------------------------------------
   Mobile:
   - no horizontal scrolling
   - compact vertical cards
   - calmer spacing
   - thin borders, lighter shadows
--------------------------------------------------------- */


/* Section rhythm */

.pricing-section {
  padding:
    58px
    18px
    66px !important;
}

.pricing-heading {
  margin:
    0 auto
    20px !important;
}

.pricing-title {
  font-size:
    31px !important;
}

.pricing-subtitle {
  margin:
    0 auto
    16px !important;

  font-size:
    12px !important;
}


/* Availability chips */

.printing-availability {
  margin:
    0 auto
    34px !important;

  gap:
    7px !important;
}

.printing-availability-item {
  padding:
    7px
    10px !important;

  border:
    1px solid
    rgba(214, 228, 238, 0.85) !important;

  background:
    #ffffff !important;

  box-shadow:
    none !important;
}

.printing-availability-item strong {
  font-size:
    10px !important;
}


/* Service titles */

.pricing-service-block {
  margin:
    0 0
    38px !important;
}

.pricing-service-heading {
  margin:
    0 0
    12px !important;
}

.pricing-service-heading h3 {
  font-size:
    21px !important;

  font-weight:
    750 !important;
}


/* Remove horizontal scroll */

.pricing-card-scroller {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    10px !important;

  overflow:
    visible !important;

  scroll-snap-type:
    none !important;
}


/* Compact card */

.pricing-paper-card {
  width:
    100% !important;

  max-width:
    none !important;

  min-height:
    0 !important;

  padding:
    15px
    16px !important;

  display:
    block !important;

  border:
    1px solid
    rgba(208, 226, 237, 0.88) !important;

  border-radius:
    16px !important;

  background:
    #ffffff !important;

  box-shadow:
    0 4px 14px
    rgba(24, 78, 131, 0.045) !important;

  scroll-snap-align:
    none !important;
}


/* Header */

.pricing-paper-card-header {
  min-height:
    0 !important;

  margin:
    0 0
    11px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;
}

.pricing-paper-card h4 {
  margin:
    0 !important;

  font-size:
    19px !important;

  font-weight:
    800 !important;
}

.pricing-paper-card .paper-badge {
  margin:
    0 !important;

  padding:
    5px
    8px !important;

  font-size:
    8px !important;

  line-height:
    1.1 !important;

  border-radius:
    999px !important;
}


/* Price rows */

.pricing-simple-row {
  min-height:
    0 !important;

  padding:
    10px
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  border-top:
    1px solid
    rgba(47, 157, 222, 0.08) !important;
}

.pricing-type {
  font-size:
    11.5px !important;

  font-weight:
    650 !important;

  color:
    #3f607c !important;
}

.pricing-amount {
  font-size:
    16.5px !important;

  font-weight:
    800 !important;

  color:
    #165783 !important;
}


/* Global note */

.pricing-color-note {
  margin:
    -2px auto
    0 !important;

  font-size:
    9.5px !important;

  color:
    #8293a0 !important;
}


/* Small phones */

@media (max-width: 360px) {

  .pricing-section {
    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }

  .pricing-paper-card {
    padding:
      14px !important;
  }

  .pricing-paper-card h4 {
    font-size:
      18px !important;
  }

  .pricing-amount {
    font-size:
      15.5px !important;
  }

}


/* Tablet: two columns */

@media (min-width: 620px) and (max-width: 899px) {

  .pricing-card-scroller {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* Desktop: three columns */

@media (min-width: 900px) {

  .pricing-card-scroller {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      14px !important;
  }

  .pricing-paper-card {
    padding:
      17px !important;
  }

  .pricing-service-heading h3 {
    font-size:
      24px !important;
  }

}

/* EASYPRINT PRICING TYPOGRAPHY V10
   ---------------------------------------------------------
   Typography hierarchy only.
   No spacing/group/layout changes in this patch.
--------------------------------------------------------- */


/* Paper size = strongest hierarchy */

.pricing-paper-card h4 {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.4px !important;
  color: #184e83 !important;
}


/* Black & White / Color */

.pricing-type {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: #526b7e !important;
}


/* Price = SAME SIZE as the label */

.pricing-amount {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  color: #184e83 !important;
}


/* Make ranges behave like one clean value */

.price-range-dash {
  margin: 0 4px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #8a9aa7 !important;
}


/* Keep each label/value pair visually aligned */

.pricing-simple-row {
  align-items: center !important;
}

.pricing-simple-row > div {
  display: flex !important;
  align-items: center !important;
}


/* Mobile remains the same hierarchy */

@media (max-width: 480px) {

  .pricing-paper-card h4 {
    font-size: 23px !important;
  }

  .pricing-type,
  .pricing-amount,
  .price-range-dash {
    font-size: 14px !important;
  }

}

/* EASYPRINT CASE + GRADIENT V11
   ---------------------------------------------------------
   - smaller paper-size titles
   - PRINT / PHOTOCOPY uppercase
   - stronger visible blue gradient
--------------------------------------------------------- */


/* =========================================================
   STRONGER GLOBAL BLUE TINT
========================================================= */

body {
  background:
    linear-gradient(
      180deg,
      #f4fbff 0%,
      #e4f5ff 18%,
      #eef9ff 38%,
      #dff2ff 60%,
      #edf9ff 80%,
      #e3f4ff 100%
    ) !important;
}

main {
  background:
    transparent !important;
}


/* Slightly stronger tint inside major sections */

.hero-section {
  background:
    linear-gradient(
      180deg,
      rgba(247, 252, 255, 0.94) 0%,
      rgba(229, 246, 255, 0.96) 100%
    ) !important;
}

.how-section {
  background:
    linear-gradient(
      180deg,
      rgba(250, 253, 255, 0.95) 0%,
      rgba(232, 247, 255, 0.97) 100%
    ) !important;
}

.pricing-section {
  background:
    linear-gradient(
      180deg,
      rgba(246, 252, 255, 0.96) 0%,
      rgba(223, 243, 255, 0.98) 100%
    ) !important;
}

.about-section {
  background:
    linear-gradient(
      180deg,
      rgba(249, 253, 255, 0.96) 0%,
      rgba(231, 247, 255, 0.97) 100%
    ) !important;
}


/* =========================================================
   PRINT / PHOTOCOPY = SECTION LABELS
========================================================= */

.pricing-service-heading h3 {
  text-transform:
    uppercase !important;

  font-size:
    19px !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.7px !important;

  color:
    #184e83 !important;
}


/* =========================================================
   SHORT / A4 / LONG = CARD TITLE
========================================================= */

.pricing-paper-card h4 {
  text-transform:
    none !important;

  font-size:
    20px !important;

  font-weight:
    750 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    -0.2px !important;

  color:
    #184e83 !important;
}


/* Preserve secondary hierarchy */

.pricing-type,
.pricing-amount,
.price-range-dash {
  font-size:
    14px !important;
}

.pricing-type {
  font-weight:
    500 !important;

  color:
    #536d82 !important;
}

.pricing-amount {
  font-weight:
    700 !important;

  color:
    #184e83 !important;
}


/* Mobile */

@media (max-width: 480px) {

  .pricing-service-heading h3 {
    font-size:
      18px !important;
  }

  .pricing-paper-card h4 {
    font-size:
      19px !important;
  }

}

/* EASYPRINT PRICING SPACING + BADGES V12
   ---------------------------------------------------------
   - more breathing room before Photocopy
   - unified EasyPrint blue paper badges
--------------------------------------------------------- */


/* More separation between Print and Photocopy */

.pricing-service-block + .pricing-service-block {
  margin-top:
    64px !important;
}


/* Paper badges: EasyPrint blue theme only */

.pricing-paper-card .paper-badge,
.pricing-paper-card .badge-kiosk,
.pricing-paper-card .badge-byop {
  padding:
    6px 10px !important;

  border-radius:
    999px !important;

  background:
    #e8f6ff !important;

  border:
    1px solid
    #ccecff !important;

  color:
    #25658f !important;

  font-size:
    10px !important;

  font-weight:
    600 !important;

  box-shadow:
    none !important;
}


/* Slightly stronger blue for Bring Your Own Paper */

.pricing-paper-card .badge-byop {
  background:
    #dff2ff !important;

  border-color:
    #c3e6fb !important;

  color:
    #1f5f8b !important;
}


/* Keep Paper Included a little softer */

.pricing-paper-card .badge-kiosk {
  background:
    #edf8ff !important;

  border-color:
    #d6eefc !important;

  color:
    #2d6f98 !important;
}


@media (max-width: 480px) {

  .pricing-service-block + .pricing-service-block {
    margin-top:
      58px !important;
  }

}

/* EASYPRINT PRICING HEADER + NOTICE V13
   ---------------------------------------------------------
   Stronger hierarchy + single centered availability notice
--------------------------------------------------------- */


/* =========================================================
   PRICING HEADER
========================================================= */

.pricing-heading {
  max-width:
    560px !important;

  margin:
    0 auto
    24px !important;

  text-align:
    center !important;
}

.pricing-kicker {
  display:
    block;

  margin-bottom:
    7px;

  color:
    #4f91ba;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    1.6px;
}

.pricing-title {
  margin:
    0 0
    9px !important;

  color:
    #184e83 !important;

  font-size:
    32px !important;

  font-weight:
    800 !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -0.6px !important;
}

.pricing-subtitle {
  max-width:
    410px !important;

  margin:
    0 auto !important;

  color:
    #647c90 !important;

  font-size:
    12px !important;

  font-weight:
    400 !important;

  line-height:
    1.55 !important;
}


/* =========================================================
   AVAILABILITY NOTICE
========================================================= */

.printing-availability {
  width:
    100% !important;

  margin:
    0 auto
    36px !important;

  padding:
    0 !important;

  display:
    flex !important;

  justify-content:
    center !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}

.printing-availability-notice {
  width:
    min(100%, 500px);

  padding:
    13px
    16px;

  border:
    1px solid
    rgba(47, 157, 222, 0.12);

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      rgba(238, 248, 255, 0.96),
      rgba(229, 244, 255, 0.96)
    );

  box-shadow:
    0 6px 16px
    rgba(24, 78, 131, 0.035);

  text-align:
    center;
}

.availability-label {
  display:
    block;

  margin-bottom:
    4px;

  color:
    #28688f;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.2px;
}

.printing-availability-notice p {
  margin:
    0 !important;

  color:
    #5f7789 !important;

  font-size:
    10.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;
}


/* Hide old pill-specific visuals if stale markup survives */

.printing-availability-item,
.availability-dot {
  box-shadow:
    none !important;
}


/* Mobile */

@media (max-width: 480px) {

  .pricing-title {
    font-size:
      29px !important;
  }

  .pricing-subtitle {
    max-width:
      330px !important;

    font-size:
      11.5px !important;
  }

  .printing-availability-notice {
    padding:
      12px
      14px;
  }

}

/* EASYPRINT HOW SECTION V14
   ---------------------------------------------------------
   - stronger heading hierarchy
   - calmer subtitle
   - more room before cards
   - more hero bottom breathing room
--------------------------------------------------------- */


/* =========================================================
   HERO BOTTOM SPACE
========================================================= */

.hero-section {
  padding-bottom:
    92px !important;
}


/* =========================================================
   HOW HEADING
========================================================= */

.how-heading {
  max-width:
    520px;

  margin:
    0 auto
    38px;

  text-align:
    center;
}

.how-kicker {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #4f91ba;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    1.6px;
}

.how-heading .section-title {
  margin:
    0 0
    10px !important;

  color:
    #184e83 !important;

  font-size:
    31px !important;

  font-weight:
    800 !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -0.6px !important;
}

.how-subtitle {
  max-width:
    390px;

  margin:
    0 auto !important;

  color:
    #667f92 !important;

  font-size:
    12px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   MOVE CARDS LOWER / GIVE MORE AIR
========================================================= */

.steps-grid {
  margin-top:
    10px !important;

  gap:
    14px !important;
}

.step-card {
  padding:
    18px
    16px
    18px
    66px !important;
}


/* Mobile */

@media (max-width: 480px) {

  .hero-section {
    padding-bottom:
      104px !important;
  }

  .how-heading {
    margin-bottom:
      42px;
  }

  .how-heading .section-title {
    font-size:
      28px !important;
  }

  .how-subtitle {
    max-width:
      330px;

    font-size:
      11.5px !important;
  }

}

/* EASYPRINT HERO COPY V15
   ---------------------------------------------------------
   Stronger front-page text hierarchy
--------------------------------------------------------- */

.hero-kicker {
  margin:
    2px auto
    8px;

  color:
    #4f91ba;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    1.7px;

  text-align:
    center;
}

.hero-logo {
  margin-bottom:
    14px !important;
}

.hero-description {
  max-width:
    335px !important;

  margin:
    0 auto
    20px !important;

  color:
    #536f84 !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  line-height:
    1.62 !important;

  text-align:
    center;
}


/* Info hierarchy under CTA */

.hero-info {
  max-width:
    340px;

  margin:
    13px auto
    0;

  text-align:
    center;
}

.hero-file-info {
  margin:
    0 !important;

  color:
    #7c8f9f !important;

  font-size:
    9.5px !important;

  font-weight:
    500 !important;

  line-height:
    1.45 !important;
}

.hero-file-info span::before {
  content:
    "·";

  margin:
    0 7px;

  color:
    #aebbc5;
}

.hero-validity {
  margin:
    4px 0
    0 !important;

  color:
    #92a1ad !important;

  font-size:
    9px !important;

  font-weight:
    400 !important;

  line-height:
    1.45 !important;
}


/* Desktop */

@media (min-width: 761px) {

  .hero-kicker {
    margin-left:
      0;

    margin-right:
      0;

    text-align:
      left;
  }

  .hero-description,
  .hero-info {
    margin-left:
      0 !important;

    margin-right:
      0 !important;

    text-align:
      left;
  }

}


/* Mobile */

@media (max-width: 480px) {

  .hero-kicker {
    font-size:
      8.5px;
  }

  .hero-description {
    max-width:
      320px !important;

    font-size:
      12.5px !important;
  }

}

/* EASYPRINT ABOUT + FOOTER V16
   ---------------------------------------------------------
   Editorial About section + softer professional footer
--------------------------------------------------------- */


/* =========================================================
   ABOUT
========================================================= */

.about-section {
  padding:
    64px
    18px
    72px !important;
}

.about-card {
  width:
    min(100%, 680px) !important;

  margin:
    0 auto !important;

  padding:
    26px
    22px !important;

  border:
    1px solid
    rgba(47, 157, 222, 0.10) !important;

  border-radius:
    22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(232, 247, 255, 0.96)
    ) !important;

  box-shadow:
    0 12px 30px
    rgba(24, 78, 131, 0.055) !important;
}

.about-heading {
  max-width:
    520px;

  margin:
    0 0
    28px;
}

.about-kicker {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #4f91ba;

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    1.6px;
}

.about-heading h2 {
  margin:
    0 0
    12px !important;

  color:
    #184e83 !important;

  font-size:
    30px !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -0.5px !important;
}

.about-intro {
  margin:
    0 !important;

  color:
    #5f788c !important;

  font-size:
    12.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.7 !important;
}


/* About points */

.about-points {
  display:
    flex;

  flex-direction:
    column;

  gap:
    0;
}

.about-point {
  display:
    grid;

  grid-template-columns:
    34px 1fr;

  gap:
    13px;

  padding:
    17px 0;

  border-top:
    1px solid
    rgba(24, 78, 131, 0.07);
}

.about-point-number {
  color:
    #75afd0;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.5;

  letter-spacing:
    0.6px;
}

.about-point h3 {
  margin:
    0 0
    5px !important;

  color:
    #245f89 !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;
}

.about-point p {
  margin:
    0 !important;

  color:
    #6c8192 !important;

  font-size:
    11.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer,
footer {
  padding:
    46px
    22px
    24px !important;

  background:
    linear-gradient(
      155deg,
      #1c587f 0%,
      #246b95 48%,
      #2d7fa8 100%
    ) !important;

  color:
    rgba(255, 255, 255, 0.92) !important;
}

.footer-container {
  max-width:
    1080px !important;

  margin:
    0 auto !important;
}

.footer-brand h2,
.footer-brand h3,
.footer-logo-text {
  margin-bottom:
    8px !important;

  color:
    #ffffff !important;

  font-size:
    24px !important;

  font-weight:
    800 !important;

  letter-spacing:
    -0.3px;
}

.footer-brand p {
  max-width:
    360px;

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

  font-size:
    11.5px !important;

  line-height:
    1.6 !important;
}


/* Footer links */

.footer-links,
.footer-nav {
  gap:
    8px !important;
}

.footer-links a,
.footer-nav a,
.site-footer a,
footer a {
  color:
    rgba(255, 255, 255, 0.82) !important;

  font-size:
    11.5px !important;

  text-decoration:
    none !important;
}

.footer-links a:hover,
.footer-nav a:hover,
.site-footer a:hover,
footer a:hover {
  color:
    #ffffff !important;
}


/* Social buttons */

.social-links {
  gap:
    10px !important;

  margin-top:
    18px !important;
}

.social-icon {
  width:
    36px !important;

  height:
    36px !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.18) !important;

  border-radius:
    50% !important;

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

  box-shadow:
    none !important;
}

.social-icon:hover {
  background:
    rgba(255, 255, 255, 0.14) !important;
}


/* Footer bottom */

.footer-bottom {
  margin-top:
    28px !important;

  padding-top:
    18px !important;

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

  color:
    rgba(255, 255, 255, 0.58) !important;

  font-size:
    9.5px !important;

  line-height:
    1.55 !important;
}


/* Mobile */

@media (max-width: 480px) {

  .about-card {
    padding:
      24px
      19px !important;
  }

  .about-heading h2 {
    font-size:
      27px !important;
  }

  .about-intro {
    font-size:
      12px !important;
  }

  .about-point {
    grid-template-columns:
      30px 1fr;
  }

  .site-footer,
  footer {
    padding:
      40px
      20px
      22px !important;
  }

}

/* =========================================================
   EASYPRINT MOBILE EXPERIENCE V17
   Ambient gradient atmosphere + How It Works journey

   Frontend only.
   ========================================================= */


/* =========================================================
   1. AMBIENT BACKGROUND
   ========================================================= */

/*
   Reuse the existing global body orbs instead of creating
   many expensive blur layers.
*/

body::before {
  width: 520px !important;
  height: 520px !important;

  left: -260px !important;
  top: 8vh !important;

  background:
    radial-gradient(
      circle,
      rgba(42, 174, 226, 0.23) 0%,
      rgba(75, 201, 226, 0.13) 34%,
      rgba(94, 174, 234, 0.07) 52%,
      transparent 72%
    ) !important;

  filter:
    blur(48px) !important;

  animation:
    easyprintAmbientOne
    26s
    ease-in-out
    infinite
    alternate !important;
}


body::after {
  width: 620px !important;
  height: 620px !important;

  right: -330px !important;
  bottom: 4vh !important;

  background:
    radial-gradient(
      circle,
      rgba(39, 188, 211, 0.20) 0%,
      rgba(84, 166, 231, 0.12) 36%,
      rgba(164, 143, 234, 0.055) 54%,
      transparent 72%
    ) !important;

  filter:
    blur(58px) !important;

  animation:
    easyprintAmbientTwo
    32s
    ease-in-out
    infinite
    alternate !important;
}


/*
   Existing section backgrounds were nearly opaque.
   These are intentionally translucent so the moving
   atmosphere can softly pass behind the page.
*/

.hero-section {
  background:
    linear-gradient(
      180deg,
      rgba(249, 253, 255, 0.86) 0%,
      rgba(230, 247, 255, 0.78) 100%
    ) !important;
}


.how-section {
  background:
    linear-gradient(
      180deg,
      rgba(252, 254, 255, 0.82) 0%,
      rgba(239, 249, 255, 0.74) 100%
    ) !important;
}


.pricing-section {
  background:
    linear-gradient(
      180deg,
      rgba(242, 250, 255, 0.78) 0%,
      rgba(224, 244, 255, 0.79) 100%
    ) !important;
}


.about-section {
  background:
    linear-gradient(
      180deg,
      rgba(250, 253, 255, 0.82) 0%,
      rgba(234, 248, 255, 0.76) 100%
    ) !important;
}


@keyframes easyprintAmbientOne {

  0% {
    transform:
      translate3d(
        -4vw,
        -3vh,
        0
      )
      scale(0.96);
  }

  35% {
    transform:
      translate3d(
        18vw,
        12vh,
        0
      )
      scale(1.08);
  }

  68% {
    transform:
      translate3d(
        8vw,
        34vh,
        0
      )
      scale(1.02);
  }

  100% {
    transform:
      translate3d(
        24vw,
        48vh,
        0
      )
      scale(1.12);
  }

}


@keyframes easyprintAmbientTwo {

  0% {
    transform:
      translate3d(
        6vw,
        5vh,
        0
      )
      scale(1);
  }

  32% {
    transform:
      translate3d(
        -14vw,
        -13vh,
        0
      )
      scale(1.09);
  }

  70% {
    transform:
      translate3d(
        -4vw,
        -35vh,
        0
      )
      scale(0.98);
  }

  100% {
    transform:
      translate3d(
        -22vw,
        -48vh,
        0
      )
      scale(1.08);
  }

}


/* =========================================================
   2. HOW IT WORKS — OPEN JOURNEY
   ========================================================= */

.how-section {
  position: relative;

  padding:
    64px
    18px
    84px !important;

  overflow: hidden;
  isolation: isolate;
}


/*
   Local floating glow.
   Different from the fixed ambient blobs so the section
   has a little depth without becoming busy.
*/

.how-section::after {
  content: "";

  position: absolute;

  width: 270px;
  height: 270px;

  right: -135px;
  top: 30%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(76, 190, 226, 0.15),
      rgba(105, 174, 235, 0.07) 45%,
      transparent 72%
    );

  filter:
    blur(34px);

  pointer-events: none;
  z-index: -1;

  animation:
    easyprintHowGlow
    15s
    ease-in-out
    infinite
    alternate;
}


@keyframes easyprintHowGlow {

  from {
    transform:
      translate3d(
        0,
        -25px,
        0
      )
      scale(0.96);
  }

  to {
    transform:
      translate3d(
        -48px,
        55px,
        0
      )
      scale(1.12);
  }

}


.how-container {
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: 620px !important;

  margin:
    0 auto !important;
}


/* =========================================================
   HEADING
   ========================================================= */

.how-heading {
  max-width: 410px !important;

  margin:
    0 auto
    48px !important;

  text-align: center;
}


.how-kicker {
  margin-bottom:
    10px !important;

  color:
    #4391bd !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  letter-spacing:
    1.9px !important;
}


.how-heading .section-title {
  max-width: 370px;

  margin:
    0 auto
    12px !important;

  color:
    #174f83 !important;

  font-size:
    clamp(
      28px,
      7.5vw,
      34px
    ) !important;

  font-weight:
    800 !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -0.65px !important;
}


.how-subtitle {
  max-width: 335px !important;

  margin:
    0 auto !important;

  color:
    #60798d !important;

  font-size:
    12px !important;

  line-height:
    1.65 !important;
}


/* =========================================================
   JOURNEY TRACK
   ========================================================= */

.steps-grid {
  position: relative;

  width: min(
    100%,
    440px
  );

  margin:
    0 auto !important;

  padding:
    2px
    0
    4px !important;

  display:
    block !important;
}


/*
   Main journey line.
*/

.steps-grid::before {
  content: "";

  position: absolute;

  top: 22px;
  bottom: 34px;

  left: 24px;

  width: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(48, 175, 217, 0.20) 0%,
      rgba(42, 157, 220, 0.72) 24%,
      rgba(77, 193, 215, 0.38) 48%,
      rgba(46, 154, 218, 0.68) 72%,
      rgba(47, 157, 222, 0.13) 100%
    );

  background-size:
    100%
    180px;

  box-shadow:
    0 0 14px
    rgba(47, 157, 222, 0.13);

  animation:
    easyprintJourneyFlow
    5.4s
    linear
    infinite;

  pointer-events: none;
}


@keyframes easyprintJourneyFlow {

  from {
    background-position:
      0
      -180px;
  }

  to {
    background-position:
      0
      180px;
  }

}


/* =========================================================
   INDIVIDUAL STEPS
   ========================================================= */

.step-card {
  position: relative !important;

  min-height: 0 !important;

  margin:
    0 !important;

  padding:
    7px
    4px
    34px
    70px !important;

  display:
    block !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  text-align:
    left !important;

  overflow:
    visible !important;

  cursor:
    default;

  transition:
    transform
    0.28s
    ease;
}


.step-card:last-child {
  padding-bottom:
    6px !important;
}


/*
   Number node.
*/

.step-card::before {
  position: absolute !important;

  top: 0 !important;
  left: 5px !important;

  width: 40px !important;
  height: 40px !important;

  margin: 0 !important;

  display: grid !important;
  place-items: center !important;

  border:
    1px solid
    rgba(83, 181, 224, 0.24) !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      145deg,
      rgba(239, 250, 255, 0.98),
      rgba(204, 239, 253, 0.98)
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(37, 126, 181, 0.12),
    inset 0 0 0 1px
    rgba(255, 255, 255, 0.62) !important;

  color:
    #1c5f91 !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  transform:
    none !important;

  z-index: 2;
}


.step-card:nth-child(1)::before {
  content:
    "01" !important;
}


.step-card:nth-child(2)::before {
  content:
    "02" !important;
}


.step-card:nth-child(3)::before {
  content:
    "03" !important;
}


.step-card:nth-child(4)::before {
  content:
    "04" !important;
}


/*
   Soft halo around each node.
*/

.step-card::after {
  content: "";

  position: absolute;

  top: 7px;
  left: 12px;

  width: 27px;
  height: 27px;

  border-radius: 50%;

  background:
    rgba(49, 170, 220, 0.16);

  filter:
    blur(10px);

  opacity:
    0.68;

  pointer-events:
    none;

  z-index:
    0;

  animation:
    easyprintStepHalo
    5.2s
    ease-in-out
    infinite;
}


.step-card:nth-child(2)::after {
  animation-delay:
    -1.3s;
}


.step-card:nth-child(3)::after {
  animation-delay:
    -2.6s;
}


.step-card:nth-child(4)::after {
  animation-delay:
    -3.9s;
}


@keyframes easyprintStepHalo {

  0%,
  100% {
    opacity:
      0.30;

    transform:
      scale(0.82);
  }

  50% {
    opacity:
      0.78;

    transform:
      scale(1.20);
  }

}


/* =========================================================
   STEP COPY
   ========================================================= */

.step-card h3 {
  margin:
    0 0
    6px !important;

  color:
    #185486 !important;

  font-size:
    17px !important;

  font-weight:
    750 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    -0.18px;
}


.step-card p {
  max-width:
    320px;

  margin:
    0 !important;

  color:
    #667e91 !important;

  font-size:
    11.8px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}


/*
   Tiny responsive feedback without turning the journey
   into another set of cards.
*/

@media (hover: hover) {

  .step-card:hover {
    transform:
      translateX(
        5px
      ) !important;
  }

}


/* =========================================================
   TABLET / DESKTOP
   Keep the journey concept instead of reverting to cards.
   ========================================================= */

@media (min-width: 761px) {

  .how-section {
    padding:
      88px
      32px
      104px !important;
  }


  .how-container {
    max-width:
      760px !important;
  }


  .steps-grid {
    width:
      min(
        100%,
        560px
      ) !important;

    display:
      block !important;
  }


  .step-card {
    padding-left:
      82px !important;

    padding-bottom:
      42px !important;
  }


  .step-card::before {
    width:
      46px !important;

    height:
      46px !important;

    left:
      2px !important;

    font-size:
      13px !important;
  }


  .steps-grid::before {
    left:
      24px;
  }


  .step-card h3 {
    font-size:
      19px !important;
  }


  .step-card p {
    max-width:
      430px;

    font-size:
      12.5px !important;
  }

}


/*
   Earlier V14/V1 rules change the grid at large desktop.
   Keep this new open journey intentionally.
*/

@media (min-width: 1100px) {

  .steps-grid {
    display:
      block !important;

    grid-template-columns:
      none !important;
  }


  .step-card {
    padding:
      7px
      4px
      42px
      82px !important;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

  .how-section {
    padding-left:
      14px !important;

    padding-right:
      14px !important;
  }


  .step-card {
    padding-left:
      64px !important;
  }


  .step-card h3 {
    font-size:
      16px !important;
  }


  .step-card p {
    font-size:
      11.3px !important;
  }

}


/* =========================================================
   MOTION ACCESSIBILITY
   ========================================================= */

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

  body::before,
  body::after,
  .how-section::after,
  .steps-grid::before,
  .step-card::after {
    animation:
      none !important;
  }

}


/* =========================================================
   EASYPRINT PRICING EXPERIENCE V18
   Mobile center-focus carousel + service switch
   ========================================================= */


/* =========================================================
   SECTION RHYTHM
   ========================================================= */

.pricing-section {
  position: relative;

  padding:
    72px
    0
    88px !important;

  overflow:
    hidden !important;
}


.pricing-container {
  width:
    100% !important;

  max-width:
    620px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


/* Keep heading aligned with the mobile page gutters */

.pricing-heading,
.pricing-cache-note,
.printing-availability,
.pricing-color-note {
  width:
    calc(100% - 36px) !important;

  max-width:
    520px !important;
}


/* =========================================================
   SERVICE SWITCH
   ========================================================= */

.pricing-service-switch {
  width:
    calc(100% - 36px);

  max-width:
    330px;

  margin:
    0 auto
    34px;

  padding:
    4px;

  display:
    grid;

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

  gap:
    4px;

  border:
    1px solid
    rgba(56, 157, 211, 0.13);

  border-radius:
    16px;

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

  box-shadow:
    0 8px 25px
    rgba(24, 78, 131, 0.055);

  -webkit-backdrop-filter:
    blur(14px);

  backdrop-filter:
    blur(14px);
}


.pricing-service-switch-btn {
  position:
    relative;

  min-height:
    42px;

  padding:
    0
    14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    12px;

  background:
    transparent;

  color:
    #698198;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.75px;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    color
    0.28s
    ease,
    background
    0.28s
    ease,
    transform
    0.22s
    ease,
    box-shadow
    0.28s
    ease;
}


.pricing-service-switch-btn.is-active {
  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #27b9d0,
      #329ce0
    );

  box-shadow:
    0 8px 20px
    rgba(42, 158, 218, 0.22);
}


.pricing-service-switch-btn:active {
  transform:
    scale(0.97);
}


/* =========================================================
   SERVICE PANELS
   ========================================================= */

.pricing-service-block {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  opacity:
    1;

  transform:
    translateY(0);

  transition:
    opacity
    0.26s
    ease,
    transform
    0.26s
    ease;
}


.pricing-service-block[hidden] {
  display:
    none !important;
}


/*
   The switch already tells the user which service is active,
   so the old PRINT / PHOTOCOPY heading inside the panel is
   intentionally hidden to reduce repetition.
*/

.pricing-service-heading {
  display:
    none !important;
}


/* =========================================================
   CENTER-SNAP CAROUSEL
   ========================================================= */

.pricing-card-scroller {
  position:
    relative;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    18px
    calc((100vw - min(72vw, 252px)) / 2)
    24px !important;

  display:
    flex !important;

  grid-template-columns:
    none !important;

  align-items:
    center;

  gap:
    13px !important;

  overflow-x:
    auto !important;

  overflow-y:
    visible !important;

  scroll-snap-type:
    x mandatory !important;

  scroll-padding-inline:
    calc((100vw - min(72vw, 252px)) / 2);

  scroll-behavior:
    smooth;

  overscroll-behavior-inline:
    contain;

  -webkit-overflow-scrolling:
    touch;

  scrollbar-width:
    none;

  touch-action:
    pan-x;
}


.pricing-card-scroller::-webkit-scrollbar {
  display:
    none;
}


/* =========================================================
   PAPER CARDS
   ========================================================= */

.pricing-paper-card {
  position:
    relative;

  flex:
    0 0
    min(72vw, 252px) !important;

  width:
    min(72vw, 252px) !important;

  max-width:
    252px !important;

  min-height:
    212px !important;

  padding:
    18px !important;

  display:
    block !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(188, 220, 238, 0.78) !important;

  border-radius:
    22px !important;

  background:
    rgba(255, 255, 255, 0.74) !important;

  box-shadow:
    0 8px 22px
    rgba(24, 78, 131, 0.055) !important;

  opacity:
    0.62;

  transform:
    scale(0.91);

  transform-origin:
    center;

  scroll-snap-align:
    center !important;

  scroll-snap-stop:
    always;

  cursor:
    pointer;

  transition:
    transform
    0.34s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    opacity
    0.3s
    ease,
    border-color
    0.3s
    ease,
    background
    0.3s
    ease,
    box-shadow
    0.3s
    ease;
}


/*
   Very soft internal glow.
*/

.pricing-paper-card::before {
  content:
    "";

  position:
    absolute;

  width:
    150px;

  height:
    150px;

  top:
    -86px;

  right:
    -70px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(79, 191, 229, 0.17),
      rgba(76, 160, 226, 0.06) 48%,
      transparent 72%
    );

  opacity:
    0;

  transform:
    scale(0.75);

  pointer-events:
    none;

  transition:
    opacity
    0.35s
    ease,
    transform
    0.4s
    ease;
}


/* Focused center card */

.pricing-paper-card.is-focus {
  z-index:
    3;

  opacity:
    1;

  transform:
    scale(1.045);

  border-color:
    rgba(67, 169, 221, 0.35) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(224, 245, 255, 0.94)
    ) !important;

  box-shadow:
    0 18px 42px
    rgba(33, 115, 169, 0.14),
    0 3px 12px
    rgba(47, 157, 222, 0.06) !important;
}


.pricing-paper-card.is-focus::before {
  opacity:
    1;

  transform:
    scale(1);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.pricing-paper-card-header {
  position:
    relative;

  z-index:
    1;

  min-height:
    60px !important;

  margin:
    0 0
    13px !important;

  display:
    block !important;
}


.pricing-paper-card h4 {
  margin:
    0 0
    8px !important;

  color:
    #184e83 !important;

  font-size:
    21px !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -0.3px !important;

  transition:
    transform
    0.28s
    ease,
    color
    0.28s
    ease;
}


.pricing-paper-card.is-focus h4 {
  color:
    #135d92 !important;

  transform:
    translateY(-1px);
}


.pricing-paper-card .paper-badge,
.pricing-paper-card .badge-kiosk,
.pricing-paper-card .badge-byop {
  width:
    fit-content;

  max-width:
    100%;

  margin:
    0 !important;

  padding:
    5px
    8px !important;

  border:
    1px solid
    rgba(76, 165, 213, 0.15) !important;

  border-radius:
    999px !important;

  background:
    rgba(229, 246, 255, 0.80) !important;

  color:
    #3d7194 !important;

  font-size:
    8.5px !important;

  font-weight:
    650 !important;

  line-height:
    1.15 !important;

  white-space:
    nowrap;
}


/* =========================================================
   PRICE ROWS
   ========================================================= */

.pricing-simple-row {
  position:
    relative;

  z-index:
    1;

  min-height:
    51px !important;

  padding:
    10px
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  border-top:
    1px solid
    rgba(61, 157, 208, 0.10) !important;
}


.pricing-simple-row > div {
  display:
    block !important;

  min-width:
    0;
}


.pricing-type {
  color:
    #5a7286 !important;

  font-size:
    11px !important;

  font-weight:
    500 !important;

  line-height:
    1.3 !important;
}


.pricing-amount,
.price-range-dash {
  font-size:
    12px !important;

  line-height:
    1.3 !important;
}


.pricing-amount {
  color:
    #184e83 !important;

  font-weight:
    800 !important;
}


.price-range-dash {
  margin:
    0
    2px !important;

  color:
    #89a0b1 !important;

  font-weight:
    400 !important;
}


.pricing-paper-card.is-focus .pricing-amount {
  color:
    #126aa0 !important;
}


/* =========================================================
   CAROUSEL INDICATOR
   ========================================================= */

.pricing-carousel-indicator {
  min-height:
    18px;

  margin:
    5px auto
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;
}


.pricing-carousel-dot {
  width:
    5px;

  height:
    5px;

  padding:
    0;

  border:
    0;

  border-radius:
    999px;

  background:
    rgba(77, 127, 160, 0.24);

  cursor:
    pointer;

  transition:
    width
    0.28s
    ease,
    background
    0.28s
    ease,
    transform
    0.28s
    ease;
}


.pricing-carousel-dot.is-active {
  width:
    20px;

  background:
    linear-gradient(
      90deg,
      #25b9cd,
      #339be0
    );

  transform:
    scaleY(1.15);
}


/* =========================================================
   GLOBAL PRICE NOTE
   ========================================================= */

.pricing-color-note {
  margin:
    28px auto
    0 !important;

  color:
    #8193a2 !important;

  font-size:
    9.5px !important;

  line-height:
    1.55 !important;

  text-align:
    center;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.pricing-card-scroller .empty-prices {
  flex:
    0 0
    calc(100vw - 36px);

  width:
    calc(100vw - 36px);

  max-width:
    420px;

  margin:
    0 auto;

  min-height:
    100px;

  border-radius:
    18px;
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

  .pricing-heading,
  .pricing-cache-note,
  .printing-availability,
  .pricing-color-note {
    width:
      calc(100% - 28px) !important;
  }


  .pricing-service-switch {
    width:
      calc(100% - 28px);
  }


  .pricing-card-scroller {
    padding-left:
      calc(
        (
          100vw -
          min(74vw, 242px)
        ) / 2
      ) !important;

    padding-right:
      calc(
        (
          100vw -
          min(74vw, 242px)
        ) / 2
      ) !important;
  }


  .pricing-paper-card {
    flex-basis:
      min(74vw, 242px) !important;

    width:
      min(74vw, 242px) !important;
  }

}


/* =========================================================
   TABLET / DESKTOP
   Desktop is intentionally calmer and does not need the
   mobile center-card scaling treatment.
   ========================================================= */

@media (min-width: 761px) {

  .pricing-container {
    max-width:
      980px !important;

    padding:
      0 32px !important;
  }


  .pricing-card-scroller {
    width:
      100% !important;

    padding:
      18px
      0
      24px !important;

    justify-content:
      center;

    scroll-padding-inline:
      0;
  }


  .pricing-paper-card {
    flex:
      0 0
      min(28vw, 260px) !important;

    width:
      min(28vw, 260px) !important;

    max-width:
      260px !important;
  }

}


@media (min-width: 1000px) {

  .pricing-paper-card {
    opacity:
      1;

    transform:
      none;
  }


  .pricing-paper-card.is-focus {
    transform:
      translateY(-5px)
      scale(1.015);
  }

}


/* =========================================================
   MOTION ACCESSIBILITY
   ========================================================= */

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

  .pricing-card-scroller {
    scroll-behavior:
      auto !important;
  }


  .pricing-paper-card,
  .pricing-paper-card::before,
  .pricing-carousel-dot,
  .pricing-service-switch-btn {
    transition:
      none !important;
  }

}


/* =========================================================
   EASYPRINT PRICING REFINEMENT V19
   - calmer service switch text
   - lighter focused card
   - smaller inactive cards
   ========================================================= */


/* =========================================================
   SERVICE SWITCH POLISH
   ========================================================= */

.pricing-service-switch {
  max-width:
    296px !important;

  margin:
    0 auto
    30px !important;

  padding:
    5px !important;

  border:
    1px solid
    rgba(77, 165, 214, 0.14) !important;

  border-radius:
    18px !important;

  background:
    rgba(255, 255, 255, 0.68) !important;

  box-shadow:
    0 10px 28px
    rgba(24, 78, 131, 0.05) !important;

  -webkit-backdrop-filter:
    blur(16px);

  backdrop-filter:
    blur(16px);
}


.pricing-service-switch-btn {
  min-height:
    40px !important;

  padding:
    0 12px !important;

  border-radius:
    14px !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  letter-spacing:
    0.15px !important;

  text-transform:
    none !important;

  color:
    #7890a2 !important;
}


.pricing-service-switch-btn.is-active {
  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #2dc0d5,
      #349fe2
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(44, 167, 220, 0.18) !important;
}


/* =========================================================
   CAROUSEL SPACING
   ========================================================= */

.pricing-card-scroller {
  padding-top:
    20px !important;

  padding-bottom:
    22px !important;

  gap:
    12px !important;
}


/* =========================================================
   INACTIVE VS ACTIVE CARD EMPHASIS
   ========================================================= */

.pricing-paper-card {
  opacity:
    0.46 !important;

  transform:
    scale(0.84) !important;

  border-color:
    rgba(198, 223, 236, 0.74) !important;

  background:
    rgba(255, 255, 255, 0.56) !important;

  box-shadow:
    0 5px 14px
    rgba(24, 78, 131, 0.035) !important;
}


.pricing-paper-card.is-focus {
  opacity:
    1 !important;

  transform:
    scale(1.075) !important;

  border-color:
    rgba(77, 183, 229, 0.42) !important;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.995),
      rgba(244, 252, 255, 0.995) 45%,
      rgba(228, 247, 255, 0.985) 100%
    ) !important;

  box-shadow:
    0 22px 48px
    rgba(31, 112, 165, 0.14),
    0 8px 18px
    rgba(56, 172, 221, 0.08) !important;
}


.pricing-paper-card::before {
  background:
    radial-gradient(
      circle,
      rgba(91, 201, 235, 0.20),
      rgba(98, 172, 235, 0.08) 46%,
      transparent 72%
    ) !important;
}


.pricing-paper-card.is-focus::before {
  opacity:
    1 !important;

  transform:
    scale(1.08) !important;
}


/* =========================================================
   TEXT EMPHASIS INSIDE ACTIVE CARD
   ========================================================= */

.pricing-paper-card h4 {
  color:
    #295b82 !important;

  transition:
    transform
    0.28s ease,
    color
    0.28s ease,
    opacity
    0.28s ease;
}


.pricing-paper-card:not(.is-focus) h4 {
  opacity:
    0.78;
}


.pricing-paper-card.is-focus h4 {
  color:
    #125f96 !important;

  transform:
    translateY(-1px);
}


.pricing-type {
  transition:
    color
    0.28s ease,
    opacity
    0.28s ease;
}


.pricing-paper-card:not(.is-focus) .pricing-type,
.pricing-paper-card:not(.is-focus) .pricing-amount,
.pricing-paper-card:not(.is-focus) .price-range-dash,
.pricing-paper-card:not(.is-focus) .paper-badge,
.pricing-paper-card:not(.is-focus) .badge-kiosk,
.pricing-paper-card:not(.is-focus) .badge-byop {
  opacity:
    0.78;
}


.pricing-paper-card.is-focus .pricing-type {
  color:
    #55748c !important;
}

.pricing-paper-card.is-focus .pricing-amount {
  color:
    #0f6ca3 !important;
}


/* =========================================================
   BADGE CLEANUP
   ========================================================= */

.pricing-paper-card .paper-badge,
.pricing-paper-card .badge-kiosk,
.pricing-paper-card .badge-byop {
  font-size:
    8.5px !important;

  font-weight:
    650 !important;

  letter-spacing:
    0 !important;
}


/* =========================================================
   INDICATOR
   ========================================================= */

.pricing-carousel-indicator {
  margin-top:
    4px !important;
}

.pricing-carousel-dot {
  width:
    6px !important;

  height:
    6px !important;

  background:
    rgba(96, 136, 164, 0.24) !important;
}

.pricing-carousel-dot.is-active {
  width:
    22px !important;

  background:
    linear-gradient(
      90deg,
      #27bdd2,
      #339ee1
    ) !important;
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .pricing-service-switch-btn {
    font-size:
      10.5px !important;
  }

  .pricing-paper-card {
    transform:
      scale(0.82) !important;
  }

  .pricing-paper-card.is-focus {
    transform:
      scale(1.06) !important;
  }

}


/* =========================================================
   EASYPRINT SECTION TITLE SYSTEM V20
   Branded cyan → blue text treatment
   ========================================================= */


/* Shared gradient treatment */

.ep-gradient-title {
  display: block;

  width: fit-content;
  max-width: 100%;

  margin-left: auto;
  margin-right: auto;

  color: #258fca;

  background:
    linear-gradient(
      105deg,
      #19bacb 0%,
      #24add4 32%,
      #3399dc 62%,
      #2179b8 100%
    );

  background-size:
    180% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  text-shadow:
    0 5px 14px
    rgba(37, 129, 184, 0.09);

  animation:
    easyprintTitleGradient
    10s
    ease-in-out
    infinite
    alternate;
}


/* Normal navy part of split headings */

.section-title-base {
  display:
    block;

  color:
    #184e83;

  -webkit-text-fill-color:
    #184e83;
}


/* =========================================================
   HOW IT WORKS
   ========================================================= */

.how-heading .section-title {
  display:
    block;

  text-align:
    center;

  letter-spacing:
    -0.7px !important;
}


.how-heading .section-title-base,
.how-heading .ep-gradient-title {
  line-height:
    1.08;
}


/* Small breathing space between the two title lines */

.how-heading .ep-gradient-title {
  margin-top:
    2px;
}


/* =========================================================
   PRICING
   ========================================================= */

.pricing-title.ep-gradient-title {
  display:
    block;

  width:
    fit-content;

  max-width:
    calc(100% - 20px);

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -0.75px !important;

  text-align:
    center;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-card h2 .section-title-base,
.about-card h2 .ep-gradient-title {
  display:
    block;
}


.about-card h2 .ep-gradient-title {
  width:
    fit-content;

  margin:
    2px 0 0 !important;
}


/*
   The about layout is left-aligned, unlike How/Pricing.
   Do not force its gradient text to the center.
*/

.about-card h2 .ep-gradient-title {
  margin-left:
    0 !important;

  margin-right:
    0 !important;
}


/* =========================================================
   SUBTLE MOVEMENT
   ========================================================= */

@keyframes easyprintTitleGradient {

  0% {
    background-position:
      0% 50%;
  }

  100% {
    background-position:
      100% 50%;
  }

}


/* =========================================================
   PHONE POLISH
   ========================================================= */

@media (max-width: 480px) {

  .how-heading .section-title {
    font-size:
      29px !important;
  }


  .pricing-title.ep-gradient-title {
    max-width:
      360px;

    font-size:
      30px !important;
  }


  .about-card h2 {
    line-height:
      1.08 !important;
  }

}


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

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

  .ep-gradient-title {
    animation:
      none !important;

    background-position:
      50% 50%;
  }

}


/* =========================================================
   EASYPRINT PRICING TOP POLISH V21
   - darker pricing title
   - compact availability notice
   - cleaner tab-style Print / Photocopy switch
   ========================================================= */


/* =========================================================
   1. DARKER PRICING TITLE
   ========================================================= */

.pricing-title.ep-gradient-title {
  background:
    linear-gradient(
      105deg,
      #189dcb 0%,
      #248cc7 34%,
      #237bbb 64%,
      #1b5f9a 100%
    ) !important;

  background-size:
    180% 100% !important;

  text-shadow:
    0 4px 10px
    rgba(28, 103, 156, 0.08) !important;
}


/* =========================================================
   2. COMPACT PRINTING AVAILABILITY
   ========================================================= */

.printing-availability {
  width:
    calc(100% - 36px) !important;

  max-width:
    420px !important;

  margin:
    0 auto
    20px !important;

  padding:
    0 !important;

  display:
    flex !important;

  justify-content:
    center !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


.printing-availability-notice {
  position:
    relative;

  width:
    100% !important;

  padding:
    11px 14px 11px 38px !important;

  border:
    1px solid
    rgba(75, 162, 211, 0.14) !important;

  border-radius:
    14px !important;

  background:
    rgba(255, 255, 255, 0.58) !important;

  box-shadow:
    0 6px 18px
    rgba(24, 78, 131, 0.035) !important;

  text-align:
    left !important;

  -webkit-backdrop-filter:
    blur(12px);

  backdrop-filter:
    blur(12px);
}


.printing-availability-notice::before {
  content:
    "i";

  position:
    absolute;

  left:
    13px;

  top:
    50%;

  width:
    16px;

  height:
    16px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #2bb8d0,
      #3098db
    );

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  transform:
    translateY(-50%);
}


.availability-label {
  display:
    block !important;

  margin:
    0 0 2px !important;

  color:
    #236893 !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    0.35px !important;

  text-transform:
    uppercase;
}


.printing-availability-notice p {
  margin:
    0 !important;

  color:
    #5d768b !important;

  font-size:
    10px !important;

  line-height:
    1.45 !important;
}


/* =========================================================
   3. CLEANER TAB-STYLE SERVICE SWITCH
   ========================================================= */

.pricing-service-switch {
  width:
    fit-content !important;

  max-width:
    none !important;

  margin:
    0 auto
    22px !important;

  padding:
    0 2px !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    26px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  backdrop-filter:
    none !important;
}


.pricing-service-switch-btn {
  position:
    relative !important;

  min-height:
    34px !important;

  padding:
    0 2px 8px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #89a0b0 !important;

  font-size:
    17px !important;

  font-weight:
    650 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    -0.15px !important;

  text-transform:
    none !important;

  transition:
    color 0.26s ease,
    transform 0.22s ease,
    opacity 0.22s ease;
}


.pricing-service-switch-btn::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    0;

  width:
    100%;

  height:
    3px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #25bdd1,
      #329de0
    );

  opacity:
    0;

  transform:
    scaleX(0.45);

  transition:
    opacity 0.26s ease,
    transform 0.26s ease;
}


.pricing-service-switch-btn.is-active {
  color:
    #184e83 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transform:
    translateY(-1px);
}


.pricing-service-switch-btn.is-active::after {
  opacity:
    1;

  transform:
    scaleX(1);
}


.pricing-service-switch-btn:active {
  transform:
    translateY(0) scale(0.98);
}


/* =========================================================
   4. SPACING POLISH
   ========================================================= */

.pricing-heading {
  margin-bottom:
    18px !important;
}

.pricing-subtitle {
  margin-top:
    0 !important;
}


/* =========================================================
   5. SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .pricing-title.ep-gradient-title {
    font-size:
      29px !important;
  }

  .printing-availability {
    max-width:
      390px !important;

    margin-bottom:
      18px !important;
  }

  .printing-availability-notice {
    padding:
      10px 13px 10px 36px !important;
  }

  .pricing-service-switch {
    gap:
      22px !important;
  }

  .pricing-service-switch-btn {
    font-size:
      16px !important;
    padding-bottom:
      7px !important;
  }

}


/* =========================================================
   6. VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

  .pricing-service-switch {
    gap:
      18px !important;
  }

  .pricing-service-switch-btn {
    font-size:
      15px !important;
  }

}


/* =========================================================
   EASYPRINT PRICING CORRECTION V22
   - mobile-safe gradient title
   - availability moved below cards
   - availability icon removed
   ========================================================= */


/* =========================================================
   PRICING TITLE — MOBILE SAFE
   ========================================================= */

.pricing-title {
  background:
    none !important;

  color:
    #184e83 !important;

  -webkit-text-fill-color:
    initial !important;

  text-align:
    center !important;
}


.pricing-title-gradient {
  display:
    inline;

  color:
    #1c75ad;

  background-image:
    linear-gradient(
      105deg,
      #159dbf 0%,
      #188bc2 32%,
      #2079b5 65%,
      #185c96 100%
    );

  background-size:
    180% 100%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  animation:
    easyprintTitleGradient
    10s
    ease-in-out
    infinite
    alternate;
}


/* =========================================================
   AVAILABILITY — NOW SECONDARY INFO BELOW CAROUSEL
   ========================================================= */

.printing-availability {
  width:
    calc(100% - 40px) !important;

  max-width:
    430px !important;

  margin:
    28px auto
    0 !important;

  padding:
    0 !important;

  display:
    block !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


.printing-availability-notice {
  width:
    100% !important;

  padding:
    11px 14px !important;

  border:
    1px solid
    rgba(74, 158, 205, 0.12) !important;

  border-radius:
    13px !important;

  background:
    rgba(255, 255, 255, 0.43) !important;

  box-shadow:
    none !important;

  text-align:
    center !important;

  -webkit-backdrop-filter:
    blur(10px);

  backdrop-filter:
    blur(10px);
}


/* Remove previous information icon */

.printing-availability-notice::before {
  content:
    none !important;

  display:
    none !important;
}


.availability-label {
  display:
    block !important;

  margin:
    0 0
    3px !important;

  color:
    #397493 !important;

  font-size:
    9px !important;

  font-weight:
    750 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    0.35px !important;

  text-transform:
    none !important;
}


.printing-availability-notice p {
  max-width:
    360px;

  margin:
    0 auto !important;

  color:
    #718491 !important;

  font-size:
    9.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;
}


/* Global pricing footnote follows availability */

.pricing-color-note {
  margin:
    12px auto
    0 !important;
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 480px) {

  .pricing-title {
    font-size:
      29px !important;
  }


  .printing-availability {
    width:
      calc(100% - 36px) !important;

    margin-top:
      24px !important;
  }

}


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

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

  .pricing-title-gradient {
    animation:
      none !important;

    background-position:
      50% 50%;
  }

}


/* =========================================================
   EASYPRINT PRICING CONTRAST PASS V23
   Selective contrast only — no layout changes
   ========================================================= */


/* =========================================================
   SECTION BACKGROUND
   Slightly richer blue atmosphere
   ========================================================= */

.pricing-section {
  background:
    linear-gradient(
      180deg,
      rgba(242, 250, 255, 0.92) 0%,
      rgba(221, 242, 253, 0.94) 48%,
      rgba(230, 247, 255, 0.94) 100%
    ) !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.pricing-kicker {
  color:
    #4089b4 !important;
}


.pricing-title-gradient {
  background-image:
    linear-gradient(
      105deg,
      #1099ba 0%,
      #187fb7 38%,
      #1d6da7 68%,
      #154f88 100%
    ) !important;
}


.pricing-subtitle {
  color:
    #536f84 !important;
}


/* =========================================================
   PRINT / PHOTOCOPY TABS
   ========================================================= */

.pricing-service-switch-btn {
  color:
    #7890a1 !important;
}


.pricing-service-switch-btn.is-active {
  color:
    #124f81 !important;

  font-weight:
    750 !important;
}


.pricing-service-switch-btn::after {
  height:
    3px !important;

  background:
    linear-gradient(
      90deg,
      #16b3ca,
      #268ed2
    ) !important;

  box-shadow:
    0 3px 8px
    rgba(38, 142, 210, 0.15);
}


/* =========================================================
   INACTIVE CARDS
   Still visible, but clearly secondary
   ========================================================= */

.pricing-paper-card {
  opacity:
    0.50 !important;

  background:
    rgba(238, 247, 252, 0.68) !important;

  border-color:
    rgba(167, 203, 222, 0.48) !important;

  box-shadow:
    0 4px 12px
    rgba(24, 78, 131, 0.025) !important;
}


/* =========================================================
   ACTIVE / CENTER CARD
   Bright white focal surface
   ========================================================= */

.pricing-paper-card.is-focus {
  opacity:
    1 !important;

  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(250, 254, 255, 1) 44%,
      rgba(238, 249, 255, 1) 100%
    ) !important;

  border:
    1px solid
    rgba(48, 157, 214, 0.38) !important;

  box-shadow:
    0 24px 52px
    rgba(24, 91, 142, 0.15),
    0 8px 20px
    rgba(37, 155, 210, 0.08) !important;
}


/* Slight blue light inside selected card */

.pricing-paper-card.is-focus::before {
  background:
    radial-gradient(
      circle,
      rgba(61, 185, 225, 0.20),
      rgba(76, 162, 221, 0.07) 45%,
      transparent 72%
    ) !important;
}


/* =========================================================
   CARD TYPOGRAPHY
   ========================================================= */

.pricing-paper-card h4 {
  color:
    #2d6388 !important;
}


.pricing-paper-card.is-focus h4 {
  color:
    #0f578c !important;
}


.pricing-type {
  color:
    #60788a !important;
}


.pricing-paper-card.is-focus .pricing-type {
  color:
    #425f75 !important;
}


.pricing-amount {
  color:
    #225d88 !important;
}


.pricing-paper-card.is-focus .pricing-amount {
  color:
    #075f96 !important;

  font-weight:
    800 !important;
}


/* Keep inactive content subdued but not unreadable */

.pricing-paper-card:not(.is-focus) h4,
.pricing-paper-card:not(.is-focus) .pricing-type,
.pricing-paper-card:not(.is-focus) .pricing-amount,
.pricing-paper-card:not(.is-focus) .paper-badge {
  opacity:
    0.72 !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.pricing-paper-card.is-focus .paper-badge,
.pricing-paper-card.is-focus .badge-kiosk,
.pricing-paper-card.is-focus .badge-byop {
  background:
    #e2f4fd !important;

  border-color:
    #c1e5f7 !important;

  color:
    #25668f !important;
}


/* =========================================================
   CAROUSEL POSITION INDICATOR
   ========================================================= */

.pricing-carousel-dot {
  background:
    rgba(75, 113, 139, 0.20) !important;
}


.pricing-carousel-dot.is-active {
  background:
    linear-gradient(
      90deg,
      #18b4cb,
      #258ed1
    ) !important;

  box-shadow:
    0 3px 8px
    rgba(39, 143, 205, 0.14);
}


/* =========================================================
   AVAILABILITY — SECONDARY INFO
   ========================================================= */

.printing-availability-notice {
  background:
    rgba(255, 255, 255, 0.48) !important;

  border-color:
    rgba(113, 166, 195, 0.16) !important;
}


.availability-label {
  color:
    #47758f !important;
}


.printing-availability-notice p {
  color:
    #70828f !important;
}


/* =========================================================
   GLOBAL NOTE
   ========================================================= */

.pricing-color-note {
  color:
    #738693 !important;
}


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

@media (max-width: 480px) {

  .pricing-paper-card.is-focus {
    box-shadow:
      0 20px 44px
      rgba(24, 91, 142, 0.14),
      0 7px 16px
      rgba(37, 155, 210, 0.07) !important;
  }

}


/* =========================================================
   EASYPRINT ABOUT EDITORIAL V24
   Open storytelling layout — no giant enclosing card
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.about-section {
  position:
    relative;

  padding:
    86px
    18px
    102px !important;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    linear-gradient(
      180deg,
      rgba(248, 253, 255, 0.90) 0%,
      rgba(232, 247, 255, 0.84) 100%
    ) !important;
}


/* Soft local ambient light */

.about-section::before {
  content:
    "";

  position:
    absolute;

  width:
    320px;

  height:
    320px;

  left:
    -170px;

  top:
    30%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(51, 179, 221, 0.17),
      rgba(80, 157, 225, 0.07) 48%,
      transparent 72%
    );

  filter:
    blur(42px);

  z-index:
    -1;

  pointer-events:
    none;

  animation:
    easyprintAboutGlow
    18s
    ease-in-out
    infinite
    alternate;
}


@keyframes easyprintAboutGlow {

  from {
    transform:
      translate3d(
        -10px,
        -20px,
        0
      )
      scale(0.95);
  }

  to {
    transform:
      translate3d(
        75px,
        90px,
        0
      )
      scale(1.15);
  }

}


/* =========================================================
   REMOVE GIANT CARD
   ========================================================= */

.about-container {
  width:
    100%;

  max-width:
    620px !important;

  margin:
    0 auto !important;
}


.about-card {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  backdrop-filter:
    none !important;
}


/* =========================================================
   HEADING
   ========================================================= */

.about-heading {
  max-width:
    470px !important;

  margin:
    0 0
    54px !important;

  padding:
    0 4px;

  text-align:
    left;
}


.about-kicker {
  margin-bottom:
    10px !important;

  color:
    #438db6 !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  letter-spacing:
    1.8px !important;
}


.about-heading h2 {
  max-width:
    390px;

  margin:
    0 0
    18px !important;

  color:
    #184e83 !important;

  font-size:
    31px !important;

  font-weight:
    800 !important;

  line-height:
    1.07 !important;

  letter-spacing:
    -0.65px !important;
}


.about-heading h2 .section-title-base {
  display:
    block;
}


.about-heading h2 .ep-gradient-title {
  display:
    block;

  width:
    fit-content;

  margin:
    2px 0
    0 !important;
}


.about-intro {
  max-width:
    430px !important;

  margin:
    0 !important;

  color:
    #557287 !important;

  font-size:
    12.5px !important;

  line-height:
    1.75 !important;
}


/* Small decorative accent */

.about-heading::after {
  content:
    "";

  display:
    block;

  width:
    52px;

  height:
    3px;

  margin-top:
    22px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #24b8ce,
      #2e91d7
    );

  opacity:
    0.82;
}


/* =========================================================
   STORY TRAIL
   ========================================================= */

.about-points {
  position:
    relative;

  width:
    min(
      100%,
      520px
    );

  margin:
    0 auto !important;

  padding:
    4px
    0;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    42px !important;
}


/*
   Very subtle central trail.
*/

.about-points::before {
  content:
    "";

  position:
    absolute;

  top:
    26px;

  bottom:
    30px;

  left:
    30px;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      rgba(45, 159, 214, 0.10),
      rgba(45, 159, 214, 0.38),
      rgba(45, 159, 214, 0.10)
    );

  pointer-events:
    none;
}


/* =========================================================
   INDIVIDUAL STORY POINT
   ========================================================= */

.about-point {
  position:
    relative;

  width:
    calc(100% - 10px);

  min-height:
    116px;

  margin:
    0 !important;

  padding:
    20px
    10px
    20px
    82px !important;

  display:
    block !important;

  border:
    0 !important;

  background:
    transparent !important;

  overflow:
    visible;
}


/*
   Stagger the middle item slightly.
   Keeps it editorial without becoming messy.
*/

.about-point:nth-child(2) {
  margin-left:
    22px !important;
}


.about-point:nth-child(3) {
  margin-left:
    4px !important;
}


/* =========================================================
   LARGE GHOST NUMBERS
   ========================================================= */

.about-point-number {
  position:
    absolute;

  left:
    0;

  top:
    5px;

  width:
    auto;

  color:
    rgba(46, 151, 205, 0.13) !important;

  font-size:
    57px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    -3px !important;

  pointer-events:
    none;

  user-select:
    none;

  z-index:
    0;
}


/*
   Small active dot placed on the story trail.
*/

.about-point::before {
  content:
    "";

  position:
    absolute;

  left:
    26px;

  top:
    55px;

  width:
    9px;

  height:
    9px;

  border:
    2px solid
    rgba(255, 255, 255, 0.96);

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #27bad0,
      #318fd3
    );

  box-shadow:
    0 0 0 5px
    rgba(52, 157, 211, 0.08),
    0 6px 14px
    rgba(40, 131, 183, 0.12);

  z-index:
    2;
}


/* =========================================================
   COPY
   ========================================================= */

.about-point > div {
  position:
    relative;

  z-index:
    1;
}


.about-point h3 {
  margin:
    0 0
    7px !important;

  color:
    #1d5c89 !important;

  font-size:
    17px !important;

  font-weight:
    750 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    -0.2px;
}


.about-point p {
  max-width:
    350px;

  margin:
    0 !important;

  color:
    #617a8d !important;

  font-size:
    11.8px !important;

  line-height:
    1.65 !important;
}


/* =========================================================
   TINY INTERACTION
   ========================================================= */

.about-point {
  transition:
    transform
    0.28s
    ease;
}


@media (hover: hover) {

  .about-point:hover {
    transform:
      translateX(
        5px
      );
  }

}


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

@media (max-width: 480px) {

  .about-section {
    padding:
      76px
      18px
      92px !important;
  }


  .about-heading {
    margin-bottom:
      46px !important;
  }


  .about-heading h2 {
    font-size:
      29px !important;
  }


  .about-intro {
    font-size:
      12px !important;
  }


  .about-points {
    gap:
      34px !important;
  }


  .about-point {
    min-height:
      108px;

    padding:
      18px
      6px
      18px
      76px !important;
  }


  .about-point:nth-child(2) {
    margin-left:
      16px !important;
  }


  .about-point-number {
    font-size:
      52px !important;
  }


  .about-point h3 {
    font-size:
      16px !important;
  }


  .about-point p {
    font-size:
      11.5px !important;
  }

}


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

@media (min-width: 761px) {

  .about-section {
    padding:
      104px
      32px
      120px !important;
  }


  .about-container {
    max-width:
      820px !important;
  }


  .about-heading {
    max-width:
      560px !important;
  }


  .about-heading h2 {
    font-size:
      38px !important;
  }


  .about-points {
    width:
      min(
        100%,
        660px
      );
  }


  .about-point {
    padding-left:
      102px !important;
  }


  .about-point-number {
    font-size:
      68px !important;
  }


  .about-point::before {
    left:
      33px;
  }


  .about-points::before {
    left:
      37px;
  }


  .about-point h3 {
    font-size:
      19px !important;
  }


  .about-point p {
    max-width:
      470px;

    font-size:
      12.5px !important;
  }

}


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

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

  .about-section::before,
  .about-point {
    animation:
      none !important;

    transition:
      none !important;
  }

}


/* =========================================================
   EASYPRINT STORY SECTIONS V25
   HOW = editorial numbered story
   ABOUT = animated check list
   ========================================================= */


/* =========================================================
   HOW IT WORKS — EDITORIAL VERSION
   ========================================================= */

.how-section {
  position:
    relative;

  padding:
    82px
    18px
    96px !important;

  overflow:
    hidden;

  isolation:
    isolate;
}


.how-container {
  width:
    100%;

  max-width:
    620px !important;

  margin:
    0 auto !important;
}


/* Heading now follows About's editorial alignment */

.how-heading {
  max-width:
    470px !important;

  margin:
    0 0
    52px !important;

  padding:
    0 4px;

  text-align:
    left !important;
}


.how-kicker {
  display:
    block;

  margin-bottom:
    10px !important;

  color:
    #438db6 !important;

  font-size:
    9px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    1.8px !important;
}


.how-heading .section-title {
  max-width:
    390px;

  margin:
    0 0
    16px !important;

  text-align:
    left !important;

  font-size:
    31px !important;

  font-weight:
    800 !important;

  line-height:
    1.07 !important;

  letter-spacing:
    -0.65px !important;
}


.how-heading .section-title-base,
.how-heading .ep-gradient-title {
  margin-left:
    0 !important;

  margin-right:
    0 !important;

  text-align:
    left !important;
}


.how-subtitle {
  max-width:
    410px !important;

  margin:
    0 !important;

  color:
    #587488 !important;

  font-size:
    12px !important;

  line-height:
    1.7 !important;

  text-align:
    left !important;
}


/* Little branded accent */

.how-heading::after {
  content:
    "";

  display:
    block;

  width:
    52px;

  height:
    3px;

  margin-top:
    21px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      #24b8ce,
      #2e91d7
    );

  opacity:
    0.82;
}


/* =========================================================
   HOW STORY LIST
   ========================================================= */

.steps-grid {
  position:
    relative;

  width:
    min(100%, 520px) !important;

  margin:
    0 auto !important;

  padding:
    4px 0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    34px !important;
}


/* subtle process trail */

.steps-grid::before {
  content:
    "";

  position:
    absolute;

  top:
    32px;

  bottom:
    36px;

  left:
    30px !important;

  width:
    1px !important;

  border-radius:
    99px;

  background:
    linear-gradient(
      180deg,
      rgba(40, 158, 212, 0.08),
      rgba(40, 158, 212, 0.35),
      rgba(40, 158, 212, 0.08)
    ) !important;

  box-shadow:
    none !important;

  animation:
    none !important;

  pointer-events:
    none;
}


/* Individual step */

.step-card {
  position:
    relative !important;

  width:
    calc(100% - 8px);

  min-height:
    106px !important;

  margin:
    0 !important;

  padding:
    17px
    8px
    17px
    80px !important;

  display:
    block !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  overflow:
    visible !important;

  text-align:
    left !important;
}


/* Very slight editorial stagger */

.step-card:nth-child(2),
.step-card:nth-child(4) {
  margin-left:
    14px !important;
}


/* Ghost step numbers */

.step-card::before {
  position:
    absolute !important;

  top:
    3px !important;

  left:
    0 !important;

  width:
    auto !important;

  height:
    auto !important;

  margin:
    0 !important;

  display:
    block !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    rgba(40, 143, 196, 0.14) !important;

  font-size:
    53px !important;

  font-weight:
    800 !important;

  line-height:
    1 !important;

  letter-spacing:
    -3px !important;

  transform:
    none !important;
}


.step-card:nth-child(1)::before {
  content:
    "01" !important;
}

.step-card:nth-child(2)::before {
  content:
    "02" !important;
}

.step-card:nth-child(3)::before {
  content:
    "03" !important;
}

.step-card:nth-child(4)::before {
  content:
    "04" !important;
}


/* Trail dot */

.step-card::after {
  content:
    "";

  position:
    absolute;

  top:
    53px;

  left:
    26px;

  width:
    8px;

  height:
    8px;

  border:
    2px solid
    rgba(255, 255, 255, 0.96);

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #27bad0,
      #318fd3
    );

  box-shadow:
    0 0 0 5px
    rgba(52, 157, 211, 0.07);

  filter:
    none !important;

  opacity:
    1 !important;

  animation:
    none !important;

  z-index:
    2;
}


.step-card h3 {
  margin:
    0 0
    7px !important;

  color:
    #1d5c89 !important;

  font-size:
    16px !important;

  font-weight:
    750 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    -0.2px;
}


.step-card p {
  max-width:
    350px;

  margin:
    0 !important;

  color:
    #617a8d !important;

  font-size:
    11.5px !important;

  line-height:
    1.65 !important;
}


/* =========================================================
   ABOUT — CLEAN CHECKLIST
   ========================================================= */

/*
   Keep V24's open heading and ambient treatment.
   Change only the lower story points into a checklist.
*/

.about-points {
  position:
    relative;

  width:
    min(100%, 500px);

  margin:
    0 auto !important;

  padding:
    2px 0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    12px !important;
}


/* vertical line behind the check nodes */

.about-points::before {
  content:
    "";

  position:
    absolute;

  top:
    23px;

  bottom:
    23px;

  left:
    16px !important;

  width:
    1px !important;

  background:
    linear-gradient(
      180deg,
      rgba(46, 157, 211, 0.08),
      rgba(46, 157, 211, 0.27),
      rgba(46, 157, 211, 0.08)
    ) !important;

  pointer-events:
    none;
}


/* remove V24 ghost-number treatment */

.about-point-number {
  display:
    none !important;
}


.about-point,
.about-point:nth-child(2),
.about-point:nth-child(3) {
  position:
    relative;

  width:
    100% !important;

  min-height:
    86px !important;

  margin:
    0 !important;

  padding:
    15px
    6px
    15px
    54px !important;

  display:
    block !important;

  border:
    0 !important;

  background:
    transparent !important;

  transform:
    none !important;

  overflow:
    visible;
}


/* =========================================================
   ABOUT CHECK CIRCLE
   ========================================================= */

.about-point::before {
  content:
    "";

  position:
    absolute;

  top:
    17px;

  left:
    2px;

  width:
    28px;

  height:
    28px;

  border:
    1px solid
    rgba(71, 164, 211, 0.25);

  border-radius:
    50%;

  background:
    rgba(244, 252, 255, 0.90);

  box-shadow:
    0 5px 14px
    rgba(24, 78, 131, 0.06);

  opacity:
    1;

  transform:
    scale(1);

  transition:
    background
    0.34s ease,
    border-color
    0.34s ease,
    box-shadow
    0.34s ease,
    transform
    0.34s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


/* actual tick */

.about-point::after {
  content:
    "";

  position:
    absolute;

  top:
    23px;

  left:
    12px;

  width:
    6px;

  height:
    11px;

  border-right:
    2px solid
    #ffffff;

  border-bottom:
    2px solid
    #ffffff;

  opacity:
    0;

  transform:
    rotate(45deg)
    scale(0.25);

  transform-origin:
    center;

  transition:
    opacity
    0.22s ease,
    transform
    0.38s
    cubic-bezier(
      0.22,
      1.6,
      0.36,
      1
    );

  z-index:
    3;
}


/* JS adds this one by one */

.about-point.is-checked::before {
  border-color:
    transparent;

  background:
    linear-gradient(
      135deg,
      #28bdd0,
      #2f92d8
    );

  box-shadow:
    0 8px 18px
    rgba(38, 150, 207, 0.20),
    0 0 0 6px
    rgba(48, 164, 216, 0.07);

  transform:
    scale(1.08);
}


.about-point.is-checked::after {
  opacity:
    1;

  transform:
    rotate(45deg)
    scale(1);
}


/* tiny content response as each point completes */

.about-point > div {
  position:
    relative;

  transition:
    transform
    0.32s ease,
    opacity
    0.32s ease;
}


.about-point.is-checked > div {
  transform:
    translateX(3px);
}


.about-point h3 {
  margin:
    0 0
    5px !important;

  color:
    #225e88 !important;

  font-size:
    15px !important;

  font-weight:
    750 !important;

  line-height:
    1.3 !important;
}


.about-point p {
  max-width:
    370px;

  margin:
    0 !important;

  color:
    #667e90 !important;

  font-size:
    11.5px !important;

  line-height:
    1.6 !important;
}


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

@media (max-width: 480px) {

  .how-section {
    padding:
      76px
      18px
      90px !important;
  }


  .how-heading {
    margin-bottom:
      44px !important;
  }


  .how-heading .section-title {
    font-size:
      29px !important;
  }


  .steps-grid {
    gap:
      29px !important;
  }


  .step-card {
    padding-left:
      74px !important;
  }


  .step-card:nth-child(2),
  .step-card:nth-child(4) {
    margin-left:
      10px !important;
  }


  .step-card::before {
    font-size:
      49px !important;
  }


  .about-point {
    padding-left:
      50px !important;
  }

}


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

@media (min-width: 761px) {

  .how-section {
    padding:
      102px
      32px
      116px !important;
  }


  .how-container {
    max-width:
      820px !important;
  }


  .how-heading .section-title {
    font-size:
      38px !important;
  }


  .steps-grid {
    width:
      min(100%, 660px) !important;

    display:
      flex !important;

    grid-template-columns:
      none !important;
  }


  .step-card {
    padding-left:
      98px !important;
  }


  .step-card::before {
    font-size:
      67px !important;
  }


  .step-card h3 {
    font-size:
      19px !important;
  }


  .step-card p {
    max-width:
      470px;

    font-size:
      12.5px !important;
  }

}


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

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

  .about-point::before,
  .about-point::after,
  .about-point > div {
    transition:
      none !important;
  }

}


/* =========================================================
   EASYPRINT HOW ALIGNMENT V26
   - all process dots perfectly aligned
   - centered How It Works heading
   ========================================================= */


/* =========================================================
   CENTER THE INTRO
   ========================================================= */

.how-heading {
  max-width:
    470px !important;

  margin:
    0 auto
    52px !important;

  padding:
    0 4px !important;

  text-align:
    center !important;
}


.how-kicker {
  text-align:
    center !important;
}


.how-heading .section-title {
  max-width:
    390px;

  margin:
    0 auto
    16px !important;

  text-align:
    center !important;
}


.how-heading .section-title-base,
.how-heading .ep-gradient-title {
  width:
    fit-content;

  margin-left:
    auto !important;

  margin-right:
    auto !important;

  text-align:
    center !important;
}


.how-subtitle {
  max-width:
    390px !important;

  margin:
    0 auto !important;

  text-align:
    center !important;
}


/* Center the little accent under intro */

.how-heading::after {
  margin-left:
    auto !important;

  margin-right:
    auto !important;
}


/* =========================================================
   PERFECTLY ALIGN THE PROCESS TRACK
   ========================================================= */

/*
   Remove the stagger from the entire row.
   This keeps 01 / 02 / 03 / 04 and all dots on one line.
*/

.step-card,
.step-card:nth-child(2),
.step-card:nth-child(4) {
  margin-left:
    0 !important;

  margin-right:
    0 !important;
}


/*
   Every dot uses exactly the same horizontal coordinate.
*/

.step-card::after {
  left:
    26px !important;
}


/*
   Every number uses exactly the same starting coordinate.
*/

.step-card::before {
  left:
    0 !important;
}


/*
   Main line stays directly through the dots.
*/

.steps-grid::before {
  left:
    30px !important;
}


/* =========================================================
   OPTIONAL EDITORIAL STAGGER — TEXT ONLY
   ========================================================= */

/*
   Keep a tiny bit of movement in the composition,
   but NEVER move the timeline itself.
*/

.step-card:nth-child(2) > h3,
.step-card:nth-child(2) > p,
.step-card:nth-child(4) > h3,
.step-card:nth-child(4) > p {
  transform:
    translateX(10px);
}


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

@media (max-width: 480px) {

  .how-heading {
    margin-bottom:
      46px !important;
  }


  .how-heading .section-title {
    font-size:
      29px !important;
  }


  .step-card:nth-child(2) > h3,
  .step-card:nth-child(2) > p,
  .step-card:nth-child(4) > h3,
  .step-card:nth-child(4) > p {
    transform:
      translateX(6px);
  }

}


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

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

  .step-card:nth-child(2) > h3,
  .step-card:nth-child(2) > p,
  .step-card:nth-child(4) > h3,
  .step-card:nth-child(4) > p {
    transform:
      none;
  }

}



/* =========================================================
   EASYPRINT UPLOAD SHEET V27
   Mobile = bottom sheet
   Desktop = centered dialog
   ========================================================= */


/* =========================================================
   OVERLAY
   ========================================================= */

#uploadModal {
  align-items:
    flex-end !important;

  justify-content:
    center !important;

  padding:
    10px
    10px
    max(10px, env(safe-area-inset-bottom)) !important;

  background:
    rgba(20, 58, 86, 0.30) !important;

  -webkit-backdrop-filter:
    blur(15px) !important;

  backdrop-filter:
    blur(15px) !important;
}


#uploadModal.show {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    999999 !important;

  display:
    flex !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  pointer-events:
    auto !important;
}


/* =========================================================
   SHEET
   ========================================================= */

#uploadModal .upload-modal {
  position:
    relative;

  width:
    min(100%, 520px) !important;

  max-height:
    calc(100dvh - 20px);

  margin:
    0 !important;

  padding:
    26px
    18px
    20px !important;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  border:
    1px solid
    rgba(190, 221, 238, 0.74) !important;

  border-radius:
    28px
    28px
    22px
    22px !important;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.985),
      rgba(245, 252, 255, 0.98)
    ) !important;

  box-shadow:
    0 -12px 50px
    rgba(19, 70, 108, 0.16),
    0 20px 55px
    rgba(19, 70, 108, 0.10) !important;

  text-align:
    center;

  transform:
    translateY(34px)
    scale(0.985) !important;

  opacity:
    0;

  transition:
    transform
    0.34s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    opacity
    0.25s
    ease !important;

  overscroll-behavior:
    contain;
}


#uploadModal.show .upload-modal {
  transform:
    translateY(0)
    scale(1) !important;

  opacity:
    1;
}


/* Small bottom-sheet handle */

#uploadModal .upload-modal::before {
  content:
    "";

  display:
    block;

  width:
    38px;

  height:
    4px;

  margin:
    -10px auto
    20px;

  border-radius:
    999px;

  background:
    rgba(65, 116, 148, 0.18);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#uploadModal .modal-close {
  position:
    absolute !important;

  top:
    13px !important;

  right:
    13px !important;

  width:
    34px !important;

  height:
    34px !important;

  padding:
    0 !important;

  display:
    grid !important;

  place-items:
    center;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    rgba(229, 245, 252, 0.72) !important;

  color:
    #356b8d !important;

  font-size:
    21px !important;

  font-weight:
    400;

  line-height:
    1 !important;

  cursor:
    pointer;

  transition:
    background
    0.22s ease,
    transform
    0.22s ease;
}


#uploadModal .modal-close:active {
  transform:
    scale(0.92);
}


/* =========================================================
   COPY
   ========================================================= */

#uploadModal .upload-modal h2 {
  max-width:
    300px;

  margin:
    5px auto
    9px !important;

  color:
    #164f80 !important;

  font-size:
    24px !important;

  font-weight:
    800 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -0.4px !important;
}


#uploadModal .modal-subtext {
  max-width:
    310px !important;

  margin:
    0 auto
    20px !important;

  color:
    #657c8d !important;

  font-size:
    12px !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   PRIMARY ACTIONS
   ========================================================= */

#uploadModal .modal-actions {
  width:
    100%;

  margin:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    9px !important;
}


#uploadModal .modal-btn {
  width:
    100%;

  min-height:
    49px !important;

  padding:
    0 16px !important;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px !important;

  font-size:
    13.5px !important;

  font-weight:
    700 !important;

  text-decoration:
    none;

  transition:
    transform
    0.2s ease,
    box-shadow
    0.22s ease,
    background
    0.22s ease;
}


/* Sign In = clear primary action */

#uploadModal .modal-btn-primary {
  border:
    0 !important;

  background:
    linear-gradient(
      135deg,
      #24bbd0,
      #319ce0
    ) !important;

  color:
    #ffffff !important;

  box-shadow:
    0 11px 25px
    rgba(43, 158, 214, 0.20) !important;
}


/* Create Account = secondary */

#uploadModal .modal-btn-outline {
  border:
    1px solid
    rgba(80, 159, 202, 0.22) !important;

  background:
    rgba(255, 255, 255, 0.82) !important;

  color:
    #245e86 !important;

  box-shadow:
    none !important;
}


#uploadModal .modal-btn:active {
  transform:
    scale(0.985);
}


/* =========================================================
   "OR"
   ========================================================= */

#uploadModal .modal-divider {
  width:
    100%;

  margin:
    14px 0
    8px !important;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    #9aabb7;

  font-size:
    10px;
}


#uploadModal .modal-divider::before,
#uploadModal .modal-divider::after {
  content:
    "";

  flex:
    1;

  height:
    1px;

  background:
    rgba(73, 138, 174, 0.11);
}


/* =========================================================
   GUEST = TERTIARY ACTION
   ========================================================= */

#uploadModal .guest-link {
  width:
    fit-content !important;

  min-height:
    38px !important;

  margin:
    0 auto !important;

  padding:
    5px
    12px !important;

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  border:
    0 !important;

  border-radius:
    10px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #3c708f !important;

  font-size:
    12px !important;

  font-weight:
    650 !important;

  text-decoration:
    none !important;
}


#uploadModal .guest-link:active {
  background:
    rgba(225, 244, 252, 0.65) !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 761px) {

  #uploadModal {
    align-items:
      center !important;

    padding:
      24px !important;
  }


  #uploadModal .upload-modal {
    width:
      min(100%, 480px) !important;

    padding:
      34px
      30px
      28px !important;

    border-radius:
      26px !important;

    transform:
      translateY(18px)
      scale(0.97) !important;

    box-shadow:
      0 28px 75px
      rgba(18, 67, 104, 0.22) !important;
  }


  #uploadModal.show .upload-modal {
    transform:
      translateY(0)
      scale(1) !important;
  }


  /* Drag handle is mobile-only */

  #uploadModal .upload-modal::before {
    display:
      none;
  }


  #uploadModal .modal-actions {
    grid-template-columns:
      1fr 1fr !important;

    gap:
      10px !important;
  }


  #uploadModal .upload-modal h2 {
    font-size:
      27px !important;
  }


  #uploadModal .modal-subtext {
    font-size:
      13px !important;
  }

}


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

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

  #uploadModal .upload-modal,
  #uploadModal .modal-btn,
  #uploadModal .modal-close {
    transition:
      none !important;
  }

}

/* ============================================================
   EASYPRINT HOW DESKTOP VISUAL V1

   Desktop visual walkthrough.
   Existing mobile/tablet How It Works remains untouched.
============================================================ */


/* New visual is dormant outside desktop. */
.how-desktop-showcase {
  display: none;
}


@media (min-width: 1100px) {

  /* ----------------------------------------------------------
     DESKTOP SECTION FRAME
  ---------------------------------------------------------- */

  .how-section {
    padding:
      clamp(88px, 8vh, 122px)
      clamp(34px, 4.5vw, 82px)
      clamp(96px, 9vh, 138px)
      !important;
  }


  .how-container {
    width:
      min(
        calc(100% - 10px),
        1420px
      ) !important;

    max-width:
      1420px !important;
  }


  /*
   * Preserve the current timeline for mobile/tablet.
   * Desktop gets the new product-style visual instead.
   */
  .how-section .steps-grid {
    display:
      none !important;
  }


  .how-desktop-showcase {
    display:
      block !important;

    width:
      100%;

    margin-top:
      clamp(48px, 5vw, 72px);
  }


  /* ----------------------------------------------------------
     MAIN VISUAL GRID
  ---------------------------------------------------------- */

  .how-visual-stage {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      minmax(215px, 0.74fr)
      minmax(540px, 1.7fr)
      minmax(215px, 0.74fr);

    grid-template-rows:
      repeat(2, minmax(245px, auto));

    grid-template-areas:
      "upload browser code"
      "kiosk  browser print";

    gap:
      clamp(20px, 2.1vw, 34px);

    align-items:
      stretch;
  }


  /* ----------------------------------------------------------
     ZOOM / STEP CARDS
  ---------------------------------------------------------- */

  .how-zoom-card {
    position:
      relative;

    min-width:
      0;

    padding:
      clamp(20px, 1.6vw, 26px);

    overflow:
      hidden;

    border:
      1px solid
      rgba(76, 174, 220, 0.18);

    border-radius:
      26px;

    background:
      radial-gradient(
        circle at 88% 8%,
        rgba(72, 198, 232, 0.12),
        transparent 35%
      ),
      linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.97),
        rgba(244, 251, 255, 0.94)
      );

    box-shadow:
      0 14px 36px
      rgba(43, 112, 157, 0.09);

    transform:
      translateY(0)
      scale(1);

    transform-origin:
      center;

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

    outline:
      none;

    z-index:
      1;
  }


  .how-zoom-card--upload {
    grid-area:
      upload;
  }


  .how-zoom-card--code {
    grid-area:
      code;
  }


  .how-zoom-card--kiosk {
    grid-area:
      kiosk;
  }


  .how-zoom-card--print {
    grid-area:
      print;
  }


  .how-zoom-card:hover,
  .how-zoom-card:focus-visible {
    transform:
      translateY(-8px)
      scale(1.045);

    border-color:
      rgba(38, 174, 222, 0.42);

    background:
      radial-gradient(
        circle at 86% 10%,
        rgba(61, 201, 232, 0.18),
        transparent 38%
      ),
      linear-gradient(
        145deg,
        #ffffff,
        #f1faff
      );

    box-shadow:
      0 24px 56px
      rgba(31, 120, 176, 0.17);

    z-index:
      6;
  }


  .how-zoom-meta {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      12px;
  }


  .how-zoom-number {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    min-width:
      38px;

    height:
      29px;

    padding:
      0 10px;

    border-radius:
      999px;

    font-family:
      "Hammersmith One",
      sans-serif;

    font-size:
      12px;

    color:
      #ffffff;

    background:
      linear-gradient(
        135deg,
        #28c7d9,
        #319de9
      );

    box-shadow:
      0 7px 16px
      rgba(47, 163, 220, 0.18);
  }


  .how-zoom-label {
    font-size:
      10px;

    font-weight:
      700;

    letter-spacing:
      0.15em;

    color:
      #6790a9;
  }


  .how-zoom-copy {
    margin-top:
      20px;
  }


  .how-zoom-copy h3 {
    margin:
      0;

    font-family:
      "Hammersmith One",
      sans-serif;

    font-size:
      clamp(18px, 1.25vw, 22px);

    line-height:
      1.1;

    color:
      #14578a;
  }


  .how-zoom-copy p {
    margin:
      9px 0 0;

    font-size:
      12.5px;

    line-height:
      1.55;

    color:
      #617d91;
  }


  .how-mini-visual {
    margin-top:
      22px;

    transition:
      transform 260ms ease;
  }


  .how-zoom-card:hover .how-mini-visual,
  .how-zoom-card:focus-visible .how-mini-visual {
    transform:
      scale(1.055)
      translateY(-2px);
  }


  /* ----------------------------------------------------------
     CENTRAL BROWSER
  ---------------------------------------------------------- */

  .how-browser-demo {
    grid-area:
      browser;

    position:
      relative;

    min-width:
      0;

    min-height:
      535px;

    align-self:
      stretch;

    border:
      1px solid
      rgba(79, 172, 215, 0.20);

    border-radius:
      30px;

    overflow:
      hidden;

    background:
      #ffffff;

    box-shadow:
      0 28px 70px
      rgba(38, 109, 151, 0.15),
      0 0 0 8px
      rgba(255, 255, 255, 0.42);

    transition:
      transform 300ms ease,
      box-shadow 300ms ease;
  }


  .how-browser-demo:hover {
    transform:
      translateY(-4px)
      scale(1.012);

    box-shadow:
      0 34px 82px
      rgba(38, 109, 151, 0.19),
      0 0 0 8px
      rgba(255, 255, 255, 0.50);
  }


  .how-browser-bar {
    height:
      48px;

    padding:
      0 16px;

    display:
      grid;

    grid-template-columns:
      auto 1fr auto;

    align-items:
      center;

    gap:
      15px;

    border-bottom:
      1px solid
      rgba(83, 151, 189, 0.12);

    background:
      linear-gradient(
        180deg,
        #fbfdff,
        #f5f9fc
      );
  }


  .how-browser-dots {
    display:
      flex;

    gap:
      6px;
  }


  .how-browser-dots span {
    width:
      8px;

    height:
      8px;

    border-radius:
      50%;

    background:
      #c7dce9;
  }


  .how-browser-dots span:nth-child(2) {
    background:
      #9bd9e8;
  }


  .how-browser-dots span:nth-child(3) {
    background:
      #70bfe2;
  }


  .how-browser-address {
    min-width:
      0;

    height:
      28px;

    padding:
      0 14px;

    display:
      flex;

    align-items:
      center;

    gap:
      8px;

    overflow:
      hidden;

    border:
      1px solid
      rgba(93, 151, 184, 0.11);

    border-radius:
      999px;

    background:
      rgba(236, 245, 250, 0.78);

    color:
      #7992a2;

    font-size:
      10.5px;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }


  .how-browser-lock {
    color:
      #46b8d9;

    font-size:
      7px;
  }


  .how-browser-menu {
    color:
      #8ca4b4;

    letter-spacing:
      2px;
  }


  .how-browser-screen {
    min-height:
      calc(100% - 48px);

    padding:
      clamp(20px, 2vw, 30px);

    background:
      radial-gradient(
        circle at 80% 16%,
        rgba(74, 199, 232, 0.18),
        transparent 30%
      ),
      radial-gradient(
        circle at 12% 82%,
        rgba(95, 179, 246, 0.12),
        transparent 34%
      ),
      linear-gradient(
        145deg,
        #f8fdff,
        #eef9fe
      );
  }


  .how-browser-nav {
    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      20px;

    color:
      #155c91;
  }


  .how-browser-nav > strong {
    font-family:
      "Hammersmith One",
      sans-serif;

    font-size:
      22px;

    background:
      linear-gradient(
        100deg,
        #1ec7d2,
        #278ee6
      );

    -webkit-background-clip:
      text;

    background-clip:
      text;

    color:
      transparent;
  }


  .how-browser-nav-items {
    display:
      flex;

    gap:
      16px;

    font-size:
      9.5px;

    color:
      #7894a6;
  }


  .how-browser-workspace {
    margin-top:
      34px;

    display:
      grid;

    grid-template-columns:
      minmax(0, 1.35fr)
      minmax(165px, 0.65fr);

    gap:
      clamp(18px, 2vw, 28px);
  }


  .how-browser-upload {
    min-width:
      0;

    padding:
      clamp(20px, 2vw, 30px);

    border:
      1px solid
      rgba(78, 174, 219, 0.16);

    border-radius:
      24px;

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

    box-shadow:
      0 15px 30px
      rgba(57, 125, 165, 0.08);
  }


  .how-browser-eyebrow {
    font-size:
      9px;

    font-weight:
      700;

    letter-spacing:
      0.16em;

    color:
      #25a8d4;
  }


  .how-browser-upload h3 {
    margin:
      8px 0 0;

    max-width:
      360px;

    font-family:
      "Hammersmith One",
      sans-serif;

    font-size:
      clamp(23px, 1.8vw, 30px);

    line-height:
      1.05;

    color:
      #15568b;
  }


  .how-browser-upload > p {
    max-width:
      390px;

    margin:
      10px 0 0;

    font-size:
      11.5px;

    line-height:
      1.55;

    color:
      #6d8799;
  }


  .how-browser-dropzone {
    min-height:
      128px;

    margin-top:
      22px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      5px;

    border:
      1.5px dashed
      rgba(45, 177, 220, 0.32);

    border-radius:
      18px;

    background:
      linear-gradient(
        145deg,
        rgba(239, 251, 255, 0.85),
        rgba(247, 253, 255, 0.95)
      );

    color:
      #317399;
  }


  .how-browser-dropzone strong {
    font-size:
      11.5px;
  }


  .how-browser-dropzone small {
    font-size:
      9px;

    color:
      #89a2b2;
  }


  .how-browser-doc-icon {
    width:
      35px;

    height:
      41px;

    padding:
      10px 8px;

    display:
      grid;

    align-content:
      center;

    gap:
      4px;

    border:
      1px solid
      rgba(54, 169, 216, 0.22);

    border-radius:
      8px;

    background:
      #ffffff;

    box-shadow:
      0 7px 16px
      rgba(52, 135, 178, 0.10);
  }


  .how-browser-doc-icon span {
    height:
      3px;

    border-radius:
      999px;

    background:
      #64c7dd;
  }


  .how-browser-doc-icon span:nth-child(2) {
    width:
      75%;
  }


  .how-browser-doc-icon span:nth-child(3) {
    width:
      55%;
  }


  .how-browser-selected {
    margin-top:
      12px;

    padding:
      10px 12px;

    display:
      grid;

    grid-template-columns:
      auto 1fr auto;

    gap:
      10px;

    align-items:
      center;

    border:
      1px solid
      rgba(70, 161, 208, 0.13);

    border-radius:
      14px;

    background:
      #ffffff;
  }


  .how-browser-file-icon {
    width:
      31px;

    height:
      31px;

    display:
      grid;

    place-items:
      center;

    border-radius:
      9px;

    color:
      #ffffff;

    font-size:
      11px;

    font-weight:
      700;

    background:
      linear-gradient(
        145deg,
        #337bc8,
        #2761b2
      );
  }


  .how-browser-selected strong {
    display:
      block;

    overflow:
      hidden;

    color:
      #254e6c;

    font-size:
      9.5px;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }


  .how-browser-selected small {
    display:
      block;

    margin-top:
      3px;

    color:
      #8aa0af;

    font-size:
      8px;
  }


  .how-browser-ready {
    padding:
      5px 8px;

    border-radius:
      999px;

    color:
      #328b76;

    background:
      #e8f8f3;

    font-size:
      7.5px;

    font-weight:
      700;
  }


  .how-browser-upload-button {
    height:
      38px;

    margin-top:
      12px;

    display:
      grid;

    place-items:
      center;

    border-radius:
      12px;

    color:
      #ffffff;

    font-size:
      10.5px;

    font-weight:
      700;

    background:
      linear-gradient(
        100deg,
        #27c5d4,
        #339ee8
      );

    box-shadow:
      0 9px 20px
      rgba(45, 163, 219, 0.18);
  }


  /* ----------------------------------------------------------
     PRINT CODE RESULT CARD
  ---------------------------------------------------------- */

  .how-browser-result {
    position:
      relative;

    min-width:
      0;

    align-self:
      center;

    padding:
      24px 18px;

    overflow:
      hidden;

    border:
      1px solid
      rgba(77, 176, 221, 0.18);

    border-radius:
      24px;

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

    box-shadow:
      0 18px 35px
      rgba(49, 120, 162, 0.10);
  }


  .how-result-glow {
    position:
      absolute;

    width:
      120px;

    height:
      120px;

    top:
      -56px;

    right:
      -42px;

    border-radius:
      50%;

    background:
      rgba(55, 194, 227, 0.14);

    filter:
      blur(3px);
  }


  .how-result-label {
    position:
      relative;

    display:
      block;

    color:
      #75a0b8;

    font-size:
      8px;

    font-weight:
      700;

    letter-spacing:
      0.14em;
  }


  .how-result-code {
    position:
      relative;

    display:
      block;

    margin-top:
      8px;

    font-family:
      "Hammersmith One",
      sans-serif;

    font-size:
      clamp(27px, 2vw, 34px);

    letter-spacing:
      0.08em;

    color:
      #145a91;
  }


  .how-result-ready {
    position:
      relative;

    display:
      inline-flex;

    margin-top:
      8px;

    padding:
      5px 8px;

    border-radius:
      999px;

    color:
      #25856f;

    background:
      #e7f8f1;

    font-size:
      8px;

    font-weight:
      700;
  }


  .how-result-divider {
    height:
      1px;

    margin:
      18px 0 13px;

    background:
      rgba(84, 146, 181, 0.13);
  }


  .how-browser-result small {
    color:
      #8198a7;

    font-size:
      9px;

    line-height:
      1.45;
  }


  .how-result-route {
    margin-top:
      25px;

    display:
      grid;

    grid-template-columns:
      auto 1fr auto;

    align-items:
      center;

    gap:
      8px;
  }


  .how-route-dot {
    width:
      9px;

    height:
      9px;

    border-radius:
      50%;

    background:
      #36bfdd;

    box-shadow:
      0 0 0 5px
      rgba(54, 191, 221, 0.10);
  }


  .how-result-route > i {
    height:
      1px;

    border-top:
      1px dashed
      rgba(54, 156, 204, 0.35);
  }


  .how-route-kiosk {
    position:
      relative;

    width:
      32px;

    height:
      39px;

    display:
      block;

    border-radius:
      8px 8px 6px 6px;

    background:
      linear-gradient(
        145deg,
        #38c4db,
        #248fd2
      );

    box-shadow:
      0 8px 16px
      rgba(39, 139, 195, 0.15);
  }


  .how-route-kiosk b {
    position:
      absolute;

    width:
      18px;

    height:
      12px;

    left:
      7px;

    top:
      7px;

    border-radius:
      3px;

    background:
      #e9fbff;
  }


  .how-route-kiosk em {
    position:
      absolute;

    width:
      15px;

    height:
      3px;

    left:
      8px;

    bottom:
      8px;

    border-radius:
      999px;

    background:
      #daf6fc;
  }


  /* ----------------------------------------------------------
     STEP 01 MINI PAPER
  ---------------------------------------------------------- */

  .how-mini-upload {
    min-height:
      102px;

    position:
      relative;
  }


  .how-paper-stack {
    position:
      relative;

    width:
      84px;

    height:
      84px;

    margin:
      0 auto;
  }


  .how-paper-stack > span {
    position:
      absolute;

    width:
      57px;

    height:
      72px;

    border:
      1px solid
      #cceaf4;

    border-radius:
      9px;

    background:
      #edfaff;
  }


  .how-paper-stack > span:nth-child(1) {
    left:
      4px;

    top:
      8px;

    transform:
      rotate(-8deg);
  }


  .how-paper-stack > span:nth-child(2) {
    right:
      4px;

    top:
      6px;

    transform:
      rotate(7deg);
  }


  .how-paper-front {
    position:
      absolute;

    width:
      62px;

    height:
      78px;

    left:
      11px;

    top:
      0;

    padding:
      11px 9px;

    border:
      1px solid
      rgba(75, 171, 217, 0.20);

    border-radius:
      10px;

    background:
      #ffffff;

    box-shadow:
      0 10px 20px
      rgba(51, 124, 165, 0.10);
  }


  .how-paper-filemark {
    width:
      25px;

    height:
      25px;

    display:
      grid;

    place-items:
      center;

    border-radius:
      7px;

    color:
      #ffffff;

    font-size:
      9px;

    font-weight:
      700;

    background:
      #327bc7;
  }


  .how-paper-lines {
    margin-top:
      8px;

    display:
      grid;

    gap:
      4px;
  }


  .how-paper-lines i {
    height:
      3px;

    border-radius:
      999px;

    background:
      #bce6f1;
  }


  .how-paper-lines i:nth-child(2) {
    width:
      80%;
  }


  .how-paper-lines i:nth-child(3) {
    width:
      58%;
  }


  .how-mini-chip {
    display:
      block;

    width:
      fit-content;

    max-width:
      100%;

    margin:
      7px auto 0;

    padding:
      6px 9px;

    overflow:
      hidden;

    border-radius:
      999px;

    color:
      #52778f;

    background:
      #eaf7fb;

    font-size:
      8px;

    white-space:
      nowrap;

    text-overflow:
      ellipsis;
  }


  /* ----------------------------------------------------------
     STEP 02 MINI CODE
  ---------------------------------------------------------- */

  .how-mini-code {
    padding:
      18px;

    border:
      1px solid
      rgba(66, 173, 219, 0.17);

    border-radius:
      18px;

    text-align:
      center;

    background:
      linear-gradient(
        145deg,
        #f8fdff,
        #eaf8fd
      );

    box-shadow:
      inset 0 1px 0
      rgba(255, 255, 255, 0.8);
  }


  .how-mini-code > span {
    display:
      block;

    color:
      #769ab0;

    font-size:
      8px;

    font-weight:
      700;

    letter-spacing:
      0.14em;
  }


  .how-mini-code strong {
    display:
      block;

    margin:
      8px 0;

    font-family:
      "Hammersmith One",
      sans-serif;

    font-size:
      26px;

    letter-spacing:
      0.08em;

    color:
      #166294;
  }


  .how-mini-code small {
    display:
      inline-flex;

    padding:
      5px 8px;

    border-radius:
      999px;

    color:
      #298972;

    background:
      #e7f8f1;

    font-size:
      8px;
  }


  /* ----------------------------------------------------------
     STEP 03 MINI KIOSK
  ---------------------------------------------------------- */

  .how-mini-kiosk {
    min-height:
      112px;

    position:
      relative;

    display:
      grid;

    place-items:
      center;

    padding-top:
      10px;
  }


  .how-kiosk-antenna {
    position:
      absolute;

    top:
      0;

    left:
      50%;

    width:
      50px;

    height:
      24px;

    transform:
      translateX(-50%);
  }


  .how-kiosk-antenna i {
    position:
      absolute;

    left:
      50%;

    border:
      3px solid
      #2facd5;

    border-left-color:
      transparent;

    border-right-color:
      transparent;

    border-bottom-color:
      transparent;

    border-radius:
      50%;
  }


  .how-kiosk-antenna i:first-child {
    width:
      44px;

    height:
      22px;

    top:
      0;

    transform:
      translateX(-50%);
  }


  .how-kiosk-antenna i:last-child {
    width:
      26px;

    height:
      14px;

    top:
      8px;

    transform:
      translateX(-50%);
  }


  .how-kiosk-body {
    position:
      relative;

    width:
      76px;

    height:
      94px;

    margin-top:
      14px;

    border-radius:
      15px 15px 11px 11px;

    background:
      linear-gradient(
        145deg,
        #40c8de,
        #2598d8 58%,
        #1778bc
      );

    box-shadow:
      0 15px 26px
      rgba(34, 131, 187, 0.20);
  }


  .how-kiosk-screen {
    position:
      absolute;

    width:
      51px;

    height:
      32px;

    left:
      12px;

    top:
      13px;

    display:
      grid;

    place-items:
      center;

    border:
      4px solid
      #12618b;

    border-radius:
      8px;

    background:
      #effdff;
  }


  .how-kiosk-screen span {
    color:
      #1687b5;

    font-size:
      8px;

    font-weight:
      700;

    letter-spacing:
      0.05em;
  }


  .how-kiosk-slot {
    position:
      absolute;

    width:
      34px;

    height:
      5px;

    left:
      21px;

    top:
      55px;

    border-radius:
      999px;

    background:
      #07527d;
  }


  .how-kiosk-output {
    position:
      absolute;

    width:
      43px;

    height:
      19px;

    left:
      16px;

    bottom:
      9px;

    overflow:
      hidden;

    border-radius:
      6px;

    background:
      #0b608f;
  }


  .how-kiosk-output span {
    position:
      absolute;

    width:
      30px;

    height:
      18px;

    left:
      6px;

    top:
      -8px;

    border-radius:
      3px;

    background:
      #ffffff;
  }


  /* ----------------------------------------------------------
     STEP 04 MINI PRINTER
  ---------------------------------------------------------- */

  .how-mini-print {
    min-height:
      110px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;
  }


  .how-mini-printer {
    position:
      relative;

    width:
      98px;

    height:
      75px;
  }


  .how-print-paper {
    position:
      absolute;

    width:
      55px;

    height:
      60px;

    left:
      22px;

    top:
      0;

    padding:
      11px 9px;

    display:
      grid;

    align-content:
      start;

    gap:
      5px;

    border:
      1px solid
      #d7ebf4;

    border-radius:
      7px 7px 3px 3px;

    background:
      #ffffff;

    box-shadow:
      0 8px 16px
      rgba(61, 130, 166, 0.09);
  }


  .how-print-paper i {
    height:
      3px;

    border-radius:
      999px;

    background:
      #78ccdc;
  }


  .how-print-paper i:nth-child(2) {
    width:
      76%;
  }


  .how-print-paper i:nth-child(3) {
    width:
      56%;
  }


  .how-printer-shell {
    position:
      absolute;

    width:
      98px;

    height:
      43px;

    left:
      0;

    bottom:
      0;

    border-radius:
      12px;

    background:
      linear-gradient(
        145deg,
        #37bdd8,
        #2b91d1
      );

    box-shadow:
      0 13px 22px
      rgba(37, 132, 188, 0.17);
  }


  .how-printer-shell span {
    position:
      absolute;

    width:
      59px;

    height:
      6px;

    left:
      19px;

    top:
      13px;

    border-radius:
      999px;

    background:
      #0d638f;
  }


  .how-print-success {
    margin-top:
      9px;

    padding:
      6px 10px;

    border-radius:
      999px;

    color:
      #25836e;

    background:
      #e8f8f2;

    font-size:
      8px;

    font-weight:
      700;
  }


  /* ----------------------------------------------------------
     CAPTION
  ---------------------------------------------------------- */

  .how-desktop-caption {
    width:
      fit-content;

    max-width:
      700px;

    margin:
      clamp(34px, 3vw, 48px)
      auto
      0;

    padding:
      11px 18px;

    border:
      1px solid
      rgba(67, 167, 213, 0.13);

    border-radius:
      999px;

    color:
      #68869a;

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

    font-size:
      11.5px;

    text-align:
      center;

    box-shadow:
      0 8px 22px
      rgba(48, 123, 164, 0.05);
  }

}


/* Slightly denser desktop / laptop layout. */
@media (min-width: 1100px) and (max-width: 1280px) {

  .how-visual-stage {
    grid-template-columns:
      minmax(185px, 0.67fr)
      minmax(490px, 1.66fr)
      minmax(185px, 0.67fr);

    gap:
      18px;
  }


  .how-zoom-card {
    padding:
      19px;
  }


  .how-browser-demo {
    min-height:
      510px;
  }


  .how-zoom-copy h3 {
    font-size:
      18px;
  }

}


/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {

  .how-zoom-card,
  .how-mini-visual,
  .how-browser-demo {
    transition:
      none !important;

    transform:
      none !important;
  }

}

/* ============================================================
   EASYPRINT HOW PHYSICAL MONITOR V2
   Desktop only — mobile/tablet untouched
============================================================ */

@media (min-width: 1100px) {

  .how-visual-stage {
    position: relative !important;
    display: block !important;
    width: min(100%, 1360px) !important;
    min-height: 790px !important;
    margin: 0 auto !important;
    overflow: visible !important;
  }

  /* ==========================================================
     ACTUAL DESKTOP MONITOR
  ========================================================== */

  .how-browser-demo {
    position: relative !important;
    z-index: 2 !important;

    width: min(70%, 880px) !important;
    min-height: 0 !important;

    margin:
      60px
      auto
      160px !important;

    padding:
      14px
      14px
      38px !important;

    overflow: visible !important;

    border:
      1px solid
      #0d2635 !important;

    border-radius:
      23px !important;

    background:
      linear-gradient(
        145deg,
        #101c25,
        #172a36 55%,
        #0b161e
      ) !important;

    box-shadow:
      0 38px 80px rgba(25, 75, 110, 0.22),
      inset 0 1px 0 rgba(255,255,255,.10) !important;

    transform: none !important;
  }

  .how-browser-demo:hover {
    transform:
      translateY(-3px) !important;
  }

  /* monitor neck */
  .how-browser-demo::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: 50%;
    bottom: -94px;

    width: 150px;
    height: 108px;

    transform:
      translateX(-50%);

    clip-path:
      polygon(
        28% 0,
        72% 0,
        84% 100%,
        16% 100%
      );

    background:
      linear-gradient(
        90deg,
        #aebfc8,
        #eef3f5 48%,
        #a5b7c1
      );

    box-shadow:
      0 12px 24px
      rgba(38, 80, 105, .14);
  }

  /* monitor base */
  .how-browser-demo::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: 50%;
    bottom: -116px;

    width: min(42%, 330px);
    height: 22px;

    transform:
      translateX(-50%);

    border-radius:
      50% 50% 10px 10px;

    background:
      linear-gradient(
        180deg,
        #e3ecef,
        #aebfc7
      );

    box-shadow:
      0 14px 22px
      rgba(34, 78, 104, .14);
  }

  /* screen inside monitor */
  .how-browser-bar {
    border-radius:
      11px
      11px
      0
      0 !important;

    overflow: hidden !important;
  }

  .how-browser-screen {
    min-height: 470px !important;

    border-radius:
      0
      0
      11px
      11px !important;

    overflow: hidden !important;
  }


  /* ==========================================================
     FLOATING / ZOOMED STEP WINDOWS
  ========================================================== */

  .how-zoom-card {
    position: absolute !important;
    z-index: 6 !important;

    width:
      clamp(
        230px,
        20vw,
        300px
      ) !important;

    min-height: 0 !important;

    padding:
      20px
      21px !important;

    border-radius:
      20px !important;

    background:
      radial-gradient(
        circle at 88% 8%,
        rgba(73, 201, 232, .15),
        transparent 38%
      ),
      rgba(255,255,255,.96) !important;

    border:
      1px solid
      rgba(61, 171, 217, .22) !important;

    box-shadow:
      0 25px 55px
      rgba(37, 104, 148, .16) !important;

    backdrop-filter:
      blur(9px);

    transform:
      rotate(
        var(--how-float-rotate)
      ) !important;

    transition:
      transform .26s cubic-bezier(.2,.8,.2,1),
      box-shadow .26s ease,
      border-color .26s ease !important;
  }

  .how-zoom-card--upload {
    --how-float-rotate: -2deg;

    top: 145px !important;
    left: -6px !important;
  }

  .how-zoom-card--code {
    --how-float-rotate: 1.8deg;

    top: 12px !important;
    right: 2px !important;
  }

  .how-zoom-card--kiosk {
    --how-float-rotate: 1.5deg;

    left: 2% !important;
    bottom: 75px !important;
  }

  .how-zoom-card--print {
    --how-float-rotate: -1.7deg;

    right: 1% !important;
    bottom: 52px !important;
  }


  /* ==========================================================
     HOVER = BRING THE ZOOM WINDOW FORWARD
  ========================================================== */

  .how-zoom-card:hover,
  .how-zoom-card:focus-visible {
    z-index: 30 !important;

    transform:
      translateY(-11px)
      scale(1.08)
      rotate(0deg) !important;

    border-color:
      rgba(35, 180, 224, .50) !important;

    box-shadow:
      0 38px 78px
      rgba(28, 112, 167, .24) !important;
  }

  .how-zoom-card:hover .how-mini-visual,
  .how-zoom-card:focus-visible .how-mini-visual {
    transform:
      translateY(-3px)
      scale(1.06) !important;
  }


  /* smaller labels so visual dominates */
  .how-zoom-copy {
    margin-top: 13px !important;
  }

  .how-zoom-copy h3 {
    font-size:
      clamp(
        17px,
        1.25vw,
        21px
      ) !important;
  }

  .how-zoom-copy p {
    font-size:
      11.5px !important;

    line-height:
      1.45 !important;
  }

  .how-mini-visual {
    margin-top:
      15px !important;
  }

}


/* ============================================================
   SMALLER DESKTOP
============================================================ */

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-visual-stage {
    min-height:
      735px !important;
  }

  .how-browser-demo {
    width:
      min(68%, 750px) !important;
  }

  .how-browser-screen {
    min-height:
      430px !important;
  }

  .how-zoom-card {
    width:
      220px !important;

    padding:
      17px !important;
  }

}


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

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

  .how-zoom-card,
  .how-browser-demo,
  .how-mini-visual {
    transition:
      none !important;
  }

}

/* ============================================================
   EASYPRINT HOW HYBRID V4 FRAMELESS
   Consolidated desktop composition
   16:9 thin-bezel display + staggered floating steps
============================================================ */

@media (min-width: 1100px) {

  .how-section .how-container {
    width: min(100%, 1220px) !important;
    max-width: 1220px !important;
  }

  .how-desktop-showcase {
    width: 100% !important;
    max-width: 1180px !important;
    margin: 30px auto 0 !important;
  }

  .how-visual-stage {
    position: relative !important;
    isolation: isolate;
    display: block !important;

    width: min(100%, 1120px) !important;
    height: 650px !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    overflow: visible !important;
  }

  /* ==========================================================
     MODERN ULTRA-THIN DESKTOP DISPLAY
  ========================================================== */

  .how-browser-demo {
    position: absolute !important;
    z-index: 3 !important;

    top: 138px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    display: block !important;

    width: 48% !important;
    max-width: 525px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 4px 4px 13px !important;

    border: 1px solid #344754 !important;
    border-radius: 10px 10px 12px 12px !important;

    background: linear-gradient(
      180deg,
      #273b49 0%,
      #152935 85%,
      #314754 100%
    ) !important;

    overflow: visible !important;

    transform: translateX(-50%) !important;

    box-shadow:
      0 29px 55px rgba(22, 67, 105, .16),
      0 9px 19px rgba(22, 67, 105, .1),
      inset 0 1px rgba(255,255,255,.15) !important;

    transition:
      box-shadow .28s ease,
      filter .28s ease !important;
  }

  .how-browser-demo:hover {
    transform: translateX(-50%) !important;
  }

  /* Slim metallic neck */

  .how-browser-demo::before {
    content: "" !important;

    position: absolute !important;
    z-index: -1 !important;

    top: calc(100% - 2px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;

    width: 77px !important;
    height: 65px !important;

    transform: translateX(-50%) !important;

    clip-path: polygon(
      26% 0,
      74% 0,
      83% 100%,
      17% 100%
    ) !important;

    background: linear-gradient(
      90deg,
      #91a9b7,
      #edf3f5 48%,
      #9fb3bf
    ) !important;

    border: none !important;
    border-radius: 0 !important;
  }

  /* Thin aluminum base */

  .how-browser-demo::after {
    content: "" !important;

    position: absolute !important;
    z-index: -1 !important;

    top: calc(100% + 55px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;

    width: 190px !important;
    height: 11px !important;

    transform: translateX(-50%) !important;

    border: 0 !important;
    border-radius: 60% 60% 7px 7px !important;

    background: linear-gradient(
      #e4ebef,
      #a5b9c5
    ) !important;

    box-shadow:
      0 10px 17px rgba(25, 74, 111, .13) !important;
  }

  /* Compact browser chrome, inside the display */

  .how-browser-bar {
    box-sizing: border-box !important;

    display: flex !important;
    min-height: 0 !important;
    height: 23px !important;

    padding: 0 9px !important;
    margin: 0 !important;

    border-radius: 6px 6px 0 0 !important;

    overflow: hidden !important;
  }

  .how-browser-dots {
    transform: scale(.7);
    transform-origin: left center;
  }

  .how-browser-address {
    font-size: 9px !important;
  }

  .how-browser-menu {
    font-size: 9px !important;
  }

  /* Locked widescreen area */

  .how-browser-screen {
    position: relative !important;
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: 16 / 9 !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0 0 7px 7px !important;
    overflow: hidden !important;
  }

  /* Scale the original desktop preview
     rather than allowing its contents to
     determine the physical monitor height. */

  .how-browser-nav {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 150% !important;
    height: 45px !important;
    min-height: 0 !important;

    padding: 0 17px !important;

    transform: scale(.666667) !important;
    transform-origin: top left !important;
  }

  .how-browser-workspace {
    position: absolute !important;

    top: 30px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    box-sizing: border-box !important;

    display: grid !important;

    width: 200% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 18px !important;
    margin: 0 !important;

    transform: scale(.5) !important;
    transform-origin: top left !important;
  }

  .how-browser-upload,
  .how-browser-result {
    min-height: 0 !important;
  }

  /* ==========================================================
     FOUR STAGGERED FLOATING WINDOWS
  ========================================================== */

  .how-zoom-card {
    position: absolute !important;
    z-index: 5 !important;

    display: block !important;

    width: clamp(190px, 18vw, 210px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 16px !important;

    overflow: visible !important;

    border:
      1px solid rgba(94, 166, 207, .28) !important;

    border-radius: 18px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.99),
        rgba(247,252,255,.98)
      ) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
      0 27px 53px rgba(39, 106, 146, .14),
      0 8px 17px rgba(39, 106, 146, .07) !important;

    transform:
      rotate(var(--card-angle, 0deg)) !important;

    transition:
      transform .3s cubic-bezier(.2,.8,.2,1),
      box-shadow .3s ease,
      border-color .25s ease,
      background .25s ease !important;

    outline-offset: 4px;
  }

  /* Distinct, deliberately uneven positions */

  .how-zoom-card--upload {
    --card-angle: -3deg;

    top: 77px !important;
    left: 8% !important;
    right: auto !important;
    bottom: auto !important;
  }

  .how-zoom-card--code {
    --card-angle: 2.6deg;

    top: 35px !important;
    right: 7% !important;
    left: auto !important;
    bottom: auto !important;
  }

  .how-zoom-card--kiosk {
    --card-angle: 2deg;

    top: auto !important;
    bottom: 50px !important;
    left: 5% !important;
    right: auto !important;
  }

  .how-zoom-card--print {
    --card-angle: -2.4deg;

    top: auto !important;
    bottom: 28px !important;
    right: 5% !important;
    left: auto !important;
  }

  /* External numbering */

  .how-zoom-number {
    display: none !important;
  }

  .how-zoom-meta {
    justify-content: flex-start !important;
    margin-bottom: 10px !important;
  }

  .how-zoom-label {
    font-size: 10px !important;
    letter-spacing: .14em !important;
  }

  .how-external-number {
    position: absolute !important;
    z-index: 7 !important;

    top: -28px !important;
    left: -26px !important;

    font-size: 48px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    color: #63b9e6 !important;

    text-shadow:
      0 5px 15px rgba(37, 143, 204, .14);

    pointer-events: none;

    transition:
      color .25s ease,
      transform .25s ease;
  }

  .how-zoom-card--code .how-external-number,
  .how-zoom-card--print .how-external-number {
    left: auto !important;
    right: -27px !important;
  }

  .how-zoom-card::before,
  .how-zoom-card::after {
    content: none !important;
  }

  /* Text and illustrations */

  .how-zoom-copy {
    margin-top: 6px !important;
  }

  .how-zoom-copy h3 {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .how-zoom-copy > p {
    margin-top: 6px !important;

    font-size: 11.5px !important;
    line-height: 1.48 !important;
  }

  .how-mini-visual {
    margin-top: 13px !important;
  }

  /* Hover details */

  .how-zoom-more {
    display: block !important;

    max-height: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;

    border-top: 1px solid transparent;

    opacity: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;

    transition:
      max-height .35s ease,
      opacity .25s ease,
      margin-top .3s ease,
      padding-top .3s ease,
      visibility .3s ease !important;
  }

  .how-zoom-more strong {
    color: #2876ab;
    font-size: 11px;
  }

  .how-zoom-more p {
    margin: 5px 0 0;

    color: #627f97;
    font-size: 11px;
    line-height: 1.5;
  }

  /* Interactive highlight */

  .how-zoom-card:hover,
  .how-zoom-card:focus-visible {
    z-index: 40 !important;

    transform:
      translateY(-8px)
      scale(1.045)
      rotate(0deg) !important;

    border-color:
      rgba(38, 158, 224, .8) !important;

    background: #fff !important;

    box-shadow:
      0 35px 72px rgba(31, 112, 170, .23),
      0 0 0 4px rgba(48, 177, 230, .12) !important;
  }

  .how-zoom-card:hover .how-zoom-more,
  .how-zoom-card:focus-visible .how-zoom-more {
    max-height: 165px !important;

    margin-top: 12px !important;
    padding-top: 11px !important;

    border-top-color:
      rgba(73, 161, 214, .21);

    opacity: 1 !important;
    visibility: visible !important;
  }

  .how-zoom-card:hover .how-external-number,
  .how-zoom-card:focus-visible .how-external-number {
    color: #168dd2 !important;
    transform: translateY(-3px);
  }

  /* Center display reacts to the step hover */

  .how-visual-stage:has(
    .how-zoom-card:is(:hover, :focus-visible)
  ) .how-browser-demo {
    box-shadow:
      0 32px 66px rgba(25, 94, 150, .23),
      0 0 0 4px rgba(56, 176, 230, .08) !important;
  }

  .how-visual-stage:has(
    .how-zoom-card--upload:is(:hover, :focus-visible)
  ) .how-browser-dropzone {
    box-shadow:
      0 0 0 3px rgba(46, 164, 230, .22) !important;
  }

  .how-visual-stage:has(
    .how-zoom-card--code:is(:hover, :focus-visible)
  ) .how-browser-result {
    box-shadow:
      0 0 0 3px rgba(46, 164, 230, .25) !important;
  }

  .how-visual-stage:has(
    .how-zoom-card--kiosk:is(:hover, :focus-visible)
  ) .how-result-route,
  .how-visual-stage:has(
    .how-zoom-card--print:is(:hover, :focus-visible)
  ) .how-result-route {
    filter:
      drop-shadow(
        0 0 9px rgba(36, 171, 232, .5)
      ) !important;
  }

  .how-desktop-caption {
    margin-top: 0 !important;
    font-size: 12px !important;
    text-align: center;
  }

}

/* Narrow desktop adaptation */

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-visual-stage {
    height: 625px !important;
  }

  .how-browser-demo {
    top: 145px !important;
    width: 48% !important;
  }

  .how-zoom-card {
    width: 190px !important;
    padding: 14px !important;
  }

  .how-zoom-card--upload {
    left: 5% !important;
  }

  .how-zoom-card--code {
    right: 4% !important;
  }

  .how-zoom-card--kiosk {
    left: 3% !important;
  }

  .how-zoom-card--print {
    right: 3% !important;
  }

}

/* Accessibility */

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

  .how-zoom-card,
  .how-external-number,
  .how-zoom-more,
  .how-browser-demo {
    transition: none !important;
  }

}

/* ============================================================
   EASYPRINT HOW V4.1 COMPACT CARDS
   Wider + shorter floating step windows
============================================================ */

@media (min-width: 1100px) {

  .how-zoom-card {
    width: 230px !important;
    padding: 13px 15px 12px !important;
  }

  .how-zoom-meta {
    margin-bottom: 5px !important;
  }

  .how-zoom-copy {
    margin-top: 3px !important;
  }

  .how-zoom-copy h3 {
    margin: 0 0 4px !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
  }

  .how-zoom-copy > p {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .how-mini-visual {
    margin-top: 7px !important;
    transform: scale(.85) !important;
    transform-origin: center top !important;
  }

  .how-zoom-card--upload {
    top: 87px !important;
    left: 5% !important;
  }

  .how-zoom-card--code {
    top: 45px !important;
    right: 4% !important;
  }

  .how-zoom-card--kiosk {
    bottom: 47px !important;
    left: 4% !important;
  }

  .how-zoom-card--print {
    bottom: 34px !important;
    right: 4% !important;
  }

  .how-zoom-card:hover .how-mini-visual,
  .how-zoom-card:focus-visible .how-mini-visual {
    transform: scale(.9) translateY(-2px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-zoom-card {
    width: 215px !important;
    padding: 12px 13px 11px !important;
  }
}

/* ============================================================
   EASYPRINT HOW V4.2 STRAIGHT CARDS + LANDING PREVIEW
============================================================ */

@media (min-width: 1100px) {

  /* -----------------------------------------
     STRAIGHTER, SMALLER, CLOSER FLOATING CARDS
  ----------------------------------------- */

  .how-zoom-card {
    width: 214px !important;
    padding: 12px 14px 11px !important;
    transform: none !important;
    border-radius: 18px !important;
  }

  .how-zoom-card--upload {
    top: 98px !important;
    left: 9.2% !important;
  }

  .how-zoom-card--code {
    top: 55px !important;
    right: 8.5% !important;
  }

  .how-zoom-card--kiosk {
    bottom: 68px !important;
    left: 8.2% !important;
  }

  .how-zoom-card--print {
    bottom: 47px !important;
    right: 8.3% !important;
  }

  .how-zoom-card:hover,
  .how-zoom-card:focus-visible {
    transform: translateY(-8px) scale(1.04) !important;
  }

  .how-zoom-meta {
    margin-bottom: 4px !important;
  }

  .how-zoom-copy {
    margin-top: 2px !important;
  }

  .how-zoom-copy h3 {
    margin: 0 0 4px !important;
    font-size: 14.2px !important;
    line-height: 1.2 !important;
  }

  .how-zoom-copy > p {
    margin: 0 !important;
    font-size: 10.8px !important;
    line-height: 1.38 !important;
  }

  .how-mini-visual {
    margin-top: 6px !important;
    transform: scale(.82) !important;
    transform-origin: center top !important;
  }

  .how-zoom-card:hover .how-mini-visual,
  .how-zoom-card:focus-visible .how-mini-visual {
    transform: scale(.86) translateY(-2px) !important;
  }

  /* -----------------------------------------
     BETTER NUMBERING — CLEAN EXTERNAL BADGES
  ----------------------------------------- */

  .how-external-number {
    top: 14px !important;
    left: -22px !important;
    right: auto !important;

    width: 36px !important;
    height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;

    background: linear-gradient(
      180deg,
      #7dd3f7,
      #44b3e7
    ) !important;

    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;

    box-shadow:
      0 10px 20px rgba(51, 165, 222, .22) !important;

    text-shadow: none !important;
  }

  .how-zoom-card--code .how-external-number,
  .how-zoom-card--print .how-external-number {
    left: auto !important;
    right: -22px !important;
  }

  .how-zoom-card:hover .how-external-number,
  .how-zoom-card:focus-visible .how-external-number {
    transform: translateY(-2px) scale(1.04) !important;
    color: #fff !important;
  }

  /* -----------------------------------------
     MONITOR INTERIOR = ACTUAL LANDING PREVIEW
  ----------------------------------------- */

  .how-browser-screen {
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    padding: 0 !important;
    background:
      linear-gradient(
        180deg,
        #edf7fc 0%,
        #eaf5fb 100%
      ) !important;
  }

  .how-browser-landing {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
      linear-gradient(
        180deg,
        #edf7fc 0%,
        #eaf5fb 100%
      );
  }

  .how-browser-landing-bg {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        circle at 20% 72%,
        rgba(40, 181, 224, .08),
        transparent 22%
      ),
      radial-gradient(
        circle at 70% 28%,
        rgba(45, 157, 222, .10),
        transparent 24%
      );
    pointer-events: none;
  }

  .how-browser-landing-nav {
    position: relative;
    z-index: 1;

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

    padding: 16px 18px 8px;
  }

  .how-browser-landing-nav strong {
    color: #209bd8;
    font-size: 12px;
    font-weight: 800;
  }

  .how-browser-landing-nav-items {
    display: flex;
    align-items: center;
    gap: 11px;
  }

  .how-browser-landing-nav-items span {
    color: #86a1b7;
    font-size: 8px;
    font-weight: 600;
    white-space: nowrap;
  }

  .how-browser-landing-main {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 6px;

    height: calc(100% - 48px);
    padding: 0 18px 16px;
  }

  .how-browser-landing-kiosk-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  .how-browser-landing-kiosk-glow {
    position: absolute;
    width: 88%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background:
      radial-gradient(
        circle,
        rgba(38, 173, 226, .15),
        transparent 68%
      );
    filter: blur(6px);
  }

  .how-browser-landing-kiosk {
    position: relative;
    z-index: 1;
    width: 82%;
    max-width: 170px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(26, 101, 151, .14));
  }

  .how-browser-landing-copy {
    min-width: 0;
  }

  .how-browser-landing-eyebrow {
    display: inline-block;
    margin-bottom: 8px;

    color: #4d94c8;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .2em;
  }

  .how-browser-landing-logo {
    width: 88%;
    max-width: 185px;
    height: auto;
    display: block;
    margin: 0 0 10px;
  }

  .how-browser-landing-text {
    margin: 0 0 12px;
    color: #51718c;
    font-size: 10px;
    line-height: 1.5;
  }

  .how-browser-landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 112px;
    height: 28px;
    padding: 0 14px;

    border-radius: 999px;
    background: linear-gradient(90deg, #28b8d6, #339ddd);
    color: #fff;
    font-size: 9px;
    font-weight: 800;

    box-shadow:
      0 10px 20px rgba(46, 166, 223, .22);
  }

  .how-browser-landing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .how-browser-landing-meta span {
    color: #748da2;
    font-size: 7.3px;
    font-weight: 600;
    white-space: nowrap;
  }

  .how-browser-landing-note {
    display: block;
    margin-top: 5px;
    color: #93a8b9;
    font-size: 7px;
    line-height: 1.35;
  }

  /* hover reaction still kept */
  .how-visual-stage:has(
    .how-zoom-card:is(:hover, :focus-visible)
  ) .how-browser-demo {
    box-shadow:
      0 32px 66px rgba(25, 94, 150, .23),
      0 0 0 4px rgba(56, 176, 230, .08) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-zoom-card {
    width: 202px !important;
    padding: 11px 12px 10px !important;
  }

  .how-zoom-card--upload {
    left: 7.2% !important;
  }

  .how-zoom-card--code {
    right: 6.4% !important;
  }

  .how-zoom-card--kiosk {
    left: 6.4% !important;
  }

  .how-zoom-card--print {
    right: 6.4% !important;
  }

  .how-browser-landing-main {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  }

  .how-browser-landing-logo {
    max-width: 170px;
  }
}

/* ============================================================
   EASYPRINT HOW V4.4 HORIZONTAL CARDS
   Wide and compact floating step cards
   Monitor silhouette and preview unchanged
============================================================ */

@media (min-width: 1100px) {

  /* Keep showcase near the heading */

  .how-desktop-showcase {
    margin: 12px auto 0 !important;
  }

  .how-visual-stage {
    height: 545px !important;
  }

  .how-browser-demo {
    top: 72px !important;
  }

  /* Wider, lower cards */

  .how-zoom-card {
    box-sizing: border-box !important;

    width: 258px !important;
    min-height: 0 !important;
    height: auto !important;

    padding: 13px 14px !important;

    border-radius: 17px !important;
    transform: none !important;
  }

  /* Compact label */

  .how-zoom-meta {
    margin: 0 0 7px !important;
  }

  /* Card contents: text left, illustration right */

  .how-zoom-card {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) 84px;
    grid-template-areas:
      "meta visual"
      "copy visual"
      "more more";

    column-gap: 11px;
    align-items: center !important;
  }

  .how-zoom-meta {
    grid-area: meta;
    align-self: end;
  }

  .how-zoom-copy {
    grid-area: copy;
    align-self: start;
    margin: 0 !important;
    min-width: 0;
  }

  .how-mini-visual {
    grid-area: visual;

    width: 84px !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: scale(.78) !important;
    transform-origin: center center !important;
  }

  .how-zoom-copy h3 {
    margin: 0 0 5px !important;

    font-size: 13px !important;
    line-height: 1.23 !important;
  }

  .how-zoom-copy > p {
    margin: 0 !important;

    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  .how-zoom-more {
    grid-area: more;
    min-width: 0;
  }

  .how-zoom-more strong {
    font-size: 10.5px !important;
  }

  .how-zoom-more p {
    font-size: 10px !important;
    line-height: 1.42 !important;
  }

  /* Maintain asymmetry, keep cards near the monitor */

  .how-zoom-card--upload {
    top: 32px !important;
    left: 5.5% !important;
  }

  .how-zoom-card--code {
    top: 8px !important;
    right: 5% !important;
  }

  .how-zoom-card--kiosk {
    bottom: 57px !important;
    left: 5% !important;
  }

  .how-zoom-card--print {
    bottom: 40px !important;
    right: 5% !important;
  }

  /* Retain subtle outside step badges */

  .how-external-number {
    top: 12px !important;
    left: -14px !important;
    right: auto !important;

    width: 28px !important;
    height: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(98,186,231,.30) !important;
    border-radius: 50% !important;

    background: rgba(98,186,231,.16) !important;

    color: #56abd8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;

    box-shadow: none !important;
    text-shadow: none !important;
  }

  .how-zoom-card--code .how-external-number,
  .how-zoom-card--print .how-external-number {
    left: auto !important;
    right: -14px !important;
  }

  /* Hover interaction */

  .how-zoom-card:hover,
  .how-zoom-card:focus-visible {
    transform: translateY(-6px) scale(1.025) !important;
  }

  .how-zoom-card:hover .how-mini-visual,
  .how-zoom-card:focus-visible .how-mini-visual {
    transform: scale(.82) !important;
  }

  /* Clean browser chrome */

  .how-browser-lock {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    flex: 0 0 6px !important;

    border-radius: 50% !important;
    background: #7bb9dc !important;

    font-size: 0 !important;
    color: transparent !important;
  }

  .how-browser-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 14px !important;
    font-size: 0 !important;
    color: transparent !important;
  }

  .how-browser-menu::before {
    content: "..." !important;
    color: #8fa6b8 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-visual-stage {
    height: 525px !important;
  }

  .how-browser-demo {
    top: 78px !important;
  }

  .how-zoom-card {
    width: 245px !important;
    grid-template-columns: minmax(0, 1fr) 76px;
    column-gap: 8px;
    padding: 12px !important;
  }

  .how-mini-visual {
    width: 76px !important;
  }
}

/* ============================================================
   EASYPRINT HOW V4.7 WARM ASYMMETRY POLISH

   Slight slant returns, 8-digit sample code,
   softer asymmetry, friendlier card energy.
============================================================ */

@media (min-width: 1100px) {

  .how-visual-stage {
    height: 552px !important;
  }

  /* --------------------------------------------------------
     FLOATING CARDS — bring back subtle slant and harmony
  -------------------------------------------------------- */

  .how-zoom-card {
    border-radius: 18px !important;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.98),
        rgba(249,253,255,.96)
      ) !important;

    border: 1px solid rgba(179, 220, 241, .92) !important;

    box-shadow:
      0 22px 42px rgba(39, 106, 146, .11),
      0 8px 16px rgba(39, 106, 146, .06) !important;

    transform:
      rotate(var(--card-tilt, 0deg)) !important;

    transform-origin: center center !important;

    transition:
      transform .30s cubic-bezier(.2,.8,.2,1),
      box-shadow .28s ease,
      border-color .25s ease,
      background .25s ease !important;
  }

  .how-zoom-card--upload {
    --card-tilt: -2deg;
    --card-hover-tilt: -.7deg;
    top: 28px !important;
    left: 4.5% !important;
  }

  .how-zoom-card--code {
    --card-tilt: 2deg;
    --card-hover-tilt: .8deg;
    top: 2px !important;
    right: 4.1% !important;
  }

  .how-zoom-card--kiosk {
    --card-tilt: -1.5deg;
    --card-hover-tilt: -.5deg;
    bottom: 58px !important;
    left: 4.2% !important;
  }

  .how-zoom-card--print {
    --card-tilt: 1.5deg;
    --card-hover-tilt: .5deg;
    bottom: 34px !important;
    right: 4.3% !important;
  }

  .how-zoom-card:hover,
  .how-zoom-card:focus-visible {
    transform:
      translateY(-7px)
      rotate(var(--card-hover-tilt, 0deg))
      scale(1.02) !important;

    border-color: rgba(133, 198, 231, .95) !important;

    box-shadow:
      0 28px 54px rgba(35, 108, 160, .16),
      0 0 0 3px rgba(94, 182, 229, .08) !important;
  }

  /* --------------------------------------------------------
     INTERNAL CARD LAYOUT — keep readable, soften the stiffness
  -------------------------------------------------------- */

  .how-zoom-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "meta visual"
      "copy visual"
      "more more" !important;

    column-gap: 11px !important;
    row-gap: 0 !important;
    align-items: center !important;

    padding: 14px 14px 13px !important;
    overflow: visible !important;
  }

  .how-zoom-card::after {
    content: none !important;
    display: none !important;
  }

  .how-zoom-meta {
    grid-area: meta !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    align-self: end !important;
  }

  .how-zoom-label {
    color: #85a9c2 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .14em !important;
  }

  .how-zoom-copy {
    grid-area: copy !important;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    align-self: start !important;
  }

  .how-zoom-copy h3 {
    margin: 0 0 6px !important;
    color: #1b5488 !important;
    font-size: 13.2px !important;
    font-weight: 760 !important;
    line-height: 1.22 !important;
  }

  .how-zoom-copy > p {
    margin: 0 !important;
    color: #6f879d !important;
    font-size: 10px !important;
    line-height: 1.45 !important;
  }

  .how-mini-visual {
    grid-area: visual !important;

    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 82px !important;
    max-width: 82px !important;
    height: 92px !important;
    max-height: 92px !important;

    margin: 0 !important;
    padding: 6px !important;

    border: 1px solid rgba(201, 230, 245, .82) !important;
    border-radius: 15px !important;

    background:
      linear-gradient(
        180deg,
        rgba(247, 252, 255, .86),
        rgba(238, 248, 253, .88)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 8px 18px rgba(52, 138, 190, .05) !important;

    overflow: hidden !important;
    transform: translateY(1px) !important;
  }

  .how-zoom-card:hover .how-mini-visual,
  .how-zoom-card:focus-visible .how-mini-visual {
    transform: translateY(0) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 10px 22px rgba(52, 138, 190, .08) !important;
  }

  /* --------------------------------------------------------
     STEP-SPECIFIC VISUAL TUNING
  -------------------------------------------------------- */

  .how-zoom-card--upload .how-paper-stack {
    transform: scale(.78) rotate(-2deg) !important;
    transform-origin: center center !important;
  }

  .how-zoom-card--upload .how-mini-chip {
    display: none !important;
  }

  .how-zoom-card--code .how-mini-code {
    gap: 4px !important;
    padding: 8px 6px !important;
    background: #f0f8fd !important;
    border: 1px solid #d9edf8 !important;
    border-radius: 11px !important;
  }

  .how-zoom-card--code .how-mini-code > span,
  .how-zoom-card--code .how-mini-code > small {
    display: none !important;
  }

  .how-zoom-card--code .how-mini-code > strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #17649b !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.28 !important;
    letter-spacing: .05em !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .how-zoom-card--kiosk .how-kiosk-body {
    transform: scale(.77) rotate(1deg) !important;
    transform-origin: center center !important;
  }

  .how-zoom-card--kiosk .how-kiosk-antenna {
    display: none !important;
  }

  .how-zoom-card--print .how-mini-printer {
    transform: scale(.80) rotate(-1deg) !important;
    transform-origin: center center !important;
  }

  .how-zoom-card--print .how-print-success {
    display: none !important;
  }

  /* --------------------------------------------------------
     HOVER DETAILS
  -------------------------------------------------------- */

  .how-zoom-more {
    grid-area: more !important;

    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;

    border-top: 1px solid transparent !important;
  }

  .how-zoom-card:hover .how-zoom-more,
  .how-zoom-card:focus-visible .how-zoom-more {
    max-height: 180px !important;
    margin-top: 11px !important;
    padding-top: 10px !important;

    opacity: 1 !important;
    visibility: visible !important;

    border-top-color: #e2eef7 !important;
  }

  .how-zoom-more strong {
    font-size: 10.5px !important;
    color: #2b7fb5 !important;
  }

  .how-zoom-more p {
    margin: 4px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.43 !important;
    color: #6e879d !important;
  }

  /* --------------------------------------------------------
     OUTSIDE NUMBERS — softer, subtler, more intentional
  -------------------------------------------------------- */

  .how-external-number {
    position: absolute !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 30px !important;
    height: 22px !important;
    padding: 0 7px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(126, 188, 223, .26) !important;

    background: rgba(227, 243, 252, .72) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color: #79aed1 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;

    box-shadow: none !important;
    text-shadow: none !important;
  }

  .how-external-number::after {
    content: none !important;
  }

  .how-zoom-card--upload .how-external-number {
    top: 10px !important;
    left: -26px !important;
    right: auto !important;
  }

  .how-zoom-card--code .how-external-number {
    top: 14px !important;
    right: -28px !important;
    left: auto !important;
  }

  .how-zoom-card--kiosk .how-external-number {
    top: 11px !important;
    left: -28px !important;
    right: auto !important;
  }

  .how-zoom-card--print .how-external-number {
    top: 14px !important;
    right: -28px !important;
    left: auto !important;
  }

  .how-zoom-card:hover .how-external-number,
  .how-zoom-card:focus-visible .how-external-number {
    background: rgba(227, 243, 252, .9) !important;
    border-color: rgba(111, 180, 220, .34) !important;
    color: #5ba3cf !important;
    transform: translateY(-1px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-visual-stage {
    height: 530px !important;
  }

  .how-zoom-card {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    column-gap: 9px !important;
    padding: 13px 13px 12px !important;
  }

  .how-mini-visual {
    width: 78px !important;
    max-width: 78px !important;
    height: 88px !important;
    max-height: 88px !important;
  }

  .how-zoom-card--upload {
    left: 4.8% !important;
  }

  .how-zoom-card--code {
    right: 4.4% !important;
  }

  .how-zoom-card--kiosk {
    left: 4.6% !important;
  }

  .how-zoom-card--print {
    right: 4.6% !important;
  }

  .how-zoom-card--upload .how-external-number,
  .how-zoom-card--kiosk .how-external-number {
    left: -24px !important;
  }

  .how-zoom-card--code .how-external-number,
  .how-zoom-card--print .how-external-number {
    right: -24px !important;
  }
}

/* ============================================================
   EASYPRINT HOW V4.7.1 LIFT SHOWCASE
   Move the whole desktop composition slightly closer to heading
============================================================ */

@media (min-width: 1100px) {

  .how-desktop-showcase {
    margin: -14px auto 0 !important;
  }

  .how-visual-stage {
    transform: translateY(-10px);
  }
}

@media (min-width: 1100px) and (max-width: 1280px) {

  .how-desktop-showcase {
    margin: -10px auto 0 !important;
  }

  .how-visual-stage {
    transform: translateY(-8px);
  }
}

/* ============================================================
   EASYPRINT HOW PRICING TYPOGRAPHY HARMONY V1
   Match How It Works title and subtitle to Pricing
   No changes to the monitor or floating cards
============================================================ */

@media (min-width: 761px) {

  #how-it-works .how-heading .section-title {
    font-size: clamp(35px, 3.25vw, 50px) !important;
    font-weight: 850 !important;
    line-height: 1.04 !important;
    letter-spacing: -0.045em !important;
    margin: 14px auto 14px !important;
  }

  #how-it-works .how-subtitle {
    font-size: 14px !important;
    line-height: 1.62 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    max-width: 355px !important;
    margin: 0 auto 24px !important;
  }

  #how-it-works .how-kicker {
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .21em !important;
  }
}

@media (max-width: 760px) {

  #how-it-works .how-heading .section-title {
    font-size: clamp(31px, 8.4vw, 41px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.04em !important;
    font-weight: 850 !important;
  }

  #how-it-works .how-subtitle {
    font-size: 14px !important;
    line-height: 1.62 !important;
    font-style: normal !important;
  }

  #how-it-works .how-kicker {
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: .21em !important;
  }
}