/* ======================================================================
   Home page refresh -- index.blade.php, book-consult, why-scansimple.

   Ported from the approved mockup overlay
   (docs/mockups/free-trial/overlay/patch.js: modernize, labelCounterTab,
   promotePrinters and the hero art), so the live page matches the
   after-home mockup. The trial's hero CTA, explainer, pricing and FAQ
   are styled in marketing-trial.css.
   ====================================================================== */

/* The hero gets room under its actions for the USP strip that is pulled
   up over it. */
#hm-banner{padding-bottom:150px !important}

/* ====================================================================
   Modernisation pass over the rest of the home page.
   Presentation only -- no copy is changed. The moves are consistent
   throughout: legacy square boxes become rounded surfaces with real
   elevation, the 2010s "pale box + dark arrow tile" button becomes
   the pill the nav already uses, and headings get the tighter
   tracking the brand type is drawn for.
   ==================================================================== */
:root{--m-r:22px;--m-r-sm:14px;--m-ink:#18333E;--m-teal:#5FC4BB;--m-deep:#17867A;
  --m-mint:#A8E4DF;--m-line:rgba(24,51,62,.08);
  --m-sh:0 1px 2px rgba(24,51,62,.05),0 14px 34px -16px rgba(24,51,62,.24);
  --m-sh-lg:0 1px 2px rgba(24,51,62,.06),0 26px 56px -22px rgba(19,44,54,.42)}

/* Headings: the brand face is drawn tight; the stock CSS sets none. */
#want-labels h3,#special-solutions h2,#watch-demo-txt h4,#testimonials h2,
#send-message h2,#scan-simple h2,.pricetag{letter-spacing:-.03em !important}

/* --- legacy buttons -> pills --------------------------------------- */
.td_button.btn-login{
  display:inline-flex !important;align-items:center;gap:14px;
  background:var(--m-mint) !important;color:var(--m-ink) !important;
  border-radius:104px !important;padding:12px 14px 12px 32px !important;
  font-size:15px !important;font-weight:700 !important;letter-spacing:.01em;
  line-height:1 !important;text-align:left !important;box-shadow:var(--m-sh);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.td_button.btn-login:hover{background:var(--m-teal) !important;
  transform:translateY(-1px);box-shadow:var(--m-sh-lg)}
.td_button.btn-login::before,
.td_button.btn-login::after{content:none !important;display:none !important}
.td_button.btn-login > span{
  position:static !important;width:36px !important;height:36px !important;
  border-radius:50% !important;background:var(--m-ink) !important;color:#fff !important;
  display:grid !important;place-items:center;padding:0 !important;line-height:1 !important;
  top:auto !important;right:auto !important;flex:0 0 auto}
.td_button.btn-login > span i{color:#fff !important;font-size:13px !important}

/* The hero's secondary action carries its icon FIRST (.lft), so the
   padding built for a trailing icon lands inverted -- icon inset,
   text crowding the right edge. It also shouldn't match the primary
   in weight: on the dark hero it reads as an outline beside the
   solid teal pill instead of competing with it. */
#hm-banner .td_button.btn-login.lft{
  background:rgba(255,255,255,.09) !important;border:1px solid rgba(255,255,255,.32);
  color:#fff !important;padding:10px 32px 10px 10px !important;gap:15px;
  box-shadow:none !important}
#hm-banner .td_button.btn-login.lft:hover{background:rgba(255,255,255,.17) !important;
  border-color:rgba(255,255,255,.55);color:#fff !important;transform:translateY(-1px)}
#hm-banner .td_button.btn-login.lft > span{background:#fff !important;
  width:40px !important;height:40px !important}
#hm-banner .td_button.btn-login.lft > span i{color:#18333E !important;
  font-size:14px !important;margin-left:2px}

/* --- "Want to make labels" video ----------------------------------- */
#want-labels .col-md-12 > a > img{border-radius:var(--m-r);box-shadow:var(--m-sh-lg);display:block}

/* --- Book your consult --------------------------------------------- */
.hp-consult{display:flex;align-items:stretch;gap:0;border-radius:var(--m-r);overflow:hidden;
  box-shadow:var(--m-sh);margin:8px 0 12px}
.hp-consult .book-consult{flex:0 0 40%;width:auto !important;max-width:none !important;
  padding:30px 34px !important;background:linear-gradient(140deg,#1D4250 0%,#18333E 100%) !important;
  display:flex;align-items:center;gap:18px}
.hp-consult .book-consult a{font-size:19px !important;font-weight:700;letter-spacing:-.02em;
  text-decoration:none !important}
.hp-consult .signup-txt{flex:1;background:var(--m-teal);padding:30px 34px !important;
  display:flex;align-items:center}
.hp-consult .signup-txt p{font-size:16px !important;line-height:1.6 !important;
  color:#123039 !important;margin:0}

/* --- Scan / Set / Print --------------------------------------------
   Photo tiles. With a mouse, the photograph fills a portrait tile, the
   step name and its one-liner sit on a navy scrim at the foot, and the
   longer explanation (.more) opens on hover or keyboard focus behind
   the corner "+". Touch screens can't hover, so they get a card
   instead: photo on top, the title overlapping its faded lower edge,
   and the full copy underneath -- open text over the photo would bury
   the subject. The art is generated with its lower third kept dark. */
.hp-steps > [class*="col-"]{display:flex}
.hp-step-tile{position:relative;margin:0;width:100%;display:flex;flex-direction:column;
  border-radius:var(--m-r);overflow:hidden;isolation:isolate;background:var(--m-ink);
  box-shadow:var(--m-sh-lg);color:#fff;outline:none;
  transition:transform .35s ease,box-shadow .35s ease}
.hp-step-tile > img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:center 35%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}

.hp-step-tile .n{position:absolute;top:20px;left:20px;z-index:2;display:inline-flex;
  align-items:center;gap:8px;padding:7px 13px 7px 11px;border-radius:999px;
  background:rgba(17,38,47,.5);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;line-height:1;color:#fff}
.hp-step-tile .n::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--m-teal);box-shadow:0 0 0 3px rgba(95,196,187,.28)}
.hp-step-tile .plus{display:none}

.hp-step-tile figcaption{position:relative;z-index:2;flex:1 1 auto;margin-top:-92px;
  padding:46px 26px 28px;text-align:left;
  background:linear-gradient(180deg,rgba(24,51,62,0) 0,rgba(24,51,62,.86) 64px,
    var(--m-ink) 104px)}
.hp-step-tile .bar{display:block;width:34px;height:3px;border-radius:2px;
  background:var(--m-teal);margin-bottom:16px;transition:width .45s ease}
.hp-step-tile h4{font-size:30px !important;line-height:1.05 !important;font-weight:700;
  letter-spacing:-.03em;color:#fff !important;margin:0 0 10px !important;
  text-align:left !important}
.hp-step-tile p{font-size:16px !important;line-height:1.55 !important;
  color:rgba(255,255,255,.88) !important;padding:0 !important;margin:0 !important;
  text-align:left !important}
.hp-step-tile .more{display:grid;grid-template-rows:1fr}
.hp-step-tile .more > div{overflow:hidden;min-height:0}
.hp-step-tile .more p{font-size:15px !important;color:#CFE0E4 !important;
  padding-top:14px !important;margin-top:14px !important;
  border-top:1px solid rgba(255,255,255,.16)}

@media (max-width:991px){
  .hp-step-tile > img{aspect-ratio:16/9}
}
@media (max-width:575px){
  .hp-step-tile > img{aspect-ratio:4/3}
  .hp-step-tile h4{font-size:28px !important}
  .hp-step-tile figcaption{padding:46px 22px 24px}
}

/* --- with a mouse: full-bleed photo, text revealed on hover ---------- */
@media (hover:hover) and (pointer:fine){
  .hp-step-tile{display:block;min-height:440px;aspect-ratio:4/5}
  .hp-step-tile > img{position:absolute;top:0;left:0;height:100%;aspect-ratio:auto;
    object-position:center 30%}
  .hp-step-tile::before,
  .hp-step-tile::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
    pointer-events:none;z-index:1}
  /* ::before is the resting scrim, ::after the deeper one under the
     open panel. */
  .hp-step-tile::before{background:linear-gradient(180deg,rgba(17,38,47,0) 38%,
    rgba(17,38,47,.62) 64%,rgba(15,33,41,.95) 100%)}
  .hp-step-tile::after{background:linear-gradient(180deg,rgba(17,38,47,.12) 0%,
    rgba(17,38,47,.7) 45%,rgba(15,33,41,.97) 100%);opacity:0;transition:opacity .45s ease}
  .hp-step-tile figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;
    padding:0 28px 28px;background:none;text-shadow:0 1px 12px rgba(10,24,30,.35)}
  .hp-step-tile h4{font-size:32px !important}

  .hp-step-tile .plus{display:block;position:absolute;top:18px;right:18px;z-index:2;
    width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.26);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    transition:transform .4s ease,background .3s ease,border-color .3s ease}
  .hp-step-tile .plus::before,
  .hp-step-tile .plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;
    height:2px;margin:-1px 0 0 -7px;border-radius:2px;background:#fff}
  .hp-step-tile .plus::after{transform:rotate(90deg)}

  .hp-step-tile .more{grid-template-rows:0fr;opacity:0;transform:translateY(10px);
    transition:grid-template-rows .45s ease,opacity .35s ease,transform .45s ease}

  .hp-step-tile:hover,
  .hp-step-tile:focus-visible{transform:translateY(-4px);
    box-shadow:0 1px 2px rgba(24,51,62,.06),0 34px 64px -24px rgba(19,44,54,.55)}
  .hp-step-tile:hover > img,
  .hp-step-tile:focus-visible > img{transform:scale(1.06)}
  .hp-step-tile:hover::after,
  .hp-step-tile:focus-visible::after{opacity:1}
  .hp-step-tile:hover .more,
  .hp-step-tile:focus-visible .more{grid-template-rows:1fr;opacity:1;transform:none}
  .hp-step-tile:hover .bar,
  .hp-step-tile:focus-visible .bar{width:58px}
  .hp-step-tile:hover .plus,
  .hp-step-tile:focus-visible .plus{transform:rotate(45deg);background:var(--m-teal);
    border-color:var(--m-teal)}
}
@media (hover:hover) and (pointer:fine) and (max-width:991px){
  /* Stacked one per row: landscape, so a tile doesn't run a screen tall. */
  .hp-step-tile{aspect-ratio:16/10;min-height:400px}
}
.hp-step-tile:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--m-teal),var(--m-sh-lg)}
@media (prefers-reduced-motion:reduce){
  .hp-step-tile,.hp-step-tile > img,.hp-step-tile::after,.hp-step-tile .more,
  .hp-step-tile .bar,.hp-step-tile .plus{transition:none !important}
  .hp-step-tile:hover,.hp-step-tile:focus-visible,
  .hp-step-tile:hover > img,.hp-step-tile:focus-visible > img{transform:none}
}

/* --- Zebra band -----------------------------------------------------
   Its own full-bleed section now, like the trial blocks around it, so
   the green runs edge to edge instead of stopping at the container. It
   fades out to the white of the pricing section below, so the seam
   between them disappears. The legacy sheet sets margin-top:50px and
   padding:50px 30px, and 50px 15px !important on phones; the id+class
   selector is what outranks that. */
#want-labels{padding-bottom:90px}
#special-solutions.hp-compat{margin:0;padding:100px 0 72px !important;
  background:radial-gradient(46% 36% at 78% 16%,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#ACD172 0%,#C4DE9C 30%,#E4F0D5 62%,#F7FAF3 86%,#FFFFFF 100%)}
#special-solutions h2{font-size:42px !important;line-height:1.1 !important;margin:0}
.hp-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.6);
  border:1px solid rgba(24,51,62,.12);color:var(--m-ink);border-radius:999px;padding:7px 15px;
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-bottom:22px}
.hp-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--m-deep);display:block}
#special-solutions .hp-compat-lede{font-size:18px !important;line-height:1.65 !important;
  color:#243B45 !important;max-width:52ch;margin:24px 0 0}
#special-solutions .hp-chips{margin-top:28px}
.hp-compat-art{position:relative;display:flex;justify-content:center;align-items:center}
.hp-compat-art::before{content:"";position:absolute;z-index:0;pointer-events:none;inset:4% 8%;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0))}
.hp-compat-art img{position:relative;z-index:1;display:block;max-width:100%;height:auto;
  filter:drop-shadow(0 26px 40px rgba(19,44,54,.28))}
#special-solutions .hp-fit-title{margin:96px 0 36px;text-align:left}
.hp-fit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:991px){
  #special-solutions.hp-compat{padding:80px 0 64px !important}
  .hp-compat-art{margin-top:48px}
  .hp-fit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  #special-solutions .hp-fit-title{margin-top:72px}
}
@media (max-width:640px){
  #want-labels{padding-bottom:70px}
  #special-solutions.hp-compat{padding:64px 0 48px !important}
  #special-solutions .hp-compat-lede{font-size:16.5px !important}
  .hp-fit-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  #special-solutions .hp-fit-title{margin:56px 0 26px}
}

/* --- "How ScanSimple fits" cards ------------------------------------ */
.special-sol-bg{background:linear-gradient(158deg,#1E4655 0%,#18333E 60%,#152E38 100%) !important;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--m-r) !important;
  padding:30px 28px 32px !important;text-align:left !important;height:100%;
  box-shadow:var(--m-sh-lg);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
.special-sol-bg:hover{transform:translateY(-3px)}
.special-sol-bg h4{font-size:21px !important;line-height:1.25 !important;font-weight:700;
  letter-spacing:-.025em;color:#fff !important;text-align:left !important;margin:0 0 14px !important}
.special-sol-bg h4 br{display:none}
.special-sol-bg p{font-size:15.5px !important;line-height:1.62 !important;
  color:#BCD1D7 !important;text-align:left !important;margin:0 !important}
.special-sol-bg .hp-rule{width:34px;height:3px;border-radius:2px;background:var(--m-teal);
  margin-bottom:20px;display:block}


/* --- Testimonials --------------------------------------------------- */
#testimonials h2{font-size:42px !important}
#testimonials .carousel-caption .row{background:#fff;border-radius:var(--m-r);overflow:hidden;
  box-shadow:var(--m-sh-lg);margin:0;align-items:stretch}
#testimonials .carousel-caption .col-md-3{padding:0 !important}
#testimonials .carousel-caption .col-md-3 img{width:100%;height:100%;object-fit:cover;display:block}
#testimonials .testimonial-padding{padding:40px 44px !important;text-align:left;
  display:flex;flex-direction:column;justify-content:center}
#testimonials .testimonial-padding > img{height:28px !important;width:auto !important;
  max-width:150px !important;object-fit:contain;vertical-align:middle}
#testimonials .testimonial-padding > strong{font-size:17px;letter-spacing:-.01em;
  color:var(--m-ink);vertical-align:middle}
#testimonials .testimonial-padding p{font-size:17px !important;line-height:1.66 !important;
  color:#33434E !important;text-align:left !important}
#testimonials .testimonial-name{font-size:19px !important;font-weight:700;
  letter-spacing:-.02em;color:var(--m-ink)}
#testimonials .hp-quote{font-size:56px;line-height:1;color:var(--m-teal);
  font-family:var(--font-sans);display:block;margin-bottom:-14px}

/* --- Subscribe ------------------------------------------------------ */
#subscribe .row{border-radius:var(--m-r);overflow:hidden;box-shadow:var(--m-sh)}
#subscribe input[type=email],#subscribe input[type=text]{border:0 !important;
  font-size:16px !important;padding:22px 26px !important}

/* --- Contact form --------------------------------------------------- */
#send-message .form-control,#send-message input,#send-message select,#send-message textarea{
  border-radius:var(--m-r-sm) !important;border:1px solid rgba(24,51,62,.1) !important;
  padding:15px 18px !important;font-size:16px !important;box-shadow:0 1px 2px rgba(24,51,62,.04);
  transition:border-color .15s ease,box-shadow .15s ease}
#send-message .form-control:focus,#send-message input:focus,#send-message textarea:focus{
  border-color:var(--m-teal) !important;box-shadow:0 0 0 3px rgba(95,196,187,.22) !important;
  outline:none !important}
#send-message label{font-size:14px !important;font-weight:600 !important;color:#3E4E59 !important}
#send-message h2{font-size:42px !important}

/* --- Why ScanSimple accordion --------------------------------------- */
#scan-simple h2{font-size:42px !important}
#scan-simple .card,#scan-simple .accordion > div{border-radius:var(--m-r-sm) !important;
  border:1px solid var(--m-line) !important;background:#fff !important;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(24,51,62,.04);overflow:hidden}
#scan-simple .card-header,#scan-simple [data-toggle=collapse]{border-bottom:0 !important;
  padding:18px 22px !important;font-weight:700 !important;letter-spacing:-.01em}

/* --- Printed-labels counter tab -------------------------------------
   The live total was a small figure squeezed into a third of the USP
   strip. Lifted onto a tab seated on the strip's top edge it reads as
   the proof point it is, and hands the strip's third panel back to
   the printer brands. */
.hp-counter-tab{display:inline-flex;align-items:center;gap:18px;
  background:linear-gradient(140deg,#214B5C 0%,#18333E 60%,#142C36 100%);
  color:#fff;border-radius:18px 18px 0 0;padding:16px 30px 15px;
  box-shadow:0 -10px 26px -14px rgba(10,28,36,.5);position:relative;z-index:1}
.hp-counter-tab .live{display:inline-flex;align-items:center;gap:8px;font-size:11px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FD8CD}
.hp-counter-tab .live i{width:7px;height:7px;border-radius:50%;background:#5FC4BB;display:block;
  box-shadow:0 0 0 4px rgba(95,196,187,.22)}
.hp-counter-tab .num{font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;margin:0;padding:0 !important}
.hp-counter-tab .lab{font-size:15px;line-height:1.35;color:#B9CFD5;letter-spacing:-.005em}
.hp-counter-tab .rule{width:1px;height:30px;background:rgba(255,255,255,.16);flex:0 0 auto}
.hp-counter-wrap{display:flex;justify-content:center;margin:-84px auto 0;
  max-width:1140px;padding:0 15px}
.hp-counter-wrap ~ #hm-banner-usp{margin-top:0 !important}

/* the strip is two panels once the counter moves out, and the printer
   panel takes the larger share: it is carrying a two-brand story, not
   a logo. Each brand gets the same shape, the same weight and its own
   role, because "we support both" only lands if both look equally at
   home here. */
#usp-2.hp-usp-wide{align-items:stretch;text-align:left;padding:32px 34px !important;
  background:linear-gradient(168deg,#FFFFFF 0%,#F2F8F8 100%) !important;justify-content:center}
#usp-2.hp-usp-wide .hp-usp-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#0F6E66;margin-bottom:18px;display:flex;align-items:center;gap:9px}
#usp-2.hp-usp-wide .hp-usp-kicker::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,rgba(23,134,122,.28),rgba(23,134,122,0))}
.hp-brandgrid{display:grid;grid-template-columns:1fr 1px 1fr;gap:0 24px;align-items:stretch}
.hp-brandgrid .vr{background:linear-gradient(180deg,rgba(24,51,62,0),rgba(24,51,62,.13),rgba(24,51,62,0))}
.hp-brandcell{display:flex;flex-direction:column}
.hp-brandcell .logo{height:30px;display:flex;align-items:center;margin-bottom:14px}
.hp-brandcell .logo img{max-height:30px;max-width:124px;width:auto !important;object-fit:contain;
  margin:0 !important;padding:0 !important}
.hp-brandcell .logo img[alt="DYMO"]{max-height:23px}
.hp-brands img[alt="DYMO"]{max-height:26px}
.hp-brandcell .role{font-size:16.5px !important;font-weight:700 !important;letter-spacing:-.02em;
  color:#18333E !important;margin:0 0 10px !important;line-height:1.3}
.hp-brandcell ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.hp-brandcell li{display:flex;gap:9px;font-size:14px;line-height:1.45;color:#53636E}
.hp-brandcell li::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:#5FC4BB;margin-top:7px}
.hp-usp-foot{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;margin-top:22px;
  padding-top:18px;border-top:1px solid rgba(24,51,62,.09);font-size:13.5px;color:#53636E}
.hp-usp-foot b{color:#18333E;font-weight:600}
.hp-usp-foot .dot{width:4px;height:4px;border-radius:50%;background:#C2CDD3;flex:0 0 auto}
@media (max-width:900px){
  .hp-counter-tab{gap:12px;padding:14px 20px;flex-wrap:wrap}
  .hp-counter-tab .num{font-size:26px}
  .hp-counter-tab .rule{display:none}
  #usp-2.hp-usp-wide{padding:26px 22px !important}
  .hp-brandgrid{grid-template-columns:1fr;gap:22px}
  .hp-brandgrid .vr{display:none}
}

/* --- Zebra + DYMO -----------------------------------------------------
   The platform prints to both, but the marketing page still reads
   Zebra-only with a "more options coming soon" asterisk. */
.hp-brands{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px}
.hp-brands img{max-width:118px !important;max-height:34px;width:auto !important;
  object-fit:contain;margin:0 !important;padding:0 !important}
.hp-brands .sep{width:1px;height:26px;background:rgba(24,51,62,.16);flex:0 0 auto}
.hp-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hp-chip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.72);
  border:1px solid rgba(24,51,62,.1);border-radius:999px;padding:9px 18px 9px 12px;
  font-size:14px;font-weight:600;color:#18333E;box-shadow:0 1px 2px rgba(24,51,62,.05)}
.hp-chip img{height:17px;width:auto;object-fit:contain}

/* --- USP strip under the hero --------------------------------------
   Three flush squares half-overlapping the hero. It keeps the brand's
   teal / light / ink split, but becomes one rounded surface that
   genuinely floats: equal panel heights, centred content, and the
   live label counter set as a proper statistic. */
#hm-banner-usp{margin-top:-84px !important}
#hm-banner-usp .row{border-radius:var(--m-r);overflow:hidden;margin:0;
  box-shadow:0 34px 64px -26px rgba(10,28,36,.62),0 2px 6px rgba(10,28,36,.16)}
#hm-banner-usp .row{align-items:stretch}
#hm-banner-usp .row > [class*="col-md"]{display:flex}
#usp-1,#usp-2,#usp-3{min-height:238px !important;width:100%;display:flex;flex-direction:column;
  justify-content:center;padding:40px 42px !important}
#usp-1{background:linear-gradient(150deg,#67CEC4 0%,#4FB8AF 100%) !important}
#usp-1 p{font-size:16.5px !important;line-height:1.68 !important;color:#0E3039 !important;margin:0}
#usp-2{background:#fff !important;align-items:center;text-align:center}
#usp-2 img{max-width:152px;padding:0 !important;margin-bottom:16px}
#usp-2 p{font-size:15px !important;line-height:1.5 !important;color:#2C3E48 !important;
  font-weight:600;margin:0 !important;text-wrap:balance;max-width:24ch}
#usp-2 small{font-size:12.5px !important;color:#7C8B95 !important;margin-top:6px;display:block}
#usp-3{background:linear-gradient(158deg,#20495A 0%,#18333E 62%,#142C36 100%) !important;
  align-items:center;text-align:center}
#usp-3 h3{font-size:58px !important;line-height:1 !important;font-weight:700 !important;
  letter-spacing:-.04em;color:#fff !important;padding:0 !important;margin:0 0 6px !important;
  font-variant-numeric:tabular-nums}
#usp-3 .hp-usp-rule{width:34px;height:3px;border-radius:2px;background:var(--m-teal);
  margin:14px 0 0;display:block}
#usp-3 p{font-size:15px !important;line-height:1.45 !important;color:#B9CFD5 !important;
  letter-spacing:.02em;margin:0 !important}
@media (max-width:900px){
  #hm-banner-usp{margin-top:-40px !important}
  #usp-1,#usp-2,#usp-3{min-height:0 !important;padding:30px 26px !important}
}

/* --- fixes after first look ----------------------------------------- */
/* consult: the two halves are grid columns, so they need to be made
   flex before they will match heights inside the rounded surface. */
.hp-consult .book-consult a{white-space:nowrap}

/* subscribe: one rounded teal card holding a pill-shaped field. The
   pill is a flex row -- the field, then the submit -- so the submit
   sits centred in the field's height with the same 8px inset on its
   top, bottom and right, instead of being pinned to the top-right
   corner and clipped at the bottom. The field's vertical padding is
   what sets that inset: 26px + 24px line + 26px = 76px tall, around
   a 60px button. */
#subscribe .subscribe-bg{border-radius:var(--m-r);padding:18px 20px !important;
  box-shadow:var(--m-sh)}
#subscribe .subscribe-bg > .row{align-items:center;margin:0;box-shadow:none;
  border-radius:0;overflow:visible}
#subscribe .subscribe-bg p{margin:0;font-size:16px !important;line-height:1.55 !important;
  color:#123039 !important}
#subscribe form{background:transparent;padding:0;box-shadow:none;display:block}
#subscribe .bg-white.form-group{display:flex;align-items:center;gap:8px;
  padding:0 8px 0 0;border-radius:999px !important;overflow:hidden;margin:0 !important;
  box-shadow:0 1px 2px rgba(24,51,62,.08)}
#subscribe .bg-white.form-group input[name=email]{
  flex:1 1 auto;min-width:0;padding:26px 16px 26px 26px !important;font-size:16px !important;
  border-radius:999px !important;box-shadow:none !important}
#subscribe .bg-white.form-group input[name=email]:focus{outline:none !important;box-shadow:none !important}
#subscribe .bg-white.form-group button{flex:0 0 auto;margin:0 !important}
/* Phones: the pill is only ~290px wide, so field and submit can't share
   a row. Stack them -- field on top, full-width submit below -- and
   soften the radius to the field's half-height so the stacked pill's
   corners stay clear of the submit's own. */
@media (max-width:575px){
  #subscribe .bg-white.form-group{flex-wrap:wrap;padding:0 8px 8px;border-radius:38px !important}
  #subscribe .bg-white.form-group input[name=email]{flex:1 1 100%;padding-left:18px !important}
  #subscribe .bg-white.form-group button{width:100%;justify-content:space-between}
}

/* testimonial: the portrait column must stretch to the card. */
#testimonials .carousel-caption .col-md-3{display:flex}
#testimonials .carousel-caption .row{overflow:hidden}

@media (max-width:900px){
  .hp-consult{flex-direction:column}
  .hp-consult .book-consult{flex:1 1 auto}
  #special-solutions h2{font-size:30px !important}
  #testimonials h2,#send-message h2,#scan-simple h2{font-size:30px !important}
}

/* --- Hero product shot -----------------------------------------------
   The stock art is one scanner over a barcode. The platform now drives
   two printer families, a corded scanner and the phone, so the hero
   carries the whole kit. It has to run larger than its 475px column: it
   is right-aligned, allowed to bleed into the page gutter, and centred
   against the text block rather than pinned to the top by the stock
   margin-bottom:150px. A soft teal wash behind it picks up the rim light
   in the render and keeps the cut-out from floating on the gradient.
   .hp-hero-shot is the animated stage's box (partials/hero-stage.blade.php,
   styled by public/hero-stage/hero-stage.css). Its design canvas is
   2248x2040: the 2176x1984 photo plate at the top-left plus room on the
   right and bottom for the label roll at full size. So the box is 2248/2176
   (3.3%) wider than the plate, and every width below is the plate width
   the hero always had (525 / 470 / 380) x 1.033, with the extra width
   added to the right-hand bleed: the plate keeps its size and its left
   edge, and the text column never sees the difference. The bleed is
   capped by the real gutter (container 1140 / 960, col padding 15, 12px
   to spare) so the roll is never clipped by body{overflow-x:hidden} near
   a breakpoint; there the flex item shrinks a few px instead.
   The stage bakes the drop-shadow into a static layer (--hs-own-shadow):
   a CSS filter here would be re-rendered on every animated frame. */
.hp-hero-shotcol{position:relative;display:flex;align-items:center;justify-content:flex-end}
.hp-hero-shotcol::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-96px;left:-10%;top:6%;height:88%;
  background:radial-gradient(56% 52% at 56% 52%,rgba(95,196,187,.30) 0%,
    rgba(95,196,187,.11) 45%,rgba(95,196,187,0) 72%)}
/* 558 flex-shrinks to 445 + 98 = 543 in the 445px column: plate 525 */
.hp-hero-shot{position:relative;z-index:1;display:block;width:558px;max-width:none;
  height:auto;margin:0 max(-98px,calc(12px - 15px - (100vw - 1140px) / 2)) 0 auto !important;
  --hs-own-shadow:block}
@media (max-width:1399px){
  .hp-hero-shot{width:486px;margin-right:max(-50px,calc(12px - 15px - (100vw - 1140px) / 2)) !important}
  .hp-hero-shotcol::before{right:-48px}
}
/* Below 1200 the container drops to 960 and col-md-5 gives the shot a
   370px box, so an over-wide render starts eating the CTA row. */
@media (max-width:1199px){
  .hp-hero-shot{width:393px;margin-right:max(-41px,calc(12px - 15px - (100vw - 960px) / 2)) !important}
  .hp-hero-shotcol::before{right:-34px}
}
@media (max-width:991px){
  .hp-hero-shotcol{justify-content:center;margin-top:40px}
  .hp-hero-shot{width:min(100%,486px);margin:0 auto !important}
  .hp-hero-shotcol::before{left:0;right:0}
}