/* ============================================================================
   TESAE — section styles.
   Everything is fluid: grids reflow with minmax/auto-fit, nothing carries a fixed
   width or height, and every value comes from variables.css.
   ========================================================================== */

/* ------------------------------------------------------------------- shared */

/* Grid and flex children default to min-width:auto, so a long word can push a column
   wider than its own track and spill past the viewport. Declaring minmax(0, 1fr) on
   the track is not enough — the item has to opt out too. */
.tesae-hero__lead,
.tesae-hero__aside,
.tesae-hero__title,
.tesae-deadline__copy,
.tesae-deadline__media,
.tesae-app__copy,
.tesae-app__media,
.tesae-app__features,
.tesae-api__content,
.tesae-solution__copy,
.tesae-solution__media,
.tesae-tx__card,
.tesae-tx__body,
.tesae-why__card,
.tesae-industries__card,
.tesae-industries__body,
.tesae-form-section__copy,
.tesae-countdown__unit,
.tesae-testimonial,
.tesae-accordion__trigger,
.tesae-accordion__question {
  min-width: 0;
}

/* ---- the notched card ---------------------------------------------------------
   Two sections draw a card whose top-right corner is cut away for a badge. Figma
   makes it with a boolean subtract and rounds every corner of the result, including
   the inward one, so it cannot be a plain border-radius. Three rectangles reproduce
   it exactly:

     base      the full width of the card, from the bottom of the notch down
     shoulder  the strip left of the notch, filling the top band
     patch     one radius square where those two meet, carrying the inward curve as
               a radial gradient

   Everything is placed off --tesae-notch-w/h, which each section composes from its
   own badge size — so the shape follows the card instead of being a fixed cut-out.
   --tesae-notch-bg is the card's fill, because these rectangles paint it. */
.tesae-notch {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--tesae-notch-h);
  bottom: 0;
  z-index: 1;
  border-radius: 0 var(--tesae-radius-m) var(--tesae-radius-m) var(--tesae-radius-m);
  background: var(--tesae-notch-bg);
}

.tesae-notch::before {
  content: '';
  position: absolute;
  left: 0;
  right: var(--tesae-notch-w);
  top: calc(var(--tesae-notch-h) * -1);
  height: var(--tesae-notch-h);
  border-radius: var(--tesae-radius-m) var(--tesae-radius-m) 0 0;
  background: var(--tesae-notch-bg);
}

/* The inward corner: a square of card colour with a radius bitten out of the side
   that faces into the notch. */
.tesae-notch::after {
  content: '';
  position: absolute;
  right: calc(var(--tesae-notch-w) - var(--tesae-radius-m));
  top: calc(var(--tesae-radius-m) * -1);
  width: var(--tesae-radius-m);
  height: var(--tesae-radius-m);
  background: radial-gradient(
    circle at 100% 0,
    transparent var(--tesae-radius-m),
    var(--tesae-notch-bg) calc(var(--tesae-radius-m) + 0.5px)
  );
}

/* Inline emphasis carried over from the Figma text layers. The design mixes a red
   word into a black headline (and the reverse) inside a single block of copy. */
.tesae-hl {
  color: var(--tesae-color-primary);
}

/* A line break the designer typed inside a desktop text layer. It is composition, not
   content: at mobile widths the same sentence has to rewrap freely, so the break is
   dropped and the space the extractor leaves after it closes the gap. Blank lines
   between paragraphs are plain <br><br> and survive everywhere. */
.tesae-break {
  display: inline;
}

.tesae-ink {
  color: var(--tesae-color-black);
}

.tesae-section--dark .tesae-ink,
.tesae-tx__card:nth-child(2) .tesae-ink,
.tesae-tx__card:nth-child(3) .tesae-ink {
  color: var(--tesae-color-white);
}

.tesae-thin {
  font-weight: var(--tesae-fw-light);
}

/* Checkbox list — the design uses the same red check mark for app features and for
   the bullets inside the transaction cards. */
.tesae-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--tesae-space-s);
}

.tesae-checklist li {
  position: relative;
  padding-left: calc(var(--tesae-space-m) + var(--tesae-space-s));
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-medium);
}

.tesae-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: var(--tesae-space-m);
  height: var(--tesae-space-m);
  background: url('../img/icon-check.svg') no-repeat center / contain;
}

.tesae-card {
  display: flex;
  flex-direction: column;
  gap: var(--tesae-space-m);
  padding: 8%;
  background: var(--tesae-color-white);
  border-radius: var(--tesae-card-radius);
  box-shadow: var(--tesae-shadow-card);
  transition: transform var(--tesae-transition), box-shadow var(--tesae-transition);
}

.tesae-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tesae-shadow-lifted);
}

.tesae-showmore {
  display: flex;
  justify-content: center;
  margin-top: var(--tesae-space-xl);
}

/* Extra items are in the DOM but collapsed until "Δες περισσότερα" is pressed. The
   :not() carries the specificity: a section that sets `display` on its own cards
   would otherwise win this on source order alone, and the reveal is left to each
   item's own display value rather than forced back to flex. */
.is-hidden-item:not(.is-revealed) {
  display: none;
}

/* ------------------------------------------------------------ page artwork */

.tesae-page-art {
  position: absolute;
  top: 0;
  left: 0;
  /* Decoration paints behind the content, everywhere. It used to be `z-index: 1`, and a
     positive z-index outranks the `z-index: auto` that every `.tesae-section` carries —
     so the orbits were drawn *over* paragraphs and cards. At 0 the art and the sections
     are painted in tree order instead, and the art is the first child of <main>, so
     every section that follows lands on top of it. Keep it at 0, not `auto`: 0 also
     opens a stacking context, which keeps the wash and the three orbits contained. */
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.tesae-page-art__wash {
  position: absolute;
  top: var(--tesae-page-art-wash-top);
  left: calc(50% - var(--tesae-design-width) / 2);
  width: var(--tesae-design-width);
  height: var(--tesae-page-art-wash-visible-height);
  overflow: hidden;
}

.tesae-page-art__wash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--tesae-page-art-wash-height);
  background: linear-gradient(to bottom, var(--tesae-overlay-black-0), var(--tesae-overlay-black-07));
}

.tesae-page-art__orbit {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tesae-page-art__orbit img {
  max-width: none;
}

.tesae-page-art__orbit--upper {
  top: var(--tesae-page-art-upper-top);
  left: calc(50% - var(--tesae-design-width) / 2 + var(--tesae-page-art-upper-left));
  width: var(--tesae-page-art-upper-width);
  height: var(--tesae-page-art-upper-height);
}

.tesae-page-art__orbit--upper img {
  width: var(--tesae-page-art-upper-image-width);
  height: var(--tesae-page-art-upper-image-height);
  transform: rotate(var(--tesae-page-art-upper-rotate));
}

.tesae-page-art__orbit--middle {
  top: var(--tesae-page-art-middle-top);
  left: calc(50% - var(--tesae-design-width) / 2 + var(--tesae-page-art-middle-left));
  width: var(--tesae-page-art-middle-width);
  height: var(--tesae-page-art-middle-height);
}

.tesae-page-art__orbit--middle img {
  width: var(--tesae-page-art-middle-image-width);
  height: var(--tesae-page-art-middle-image-height);
  transform: rotate(var(--tesae-page-art-middle-rotate));
}

.tesae-page-art__orbit--lower {
  top: var(--tesae-page-art-lower-top);
  left: calc(50% - var(--tesae-design-width) / 2 + var(--tesae-page-art-lower-left));
  width: var(--tesae-page-art-lower-width);
  height: var(--tesae-page-art-lower-height);
}

.tesae-page-art__orbit--lower img {
  width: var(--tesae-page-art-lower-image-width);
  height: var(--tesae-page-art-lower-image-height);
  transform: rotate(var(--tesae-page-art-lower-rotate));
}

/* --------------------------------------------------------------------- hero */

/* The panel is inset from the page edges and rounded, with the sticky header
   sitting on top of it — that is how the frame is drawn. */
.tesae-hero {
  height: var(--tesae-hero-flow-height);
  margin-top: calc((var(--tesae-header-height) + var(--tesae-header-top)) * -1);
  padding: var(--tesae-header-top) var(--tesae-page-inset-end) 0 var(--tesae-page-inset);
  overflow: clip;
}

.tesae-hero__panel {
  position: relative;
  height: var(--tesae-hero-panel-height);
  overflow: visible;
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-color-tint);
  padding: 0;
}

.tesae-hero__bg {
  position: absolute;
  top: var(--tesae-hero-bg-top);
  left: var(--tesae-hero-bg-left);
  width: var(--tesae-hero-bg-width);
  height: auto;
  aspect-ratio: var(--tesae-hero-bg-ratio);
  min-height: var(--tesae-hero-bg-height);
  z-index: 1;
  overflow: visible;
  mix-blend-mode: multiply;
}

.tesae-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--tesae-hero-image-opacity);
  mix-blend-mode: normal;
      object-position: top;
}

.tesae-hero__bg--mobile {
  display: none;
}

.tesae-hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  mix-blend-mode: overlay;
  -webkit-mask: url('../img/hero-ambient-mask-figma.svg') center / 100% 100% no-repeat;
  mask: url('../img/hero-ambient-mask-figma.svg') center / 100% 100% no-repeat;
}

.tesae-hero__ambient img {
  position: absolute;
  top: var(--tesae-hero-ambient-top);
  left: var(--tesae-hero-ambient-left);
  width: var(--tesae-hero-ambient-width);
  height: var(--tesae-hero-ambient-height);
  max-width: none;
  object-fit: cover;
  transform: scaleX(-1);
}

.tesae-hero__scroll {
  position: absolute;
  bottom: var(--tesae-hero-scroll-bottom);
  left: var(--tesae-hero-scroll-left);
  z-index: 6;
  display: block;
  width: var(--tesae-hero-scroll-width);
  height: var(--tesae-hero-scroll-height);
  transition: opacity var(--tesae-transition);
}

/* The mark drifts down and back, which is what says "clickable, and it goes that way".
   The animation is on the inner image rather than the link so the hover lift below can
   own the link's own transform without the two fighting over one property. */
.tesae-hero__scroll-mark {
  display: block;
  width: 100%;
  height: 100%;
  animation: tesae-hero-scroll-bob var(--tesae-hero-scroll-bob-duration) var(--tesae-ease) infinite;
}

.tesae-hero__scroll:hover,
.tesae-hero__scroll:focus-visible {
  opacity: var(--tesae-hero-scroll-hover-opacity);
}

@keyframes tesae-hero-scroll-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(var(--tesae-hero-scroll-bob-travel));
  }
}

.tesae-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.tesae-hero__lead {
  position: absolute;
  left: var(--tesae-hero-title-left);
  top: var(--tesae-hero-title-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tesae-space-l);
  width: var(--tesae-hero-title-width);
}

.tesae-hero__title {
  transform: translateY(var(--tesae-hero-title-visual-shift));
}

.tesae-hero__text {
  transform: translateY(var(--tesae-hero-text-visual-shift));
}

.tesae-hero__title {
  max-width: none;
}

/* The ΑΑΔΕ mark trails the last line of the headline. */
.tesae-hero__badge {
  display: inline-block;
  vertical-align: baseline;
  margin-left: var(--tesae-space-s);
}

.tesae-hero__badge img {
  display: inline-block;
  width: auto;
  height: var(--tesae-hero-badge-height);
}

.tesae-hero__mobile-aade {
  display: none;
}

.tesae-hero__wordmark img {
  width: var(--tesae-hero-wordmark-width);
  height: auto;
}

.tesae-hero__aside {
  position: absolute;
  left: var(--tesae-hero-aside-left);
  top: auto;
  bottom: var(--tesae-hero-aside-bottom);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tesae-hero-aside-gap);
  width: var(--tesae-hero-aside-width);
  max-width: none;
}

.tesae-hero__aside .tesae-button {
  width: var(--tesae-hero-cta-width);
  height: var(--tesae-hero-cta-height);
  min-height: var(--tesae-hero-cta-height);
  padding-block: 0;
}

.tesae-hero__text {
  font-size: var(--tesae-fs-body-lg);
}

/* ----------------------------------------------------------------- deadline */

.tesae-deadline {
  position: relative;
  overflow: visible;
  margin-top: 0px;
}

.tesae-deadline__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: var(--tesae-deadline-top-height) var(--tesae-deadline-countdown-height);
  grid-template-areas:
    'copy media'
    'countdown media';
  height: var(--tesae-deadline-height);
}

.tesae-deadline__top {
  position: relative;
  grid-area: copy;
  display: flex;
  align-items: center;
  padding: 0 var(--tesae-gutter);
}

.tesae-deadline__copy {
  position: absolute;
  left: var(--tesae-deadline-copy-left);
  top: var(--tesae-deadline-copy-top);
  display: flex;
  flex-direction: column;
  gap: var(--tesae-deadline-copy-gap);
  width: var(--tesae-deadline-copy-width);
}

.tesae-deadline__media {
  --tesae-deadline-background-width: var(--tesae-deadline-media-background-width);
  --tesae-deadline-background-height: var(--tesae-deadline-media-background-height);
  --tesae-deadline-background-left: var(--tesae-deadline-media-background-left);
  --tesae-deadline-background-top: var(--tesae-deadline-media-background-top);
  --tesae-deadline-foreground-wrap-width: var(--tesae-deadline-media-foreground-wrap-width);
  --tesae-deadline-foreground-width: var(--tesae-deadline-media-foreground-width);
  --tesae-deadline-foreground-height: var(--tesae-deadline-media-foreground-height);
  --tesae-deadline-foreground-left: var(--tesae-deadline-media-foreground-left);
  --tesae-deadline-foreground-top: var(--tesae-deadline-media-foreground-top);
  --tesae-deadline-wash-width: var(--tesae-deadline-media-wash-width);
  --tesae-deadline-wash-height: var(--tesae-deadline-media-wash-height);
  --tesae-deadline-shade-top: var(--tesae-deadline-media-shade-top);
  --tesae-deadline-shade-height: var(--tesae-deadline-media-shade-height);
  position: relative;
  grid-area: media;
  height: var(--tesae-deadline-height);
  overflow: hidden;
}

.tesae-deadline__media-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  transform: var(--tesae-deadline-media-flip);
}

.tesae-deadline__media-layer--background {
  width: 100%;
}

.tesae-deadline__media-layer--foreground {
  width: var(--tesae-deadline-foreground-wrap-width);
}

/* The box is sized in percentages of a media panel whose height is fixed, so its
   aspect only matches the photograph's at the 1920 the geometry was drawn at —
   everywhere else the default `fill` stretched it (2.58x wide at 991, squashed to
   0.67 at 1280). `cover` keeps the picture's own proportions and crops the excess. */
.tesae-deadline__media-image {
  position: absolute;
  max-width: none;
  object-fit: cover;
      object-position: top;
}

.tesae-deadline__media-image--background {
  top: var(--tesae-deadline-background-top);
  left: var(--tesae-deadline-background-left);
  width: var(--tesae-deadline-background-width);
  height: var(--tesae-deadline-background-height);
}

.tesae-deadline__media-image--foreground {
  top: var(--tesae-deadline-foreground-top);
  left: var(--tesae-deadline-foreground-left);
  width: var(--tesae-deadline-foreground-width);
  height: var(--tesae-deadline-foreground-height);
}

.tesae-deadline__media-wash,
.tesae-deadline__media-shade {
  position: absolute;
  left: 0;
  pointer-events: none;
}

.tesae-deadline__media-wash {
  top: 0;
  width: var(--tesae-deadline-wash-width);
  height: var(--tesae-deadline-wash-height);
  background: linear-gradient(to bottom, var(--tesae-color-white), transparent);
  opacity: var(--tesae-deadline-media-wash-opacity);
}

/* The end colour is a variable because the two frames differ: desktop stops at 50%
   black, the mobile frame (1125:2006) runs all the way to solid so the photograph
   dissolves into the band under the countdown. */
.tesae-deadline__media-shade {
  top: var(--tesae-deadline-shade-top);
  width: 100%;
  height: var(--tesae-deadline-shade-height);
  background: linear-gradient(
    to bottom,
    var(--tesae-overlay-black-0),
    var(--tesae-deadline-shade-end, var(--tesae-overlay-black-50))
  );
}

.tesae-countdown {
  grid-area: countdown;
  /* Positioned so ::before can size to the band. z-index stays `auto`, deliberately:
     giving it one would open a stacking context and trap the -1 below. */
  position: relative;
  color: var(--tesae-color-text-invert);
  height: var(--tesae-deadline-countdown-height);
  padding-block: var(--tesae-space-xl) var(--tesae-space-l);
}

/* The band is painted by a -1 child rather than by the element, so the dashed orbits
   cross it. `.tesae-page-art` sits at z-index 0 inside `.tesae-main`, and a background
   on the element itself paints with the section at step 8 of that stacking context —
   above the art, which is why the arcs used to disappear behind the black.

   Nothing between here and `.tesae-main` opens a stacking context (`.tesae-countdown`,
   `.tesae-countdown__inner` and `.tesae-deadline` are all positioned at z-index auto),
   so the -1 escapes up to `.tesae-main` and lands below the art. The countdown's own
   content is untouched: the label and the button paint with the section, and
   `.tesae-countdown__box` already carries z-index 1, which outranks the art — so the
   arcs pass over the black and behind the box, and every other section is unchanged.
   Same pattern as `.tesae-form-section::before`. */
.tesae-countdown::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tesae-color-black);
}

.tesae-countdown__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tesae-space-l);
  height: 100%;
}

/* Pushed to the foot of the band and then hung off it by Figma's own overhang. Stacked
   from the top it inherited whatever slack the label and the box left behind and slid
   159px through the band between 1920 and 992; from here its distance to the bottom edge
   is the same number at every width.

   It stays in the flex flow rather than being positioned absolutely: `__inner` is also
   the `.tesae-container`, so an absolute `left: 0` would resolve against the container's
   padding box and drop the button onto the page edge, 88px left of the box above it. The
   negative bottom margin shrinks its outer height, which hands that much more free space
   to the auto top margin — so the foot lands past the container's padding by exactly the
   amount asked for. */
.tesae-countdown__inner .tesae-button {
  margin-top: auto;
  margin-bottom: calc((var(--tesae-space-l) + var(--tesae-countdown-cta-overhang)) * -1);
}

.tesae-countdown__label {
  font-size: var(--tesae-fs-body-lg);
}

/* Translucent box holding the three units, split by hairlines. */
.tesae-countdown__box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-overlay-white-10);
  padding: var(--tesae-space-l) 0;
  z-index: 1;
  border: 1px solid var(--tesae-overlay-white-57);
}

.tesae-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tesae-space-2xs);
  padding-inline: var(--tesae-space-m);
  border-left: 1px solid var(--tesae-color-white);
}

.tesae-countdown__unit:first-child {
  border-left: 0;
}

.tesae-countdown__value {
  font-size: var(--tesae-fs-stat);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-lh-tight);
  font-variant-numeric: tabular-nums;
}

.tesae-countdown__name {
  font-size: var(--tesae-fs-h3);
  font-weight: var(--tesae-fw-light);
}

.tesae-countdown.is-expired .tesae-countdown__box {
  opacity: 0.5;
}

.tesae-countdown__mobile-status {
  display: none;
}

/* ---------------------------------------------------------------------- why */

.tesae-why {
  min-height: var(--tesae-why-desktop-height);
  padding: var(--tesae-why-desktop-top) 0 0;
}

.tesae-why__title {
  margin-bottom: var(--tesae-why-desktop-title-gap);
}

/* The frame's height is a floor, not a cap: the tallest card sets the row, and a card
   whose copy needs more than 394 grows the row rather than having its last line cut. */
.tesae-why__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--tesae-space-m);
  min-height: var(--tesae-why-desktop-card-height);
}

.tesae-why__icon img {
  width: auto;
  max-height: var(--tesae-space-xl);
  opacity: 0.5;
}

/* The card stretches to its row on its own; `overflow: hidden` on top of a fixed
   height is what clipped the copy. */
.tesae-why__card {
  gap: 25px;
  height: auto;
  min-height: 0;
  overflow: visible;
  border-radius: var(--tesae-radius-l);
  background: var(--tesae-color-tint);
  box-shadow: none;
}

.tesae-why__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tesae-shadow-card);
}

.tesae-why__text {
  font-size: var(--tesae-fs-body);
  letter-spacing: var(--tesae-ls-tight);
}

/* -------------------------------------------------------------------- logos */

/* CHANGE (20 August 2026) — this block used to write every logo box twice: once
   here in px for the desktop marquee, and once again in the mobile block as a
   percentage/cqw position on the static wall. The wall is gone (mobile is now the
   same marquee, in two rows), so the geometry is written once and each slide only
   declares *which* boxes it uses. Mobile then redraws the whole row by setting a
   single number, --tesae-logo-scale, instead of restating seven boxes. */

.tesae-logos {
  display: flex;
  align-items: center;
  height: var(--tesae-logos-desktop-height);
  padding: 0;
  overflow: hidden;
}

/* The column the rows stack in. On desktop it holds one full-width child, so the
   slider measures exactly what it measured before this became two rows. */
.tesae-logos__rows {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Desktop is a single row — that is what the design draws. The reverse row is a
   mobile-only duplicate and must stay out of slick's way up here: see initSliders()
   in main.js, which skips it rather than initialising a hidden element. */
.tesae-logos__row--reverse {
  display: none;
}

.tesae-logos__slider {
  width: 100%;
}

.tesae-logos__slider .slick-track {
  display: flex;
  align-items: center;
}

.tesae-logos__slide {
  --tesae-logo-scale: 1;
  --tesae-logo-slide-w: var(--tesae-logo-desktop-default-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-default-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-default-height);

  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  width: calc(var(--tesae-logo-slide-w) * var(--tesae-logo-scale));
  padding: 0;
}

.tesae-logos__image {
  position: relative;
  display: block;
  width: calc(var(--tesae-logo-box-w) * var(--tesae-logo-scale));
  height: calc(var(--tesae-logo-box-h) * var(--tesae-logo-scale));
  overflow: hidden;
}

.tesae-logos__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.tesae-logos__slide[data-logo='mpf'] {
  --tesae-logo-slide-w: var(--tesae-logo-desktop-mpf-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-mpf-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-mpf-height);
}

.tesae-logos__slide[data-logo='life'] {
  --tesae-logo-slide-w: var(--tesae-logo-desktop-life-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-life-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-life-height);
}

.tesae-logos__slide[data-logo='tarax'] {
  --tesae-logo-slide-w: var(--tesae-logo-desktop-tarax-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-tarax-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-tarax-height);
}


        .tesae-showmore .tesae-button--ghost::after {
            content: '';
            width: var(--tesae-space-s);
            height: var(--tesae-space-s);
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: translateY(-25%) rotate(45deg);
        }

/* Tarax alone is a crop: the file carries whitespace the box has to cut, so the
   <img> is larger than its box and pulled up inside it. It scales with the rest. */
.tesae-logos__slide[data-logo='tarax'] img {
  position: absolute;
  top: calc(var(--tesae-logo-desktop-tarax-image-top) * var(--tesae-logo-scale));
  left: 0;
  width: calc(var(--tesae-logo-desktop-tarax-image-width) * var(--tesae-logo-scale));
  height: calc(var(--tesae-logo-desktop-tarax-image-height) * var(--tesae-logo-scale));
}

.tesae-logos__slide[data-logo='built'] {
  --tesae-logo-slide-w: var(--tesae-logo-desktop-built-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-built-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-built-height);
}

.tesae-logos__slide[data-logo='presto'] {
  --tesae-logo-slide-w: var(--tesae-logo-desktop-presto-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-presto-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-presto-height);
}

.tesae-logos__slide[data-logo='deli'] {
  --tesae-logo-slide-w: var(--tesae-logo-desktop-deli-slide-width);
  --tesae-logo-box-w: var(--tesae-logo-desktop-deli-width);
  --tesae-logo-box-h: var(--tesae-logo-desktop-deli-height);
}

/* ---------------------------------------------------------------------- app */

.tesae-app {
  min-height: var(--tesae-app-desktop-min-height);
  padding: 0;
  overflow: visible;
background:none;
}

.tesae-app::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tesae-color-tint);
}

.tesae-app__inner {
  position: relative;
  min-height: var(--tesae-app-desktop-min-height);
}

.tesae-app__inner::before {
  content: '';
  position: absolute;
  left: var(--tesae-app-divider-inset);
  right: var(--tesae-app-divider-inset);
  top: var(--tesae-app-divider-top);
  border-top: var(--tesae-app-divider-width) solid var(--tesae-color-primary-soft);
}

.tesae-app__copy {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.tesae-app__wordmark {
  position: absolute;
  left: var(--tesae-app-wordmark-left);
  top: var(--tesae-app-wordmark-top);
  width: var(--tesae-app-wordmark-width);
}

.tesae-app__wordmark img {
  width: 100%;
  height: auto;
}

.tesae-app__copy .tesae-h2 {
  position: absolute;
  left: var(--tesae-app-title-left);
  top: var(--tesae-app-title-top);
  width: var(--tesae-app-title-width);
  font-size: var(--tesae-fs-app-title);
  line-height: var(--tesae-lh-snug);
}

.tesae-app__copy .tesae-lead {
  position: absolute;
  left: var(--tesae-app-body-left);
  top: var(--tesae-app-body-top);
  width: var(--tesae-app-body-width);
  font-size: var(--tesae-fs-body-lg);
  line-height: var(--tesae-lh-normal);
}

.tesae-app__copy .tesae-lead strong {
  font-weight: var(--tesae-fw-extrabold);
}

.tesae-app__badge {
  position: absolute;
  left: var(--tesae-app-badge-left);
  top: var(--tesae-app-badge-top);
  width: var(--tesae-app-badge-width);
}

.tesae-app__badge img {
  width: 100%;
  max-height: none;
}

.tesae-app__copy .tesae-hl {
  
}

.tesae-app__media {
  position: absolute;
  left: var(--tesae-app-media-left);
  top: var(--tesae-app-media-top);
  width: var(--tesae-app-media-width);
  aspect-ratio: var(--tesae-app-media-ratio);
  z-index: 1;
}

.tesae-app__backdrop-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tesae-app-backdrop-inner-width);
  height: var(--tesae-app-backdrop-inner-height);
  overflow: hidden;
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(var(--tesae-app-backdrop-rotation));
}

.tesae-app__backdrop {
  position: absolute;
  left: var(--tesae-app-backdrop-crop-left);
  top: 0;
  width: var(--tesae-app-backdrop-crop-width);
  max-width: none;
  height: 100%;
}

.tesae-app__device {
  position: absolute;
  left: var(--tesae-app-device-left);
  top: var(--tesae-app-device-top);
  width: var(--tesae-app-device-width);
  max-width: none;
  height: var(--tesae-app-device-height);
  object-fit: cover;
  transform: rotate(var(--tesae-app-device-rotation));
}

.tesae-app__screen {
  position: absolute;
  inset:
    var(--tesae-app-screen-inset-top)
    var(--tesae-app-screen-inset-right)
    var(--tesae-app-screen-inset-bottom)
    var(--tesae-app-screen-inset-left);
  z-index: 2;
  overflow: hidden;
  border-radius: var(--tesae-app-screen-radius);
  background: var(--tesae-color-black);
}

/* The clip fills the screen box edge to edge, exactly as the poster does — same rule,
   so the two are interchangeable and the box looks identical before the first frame
   decodes. `cover`, not `contain`: the screen is 0.4600 against the clip's own 0.4582,
   so cover trims ~3px of height in total and nothing horizontally, where contain would
   letterbox a sub-pixel black hairline down each side.

   It used to be inset from the screen (23/11 desktop, 12/6 mobile) on the theory that
   the rounded `overflow: hidden` box would otherwise bite into the recording's browser
   chrome. Measured at the corners, it does not: driving the clip to 2s, 12s and 30s —
   the frames where the chrome, the keyboard and the Android nav bar are hard against
   the corners — the arc only ever eats the recording's own black, and the home icon,
   the tab counter, the overflow menu and the mic all sit inside the circle at both
   breakpoints. The inset read as a gap in the frame rather than as a bezel, which is
   what got reported, so it is gone.

   Size the video with width/height, **never** `position: absolute` + `inset`: a <video>
   is a replaced element, so `width: auto` there resolves to its intrinsic 876px instead
   of stretching to the box, and the clip renders at over twice the screen. */
.tesae-app__screen-image,
.tesae-app__screen-video {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* The clip is stopped at rest and the visitor starts it, so the whole screen box is
   one button: clicking anywhere on the picture toggles playback, and the mark in the
   middle is only the affordance. One control rather than a mark plus a separate hit
   area, which is what makes "click it again to stop" work without a second target.

   It covers the video rather than sitting beside it, so it needs no z-index of its
   own beyond clearing the video in tree order — but the screen box is `overflow:
   hidden` with a radius, so the button is clipped to the same rounded corners for
   free. */
.tesae-app__screen-toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: var(--tesae-app-play-scrim);
  appearance: none;
  cursor: pointer;
  transition: background var(--tesae-transition);
}

.tesae-app__screen-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tesae-app-play-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tesae-app-play-bg);
  box-shadow: var(--tesae-app-play-shadow);
  transition:
    background var(--tesae-transition),
    opacity var(--tesae-transition),
    transform var(--tesae-transition);
}

.tesae-app__screen-play img {
  width: var(--tesae-app-play-mark-width);
  height: auto;
}

.tesae-app__screen-toggle:hover .tesae-app__screen-play,
.tesae-app__screen-toggle:focus-visible .tesae-app__screen-play {
  background: var(--tesae-app-play-bg-hover);
  transform: scale(var(--tesae-app-play-hover-scale));
}

/* Playing: the scrim and the mark go, the hit area stays — that is what leaves the
   picture clean while keeping the whole screen a pause target.
   These two rules must come **after** the hover pair above: both sides resolve to the
   same specificity (three compound selectors either way), so the later one wins, and
   the other order would bring the mark back under the cursor on a playing clip. */
.tesae-app__screen.is-playing .tesae-app__screen-toggle {
  background: var(--tesae-overlay-black-0);
}

.tesae-app__screen.is-playing .tesae-app__screen-play {
  opacity: 0;
  transform: scale(var(--tesae-app-play-hidden-scale));
}

.tesae-app__features {
  position: absolute;
  left: var(--tesae-app-features-left);
  top: var(--tesae-app-features-top);
  width: var(--tesae-app-features-width);
  height: var(--tesae-app-features-height);
  display: block;
  z-index: 1;
}

.tesae-app__features .tesae-app__feature {
  --tesae-app-feature-left: var(--tesae-app-feature-text-inset);
  --tesae-app-feature-icon-left: calc(var(--tesae-app-feature-left) * -1);
  --tesae-app-feature-icon-top: 0;
  --tesae-app-feature-icon-overflow: var(--tesae-app-feature-icon-bleed);
  --tesae-app-feature-copy-shift: var(--tesae-app-feature-text-shift);
  position: absolute;
  left: var(--tesae-app-feature-left);
  padding: 0;
  font-size: var(--tesae-fs-small);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-app-feature-line-height);
}

.tesae-app__feature-text {
  display: block;
  transform: translateY(var(--tesae-app-feature-copy-shift));
}

.tesae-app__features .tesae-app__feature .tesae-thin {
  font-weight: var(--tesae-fw-regular);
}

.tesae-app__features .tesae-app__feature::before {
  content: none;
}

.tesae-app__features .tesae-app__feature::after {
  content: '';
  position: absolute;
  left: calc(var(--tesae-app-feature-icon-left) + var(--tesae-app-feature-icon-overflow));
  top: calc(var(--tesae-app-feature-icon-top) + var(--tesae-app-feature-icon-overflow));
  width: var(--tesae-app-feature-icon-width);
  height: var(--tesae-app-feature-icon-height);
  background: url('../img/app-check-desktop.svg') no-repeat center / contain;
}

.tesae-app__feature:nth-child(1) {
  top: var(--tesae-app-feature-online-top);
  width: var(--tesae-app-feature-online-width);
  --tesae-app-feature-icon-top: var(--tesae-app-feature-online-icon-top);
}

.tesae-app__feature:nth-child(2) {
  top: var(--tesae-app-feature-receipt-top);
  width: var(--tesae-app-feature-receipt-width);
  --tesae-app-feature-icon-top: var(--tesae-app-feature-receipt-icon-top);
}

.tesae-app__feature:nth-child(3) {
  top: var(--tesae-app-feature-viber-top);
  width: var(--tesae-app-feature-viber-width);
  --tesae-app-feature-icon-top: var(--tesae-app-feature-viber-icon-top);
}

.tesae-app__feature:nth-child(4) {
  top: var(--tesae-app-feature-email-top);
  width: var(--tesae-app-feature-email-width);
  --tesae-app-feature-icon-top: var(--tesae-app-feature-email-icon-top);
}

.tesae-app__feature:nth-child(5) {
  --tesae-app-feature-left: calc(var(--tesae-app-feature-text-inset) + var(--tesae-app-feature-history-nudge));
  top: var(--tesae-app-feature-history-top);
  width: var(--tesae-app-feature-history-width);
  --tesae-app-feature-icon-top: var(--tesae-app-feature-history-icon-top);
}

.tesae-app__feature:nth-child(6) {
  top: var(--tesae-app-feature-print-top);
  width: var(--tesae-app-feature-print-width);
  --tesae-app-feature-icon-top: var(--tesae-app-feature-print-icon-top);
}

/* ---------------------------------------------------------------------- api */

.tesae-api {
  z-index: 2;
  margin-top: calc(var(--tesae-api-desktop-overlap) * -1);
  padding: 0;
}

.tesae-api__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--tesae-color-black);
}

/* The Figma panel ratio is a floor, not a height: it decides how tall the panel is
   whenever the copy fits, and the copy wins whenever it does not. That is what keeps
   the section from turning into a squeezed 1920 layout on a laptop. */
.tesae-api__panel::before {
  content: '';
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: var(--tesae-api-panel-ratio);
}


.tesae-api__panel .tesae-button.tesae-button--dark{
	margin-top:100px;
    padding:12px 50px;
}

.tesae-api__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--tesae-radius-l);
  background: var(--tesae-color-primary-soft);
}

/* Two wordings, one shown per breakpoint. display:none rather than a visual hide, so
   the one that is off is out of the accessibility tree and not read twice. */
.tesae-api__text--narrow {
  display: none;
}

/* Green over the photo: opaque across the copy, gone by the right edge. */
.tesae-api__surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--tesae-color-primary-soft) var(--tesae-api-wash-solid),
    var(--tesae-overlay-primary-soft-0) var(--tesae-api-wash-fade)
  );
  pointer-events: none;
}

.tesae-api__background {
  position: absolute;
  left: var(--tesae-api-background-left);
  top: 0;
  width: var(--tesae-api-background-width);
  height: auto;
  max-width: none;
  /* Percentage `top` would resolve against the panel height and stretch with it;
     shifting by a share of the image's own height keeps the crop where Figma put it. */
  transform: translateY(var(--tesae-api-background-shift));
}

.tesae-api__foreground-wrap {
  position: absolute;
  z-index: 1;
  left: var(--tesae-api-foreground-wrap-left);
  bottom: 0;
  width: var(--tesae-api-foreground-wrap-width);
  aspect-ratio: var(--tesae-api-foreground-wrap-ratio);
  overflow: hidden;
}

.tesae-api__foreground {
  position: absolute;
  left: var(--tesae-api-foreground-left);
  top: var(--tesae-api-foreground-top);
  width: var(--tesae-api-foreground-width);
  height: var(--tesae-api-foreground-height);
  max-width: none;
  object-fit: cover;
}

.tesae-api__content {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Percentages resolve against the panel width, so the whole copy block — inset,
     column widths and the gaps between the three pieces — scales with the panel. */
  padding: var(--tesae-api-content-top) 0 var(--tesae-api-content-bottom)
    var(--tesae-api-content-left);
}

.tesae-api__content .tesae-h2 {
  max-width: var(--tesae-api-title-width);
}

.tesae-api__text {
  max-width: var(--tesae-api-text-width);
  margin-top: var(--tesae-api-copy-gap);
  font-size: var(--tesae-fs-body-lg);
  line-height: var(--tesae-lh-normal);
}

.tesae-api__content .tesae-button {
  margin-top: var(--tesae-api-cta-gap);
}

/* --------------------------------------------------------- transactions */

.tesae-tx {
  padding: var(--tesae-tx-desktop-top) 0 0;
}

.tesae-tx__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tesae-space-m);
  max-width: var(--tesae-tx-desktop-header-width);
  margin-inline: auto;
  margin-bottom: var(--tesae-tx-desktop-header-gap);
  text-align: center;
}

.tesae-tx__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tesae-tx-card-gap);
}

/* The three service states are soft green, black and TESAE green. The colour lives in
   a variable because the notch rectangles have to paint it themselves. */
.tesae-tx__card {
  /* Composed here rather than in variables.css so the mobile block can resize the
     badge and have the notch follow. */
  --tesae-notch-w: calc(var(--tesae-tx-chip-w) + var(--tesae-tx-notch-inset));
  --tesae-notch-h: calc(var(--tesae-tx-chip-h) + var(--tesae-tx-notch-drop));
  --tesae-notch-bg: var(--tesae-color-primary-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--tesae-color-black);
  transition: transform var(--tesae-transition), box-shadow var(--tesae-transition);
}

.tesae-tx__card:nth-child(2) {
  --tesae-notch-bg: var(--tesae-color-black);
  color: var(--tesae-color-white);
}

.tesae-tx__card:nth-child(3) {
  --tesae-notch-bg: var(--tesae-color-primary);
  color: var(--tesae-color-white);
}

.tesae-tx__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--tesae-shadow-lifted);
}

/* The badge sits in the notch, flush with the card's top-right corner. */
.tesae-tx__code {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tesae-tx-chip-w);
  height: var(--tesae-tx-chip-h);
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-notch-bg);
  color: inherit;
  font-size: var(--tesae-fs-h2);
  font-weight: var(--tesae-fw-extrabold);
  line-height: var(--tesae-lh-snug);
}

.tesae-tx__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--tesae-tx-copy-top) var(--tesae-tx-card-pad) var(--tesae-tx-card-pad);
}

.tesae-tx__summary,
.tesae-tx__heading,
.tesae-tx__details {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tesae-tx__title {
  font-weight: var(--tesae-fw-light);
  line-height: var(--tesae-lh-tight);
}

.tesae-tx__text {
  margin-top: var(--tesae-tx-title-gap);
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-medium);
  line-height: var(--tesae-lh-normal);
}

/* One blank line between bullets, exactly as the design's text block is set. */
.tesae-tx__bullets {
  margin-top: var(--tesae-tx-list-gap);
  font-size: var(--tesae-fs-body);
  gap: calc(var(--tesae-lh-list) * 1em);
}

.tesae-tx__bullets li {
  padding-left: var(--tesae-tx-bullet-indent);
  line-height: var(--tesae-lh-list);
}

.tesae-tx__bullets li::before {
  top: 0;
  width: var(--tesae-tx-bullet-icon);
  height: var(--tesae-tx-bullet-icon);
}

.tesae-tx__card:nth-child(1) .tesae-checklist li::before {
    background-image: url(../img/iconcheckblack.svg);
}

.tesae-tx__card:nth-child(2) .tesae-checklist li::before,
.tesae-tx__card:nth-child(3) .tesae-checklist li::before {
  background-image: url('../img/icon-check-white.svg');
}

.tesae-tx__card:nth-child(2) .tesae-hl,
.tesae-tx__card:nth-child(3) .tesae-hl {
  color: var(--tesae-color-white);
}

/* ----------------------------------------------------------------- solution */

.tesae-solution {
  padding: var(--tesae-solution-desktop-top) 0 var(--tesae-solution-desktop-bottom);
  background: linear-gradient(
    to bottom,
    var(--tesae-color-white) 0%,
    var(--tesae-color-white) 50%,
    var(--tesae-color-tint) 50%,
    var(--tesae-color-tint) 100%
  );
}

/* The panel is split exactly down the middle; the figure is the only thing allowed
   out of it, so the two halves carry the rounding rather than the panel. */
.tesae-solution__panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.tesae-solution__panel::before {
  content: '';
  grid-area: 1 / 1 / 2 / 3;
  width: 100%;
  aspect-ratio: var(--tesae-solution-panel-ratio);
}

.tesae-solution__media {
  grid-area: 1 / 1;
  position: relative;
  /* Sizes the display word. It has to be here rather than on __surface: the second copy of
     the word lives in __veil, a sibling of __surface, and both copies must measure the
     same container or they stop lining up. */
  container-type: inline-size;
}

/* Clipped ground: the room photograph under a black wash, plus the solid copy of the
   display word. */
.tesae-solution__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--tesae-radius-l) 0 0 var(--tesae-radius-l);
  background: var(--tesae-color-ink);
}

.tesae-solution__surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tesae-color-black);
  opacity: var(--tesae-solution-wash);
}

.tesae-solution__photo {
  position: absolute;
  left: var(--tesae-solution-photo-left);
  top: 0;
  width: var(--tesae-solution-photo-width);
  height: auto;
  max-width: none;
  transform: translateY(var(--tesae-solution-photo-shift)) scaleX(-1);
}

/* The figure stands proud of the panel's top edge, so it lives outside the clip. */
.tesae-solution__cutout {
    position: absolute;
    z-index: 2;
        left: var(--tesae-solution-cutout-left);
    bottom: 0;
    width: var(--tesae-solution-cutout-width);
    aspect-ratio: var(--tesae-solution-cutout-ratio);
    overflow: hidden;
}

.tesae-solution__cutout img {
  position: absolute;
  left: var(--tesae-solution-cutout-img-left);
  top: var(--tesae-solution-cutout-img-top);
  width: var(--tesae-solution-cutout-img-width);
  height: var(--tesae-solution-cutout-img-height);
  max-width: none;
  object-fit: cover;
  transform: scaleX(-1);
}

/* Second, faint copy of the word — clipped like the first, but painted over him. */
.tesae-solution__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  border-radius: var(--tesae-radius-l) 0 0 var(--tesae-radius-l);
  pointer-events: none;
 
}

/* The word is wider than the half it sits in: the first line overruns the split and
   is cut by it, and the second wraps under. Both are the design, so the block takes
   the column's width and is allowed to overflow rather than shrink to fit. */
.tesae-solution__display {
  position: absolute;
  z-index: 1;
  font-size: var(--tesae-solution-display-size);
  left: var(--tesae-solution-display-left);
  top: var(--tesae-solution-display-top);
  display: block;
  width: var(--tesae-solution-display-width);
  color: var(--tesae-color-white);
  pointer-events: none;
  
}

/* The ghost is a translucent fill with a SOLID white outline, so `opacity` cannot do it —
   that would fade the outline with the fill. The fill carries the 23% itself. */
.tesae-solution__display--front {
  z-index: 1;
  color: var(--tesae-overlay-white-23);
  -webkit-text-stroke: var(--tesae-solution-ghost-stroke) var(--tesae-color-white);
}

.tesae-solution__copy {
  grid-area: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  padding: var(--tesae-solution-copy-top) 0 0 var(--tesae-solution-copy-left);
  border-radius: 0 var(--tesae-radius-l) var(--tesae-radius-l) 0;
  background: var(--tesae-color-primary-soft);
  color: var(--tesae-color-black);
}

.tesae-solution__title {
  max-width: var(--tesae-solution-title-width);
  font-weight: var(--tesae-fw-extralight);
  line-height: var(--tesae-lh-tight);
}

.tesae-solution__title .tesae-hl {
  display: inline-block;
  padding-inline: var(--tesae-space-xs);
  background: var(--tesae-color-black);
  color: var(--tesae-color-white);
  line-height: 1;
}

.tesae-solution__text {
  max-width: var(--tesae-solution-text-width);
  margin-top: var(--tesae-solution-title-gap);
  font-size: var(--tesae-fs-body-lg);
  line-height: var(--tesae-lh-snug);
}

.tesae-solution__copy .tesae-button {
  margin-top: var(--tesae-solution-cta-gap);
padding: 12px 50px;
}

/* --------------------------------------------------------------- industries */

.tesae-industries {
  padding: var(--tesae-section-padding) 0 var(--tesae-industries-desktop-bottom);
}

.tesae-industries__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tesae-space-m);
  max-width: 1133px;
  margin-inline: auto;
  margin-bottom: var(--tesae-industries-desktop-header-gap);
  text-align: center;
}

/* Four across at the design width. The track minimum is set so auto-fit lands on
   exactly four at 1744 and drops to three, then two, on its own as the container
   narrows — the design has no intermediate frame to breakpoint against. */
.tesae-industries__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--tesae-ind-card-gap);
}

.tesae-industries__card {
  --tesae-notch-w: calc(var(--tesae-ind-chip-w) + var(--tesae-ind-notch-inset));
  --tesae-notch-h: calc(var(--tesae-ind-chip-h) + var(--tesae-ind-notch-drop));
  --tesae-notch-bg: var(--tesae-color-white);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  padding: var(--tesae-ind-copy-top) var(--tesae-ind-card-pad-end)
    var(--tesae-ind-card-bottom) var(--tesae-ind-card-pad);
  color: var(--tesae-color-black);
}

/* The shadow goes on the shape rather than the card, so it follows the notched
   outline and leaves the copy alone. */
.tesae-industries__card .tesae-notch {
  filter: drop-shadow(var(--tesae-shadow-card-drop));
  transition: filter var(--tesae-transition);
}

/* The icon sits in the notch, on the card's own colour — the cut-out around it is
   what makes it read as a badge. */
.tesae-industries__icon {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tesae-ind-chip-w);
  height: var(--tesae-ind-chip-h);
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-notch-bg);
}

/* The exports are a mix of black and white silhouettes, so they are forced to one
   colour here rather than trusting the asset. */
.tesae-industries__icon img {
  width: var(--tesae-ind-icon-size);
  height: auto;
  filter: brightness(0);
  transition: filter var(--tesae-transition);
}

/* The body takes the leftover height so the button lands on the card's floor, with
   --tesae-ind-cta-gap as the closest it may come to the copy. */
.tesae-industries__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.tesae-industries__body .tesae-h3 {
  max-width: calc(100% - var(--tesae-notch-w));
  font-size: var(--tesae-fs-ind-card-title);
  line-height: var(--tesae-lh-snug);
}

.tesae-industries__text {
  margin-top: var(--tesae-ind-title-gap);
  margin-bottom: var(--tesae-ind-cta-gap);
  font-size: var(--tesae-fs-body);
  line-height: var(--tesae-lh-loose);
    max-width: 326px;
}

.tesae-industries__card .tesae-button--primary {
  margin-top: auto;
  background: var(--tesae-color-tint);
  color: var(--tesae-color-black);
}

/* Hover state: the mockup shows this card black with a cursor resting on it, so the
   black variant is the hover, not a permanent style. */
.tesae-industries__card:hover,
.tesae-industries__card:focus-within,
.tesae-industries__card.is-featured {
  --tesae-notch-bg: var(--tesae-color-black);
  color: var(--tesae-color-text-invert);
}

.tesae-industries__card:hover .tesae-notch,
.tesae-industries__card:focus-within .tesae-notch,
.tesae-industries__card.is-featured .tesae-notch {
  filter: drop-shadow(var(--tesae-shadow-lifted-drop));
}

.tesae-industries__card:hover .tesae-industries__icon img,
.tesae-industries__card:focus-within .tesae-industries__icon img,
.tesae-industries__card.is-featured .tesae-industries__icon img {
  filter: brightness(0) invert(1);
}

.tesae-industries__card:hover .tesae-button--primary,
.tesae-industries__card:focus-within .tesae-button--primary,
.tesae-industries__card.is-featured .tesae-button--primary {
  background: var(--tesae-color-primary-soft);
  color: var(--tesae-color-black);
}

.tesae-mobile-card-toggle {
  display: none;
}

/* ---------------------------------------------------------------------- faq */

.tesae-faq__title {
  margin-bottom: var(--tesae-faq-desktop-title-gap);
  text-align: center;
}

.tesae-faq {
  background: transparent;
}


.tesae-faq::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:  var(--tesae-color-tint);
}




.tesae-faq {
  padding: var(--tesae-section-padding) 0 0;
  
}

.tesae-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--tesae-faq-desktop-item-gap);
  width: var(--tesae-faq-desktop-width);
  max-width: 100%;
  margin-inline: auto;
}

.tesae-accordion__item {
 
  min-height: var(--tesae-faq-desktop-item-height);
  overflow: hidden;
  border-radius: var(--tesae-radius-pill);
  background: var(--tesae-color-tint-2);
  transition: background-color var(--tesae-transition), color var(--tesae-transition),
    border-radius var(--tesae-transition);
}

.tesae-accordion__item.is-open {

  min-height: var(--tesae-faq-desktop-open-height);
  border-radius: var(--tesae-radius-l);
  background: var(--tesae-color-black);
  color: var(--tesae-color-text-invert);
}

.tesae-accordion__heading {
  margin: 0;
}

/* The +/- is centred against the ROW, which means the trigger has to be as tall as one.
   Left to its content the trigger is `2 * space-m + fs-h4 * lh-snug` — 83px against the
   row's 97 at 1920, and both tokens shrink with the viewport, so it falls to 63px at 1440
   and 59px at 1280. `align-items: center` then centres the icon inside that short box,
   which sits at the top of the row, and the mark drifts 7px above the row's middle at
   1920 and ~19px at 1280. That is the "it gets worse as the width narrows".
   `min-height`, not `height: 100%`: an open item is 227px tall and holds the answer panel
   underneath, and a full-height trigger would swallow it and centre the mark halfway down
   the card. The mobile block has carried the same min-height all along. */
.tesae-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tesae-space-m);
  width: 100%;
  min-height: var(--tesae-faq-desktop-item-height);
  padding: var(--tesae-space-m) var(--tesae-space-m) var(--tesae-space-m) var(--tesae-space-xl);
  text-align: left;
  font-size: var(--tesae-fs-h4);
  font-weight: var(--tesae-fw-light);
  line-height: var(--tesae-lh-snug);
}

.tesae-accordion__item.is-open .tesae-accordion__trigger {
  font-weight: var(--tesae-fw-extrabold);
}

.tesae-accordion__item:hover {
  background: var(--tesae-color-tint-2);
}

.tesae-accordion__item.is-open:hover {
  background: var(--tesae-color-black);
}

.tesae-accordion__trigger:hover .tesae-accordion__question {
  color: var(--tesae-color-primary);
}

.tesae-accordion__trigger:hover .tesae-accordion__icon {
  background: var(--tesae-color-primary);
}

.tesae-accordion__trigger:hover .tesae-accordion__icon::before,
.tesae-accordion__trigger:hover .tesae-accordion__icon::after {
  background: var(--tesae-color-white);
}

.tesae-accordion__item.is-open .tesae-accordion__trigger:hover .tesae-accordion__question {
  color: inherit;
}

/* Circular toggle: pale on a closed pill, green on the opened black card. */
.tesae-accordion__icon {
  position: relative;
  flex: 0 0 auto;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: var(--tesae-color-white);
  transition: background-color var(--tesae-transition);
}

.tesae-accordion__item.is-open .tesae-accordion__icon {
  background: var(--tesae-color-primary-soft);
}

.tesae-accordion__icon::before,
.tesae-accordion__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.9em;
  height: 2px;
  background: var(--tesae-color-tint-2);
  transform: translate(-50%, -50%);
  transition: transform var(--tesae-transition), opacity var(--tesae-transition);
}

.tesae-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.tesae-accordion__item.is-open .tesae-accordion__icon::before,
.tesae-accordion__item.is-open .tesae-accordion__icon::after {
  background: var(--tesae-color-black);
}

.tesae-accordion__item.is-open .tesae-accordion__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0;
}

.tesae-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tesae-duration) var(--tesae-ease);
}

.tesae-accordion__item.is-open .tesae-accordion__panel {
  max-height: none;
}

.tesae-accordion__answer {
  padding: 0 var(--tesae-space-xl) var(--tesae-space-l);
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-medium);
}

.tesae-accordion__answer p {
  margin: 0 0 var(--tesae-space-s);
}

.tesae-accordion__answer p:last-child {
  margin-bottom: 0;
}

.tesae-faq .tesae-showmore {
  margin-top: var(--tesae-faq-desktop-showmore-gap);
}

/* --------------------------------------------------------------------- form */

.tesae-form-section {
  padding:100px 0 var(--tesae-form-section-bottom);
}

/* The tint runs down to the middle of the section and hands over to white — but it is
   painted by a pseudo-element at z-index -1, not by the section itself, and that is the
   only reason the dashed orbits survive here. `.tesae-page-art` sits at z-index 0 in
   <main>, so a background on the section paints over it and swallows it; a -1 child
   escapes into <main>'s stacking context *below* the art instead. The section must stay
   at `z-index: auto` for that escape to work — give it a z-index and the -1 is trapped
   inside it and covers the art again.
   The order that comes out of it is the one the design wants: background, then the
   decoration, then the container's content on top (`__inner` is already z-index 2). */
.tesae-form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    var(--tesae-color-tint) 0
      calc(var(--tesae-form-section-top) + var(--tesae-form-desktop-background-depth)),
    var(--tesae-color-white)
      calc(var(--tesae-form-section-top) + var(--tesae-form-desktop-background-depth)) 100%
  );
}

.tesae-form-section .tesae-container {
  max-width: var(--tesae-form-desktop-container);
  padding-inline: var(--tesae-form-desktop-viewport-gutter);
}

.tesae-form-section__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--tesae-form-desktop-columns);
  gap: var(--tesae-form-desktop-gap);
  align-items: start;
  width: 96%;
  max-width: var(--tesae-form-desktop-width);
  min-height: var(--tesae-form-desktop-min-height);
  padding: var(--tesae-form-panel-padding-top) var(--tesae-form-panel-padding-inline)
    var(--tesae-form-panel-padding-bottom);
  border-radius: var(--tesae-radius-l);
  background: var(--tesae-color-primary-soft);
  color: var(--tesae-color-black);
  margin: auto;
}

.tesae-form-section__copy {
  display: flex;
  flex-direction: column;
  gap: var(--tesae-form-copy-gap);
}

.tesae-form-section__copy .tesae-lead {
  max-width: var(--tesae-form-desktop-text-width);
}

.tesae-lead .tesae-hl{
 
}

.tesae-form {
  position: relative;
  min-width: 0;
}

.tesae-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--tesae-form-column-gap);
}

.tesae-form__field {
  position: relative;
  min-width: 0;
}

.tesae-form__grid > .tesae-form__field {
  height: var(--tesae-form-field-step);
}

.tesae-form__field--full {
  grid-column: 1 / -1;
}

.tesae-form__label {
  position: absolute;
  width: var(--tesae-form-a11y-size);
  height: var(--tesae-form-a11y-size);
  margin: var(--tesae-form-a11y-offset);
  overflow: hidden;
  clip-path: var(--tesae-form-a11y-clip);
  white-space: nowrap;
}

/* The Figma labels are the controls' empty-state text, not a second row above them. */
.tesae-form__input {
  display: block;
  width: 100%;
  height: var(--tesae-form-control-height);
  padding: 0 var(--tesae-form-control-padding-inline);
  border: 0;
  border-bottom: var(--tesae-form-rule-width) solid var(--tesae-form-rule-color);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--tesae-fs-body-lg);
  font-weight: var(--tesae-fw-light);
  line-height: var(--tesae-form-label-line-height);
  transition: border-color var(--tesae-transition);
}

.tesae-form__input::placeholder {
  color: var(--tesae-color-black);
  opacity: 1;
}

.tesae-form__input:focus {
  outline: none;
  border-bottom-color: var(--tesae-color-black);
}

.tesae-form__field--select .tesae-form__input {
  appearance: none;
  padding-right: 0;
}

.tesae-form__grid > .tesae-form__field--full {
  height: var(--tesae-form-textarea-height);
  transform: translateY(var(--tesae-form-textarea-row-shift));
}

.tesae-form__field--full textarea.tesae-form__input {
  height: var(--tesae-form-textarea-height);
  padding-top: var(--tesae-form-textarea-padding-top);
  resize: none;
}

.tesae-form__input option {
  color: var(--tesae-color-black);
}

.tesae-form__field.has-error .tesae-form__input {
  border-bottom-color: var(--tesae-color-black);
}

.tesae-form__error {
  position: absolute;
  top: calc(var(--tesae-form-control-height) + var(--tesae-space-2xs));
  left: 0;
  z-index: 1;
  font-size: var(--tesae-fs-caption);
  font-weight: var(--tesae-fw-bold);
  color: var(--tesae-color-black);
}

.tesae-form__field--full .tesae-form__error {
  top: calc(var(--tesae-form-textarea-height) + var(--tesae-space-2xs));
}

.tesae-form__error:empty {
  display: none;
}

.tesae-form__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: var(--tesae-form-footer-margin);
}

.tesae-form__field--consent {
  margin-top: var(--tesae-form-consent-top);
  margin-left: var(--tesae-form-consent-left);
}

.tesae-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--tesae-form-consent-gap);
  font-size: var(--tesae-fs-small);
  font-weight: var(--tesae-fw-light);
  line-height: var(--tesae-form-label-line-height);
  cursor: pointer;
}

.tesae-form__consent input[type='checkbox'] {
  appearance: none;
  position: relative;
  flex: 0 0 var(--tesae-form-checkbox-width);
  width: var(--tesae-form-checkbox-width);
  height: var(--tesae-form-checkbox-height);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: var(--tesae-color-black);
}

/* Checked reads as a white tick inside the box, on both breakpoints. It is drawn from
   two borders of a rotated rectangle rather than an asset, so it stays crisp at any
   size and follows the box's own tokens. */
.tesae-form__consent input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tesae-form-check-width);
  height: var(--tesae-form-check-height);
  border-right: var(--tesae-form-check-stroke) solid var(--tesae-color-white);
  border-bottom: var(--tesae-form-check-stroke) solid var(--tesae-color-white);
  transform: translate(-50%, -60%) rotate(45deg);
}

.tesae-form__consent span {
  transform: translateY(var(--tesae-form-consent-text-shift));
}

.tesae-form__consent a {
  text-decoration: underline;
}

.tesae-form__footer .tesae-button {
  flex: 0 1 var(--tesae-form-submit-width);
  width: 100%;
  max-width: var(--tesae-form-submit-width);
  min-height: var(--tesae-form-submit-height);
  padding: 0;
}

.tesae-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tesae-form__feedback {
  margin-top: var(--tesae-space-m);
  font-size: var(--tesae-fs-body);
  font-weight: var(--tesae-fw-bold);
}

.tesae-form__feedback:empty {
  display: none;
}

.tesae-form__feedback.is-error {
  color: var(--tesae-color-black);
}

/* ------------------------------------------------------------- testimonials */

.tesae-testimonials__title {
  margin: 0;
}

.tesae-testimonials__slider {
  margin-top: var(--tesae-testimonials-mobile-title-gap);
}

/* The slide is the frame's pitch — the card plus the gap to the next one — as a share
   of the viewport, so the sliver of the following card stays the same fraction at any
   width. Slick writes an inline width on each slide, hence the important. */
.tesae-testimonials__slide {
  height: auto;
  width: var(--tesae-testimonial-mobile-slide-width) !important;
  padding: 0 var(--tesae-testimonial-mobile-slide-gap) 0 0;
}

.tesae-testimonials .slick-list {
  overflow: visible;
}

.tesae-testimonials .slick-track {
  display: flex;
}

.tesae-testimonials .slick-slide {
  height: auto;
}

/* container-type makes the card the reference for every cqw inside it, so the parts
   scale with the card instead of with the viewport. It contains inline size only, so
   the quote mark hanging over the top edge is still drawn. */
.tesae-testimonial {
  container-type: inline-size;
  position: relative;
  display: block;
  width: 100%;
  min-height: var(--tesae-testimonial-mobile-min-height);
  margin: 0;
  padding: var(--tesae-testimonial-mobile-quote-top)
    var(--tesae-testimonial-mobile-quote-end)
    var(--tesae-testimonial-mobile-pad-bottom)
    var(--tesae-testimonial-mobile-quote-left);
  overflow: visible;
  border-radius: var(--tesae-radius-m);
  background: var(--tesae-color-tint);
}

/* The frame draws the first card black with a cursor resting on it, so black is the
   hover state — the same reading as the industry cards, not a permanent variant. */
.tesae-testimonial {
  transition: background-color var(--tesae-transition), color var(--tesae-transition);
}

.tesae-testimonial:hover,
.tesae-testimonial:focus-within {
  background: var(--tesae-color-black);
  color: var(--tesae-color-text-invert);
}

.tesae-testimonial__mark {
  position: absolute;
  top: var(--tesae-testimonial-mobile-mark-top);
  left: var(--tesae-testimonial-mobile-mark-left);
  width: var(--tesae-testimonial-mobile-mark-width);
  height: var(--tesae-testimonial-mobile-mark-height);
}

.tesae-testimonial__mark img,
.tesae-stars img {
  width: 100%;
  height: 100%;
}

.tesae-stars picture {
  width: 100%;
  height: 100%;
}

.tesae-stars {
  position: absolute;
  top: var(--tesae-testimonial-mobile-stars-top);
  right: var(--tesae-testimonial-mobile-stars-right);
  width: var(--tesae-testimonial-mobile-stars-width);
  height: var(--tesae-testimonial-mobile-stars-height);
}

/* The mobile card is drawn for shorter copy than the placeholder, so the quote is
   still boxed here. Desktop lets it run — see the 992 block. */
/* In flow, not pinned: the card's padding places it, and its height is a floor rather
   than a box, so longer copy pushes the author down and grows the card instead of
   being cut off at the frame's line count. */
.tesae-testimonial__quote {
  min-height: var(--tesae-testimonial-mobile-quote-height);
  margin: 0 0 var(--tesae-testimonial-mobile-quote-gap);
  overflow: visible;
  font-size: var(--tesae-testimonial-mobile-text-size);
  line-height: var(--tesae-lh-normal);
}

.tesae-testimonial__author {
  display: flex;
  align-items: center;
  /* The frame insets the author a touch less than the quote above it. */
  margin-left: calc(var(--tesae-testimonial-mobile-author-pull) * -1);
  gap: var(--tesae-testimonial-mobile-author-gap);
}

.tesae-testimonial__avatar {
  flex: 0 0 auto;
  width: var(--tesae-testimonial-mobile-avatar-width);
  height: var(--tesae-testimonial-mobile-avatar-height);
  border-radius: 50%;
  object-fit: cover;
  display:none!important;
}

/* currentColor makes the disc follow the card in every state it has — light card,
   hover, and the current slide on mobile — with no per-state rule. */
.tesae-testimonial__avatar--blank {
  display: block;
  background: currentColor;
  transition: background-color var(--tesae-transition);
}

.tesae-testimonial__meta {
  display: flex;
  flex-direction: column;
}

.tesae-testimonial__name {
  font-size: var(--tesae-testimonial-mobile-text-size);
  font-weight: var(--tesae-fw-extrabold);
  color: var(--tesae-color-primary-soft);
}

.tesae-testimonial__role {
  font-size: var(--tesae-testimonial-mobile-text-size);
}

.tesae-testimonials .slick-dots {
  display: flex;
  justify-content: center;
  gap: var(--tesae-testimonial-mobile-dot-gap);
  width: var(--tesae-testimonial-mobile-dots-width);
  margin: var(--tesae-testimonial-mobile-dots-gap) auto 0;
}

.tesae-testimonials .slick-dots li {
  flex: 0 0 var(--tesae-testimonial-mobile-dot-size);
  width: var(--tesae-testimonial-mobile-dot-size);
  height: var(--tesae-testimonial-mobile-dot-size);
}

.tesae-testimonials .slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 50%;
  background: var(--tesae-color-grey);
  font-size: 0;
  transition: background-color var(--tesae-transition);
}

.tesae-testimonials .slick-dots li.slick-active button {
  background: var(--tesae-color-primary-soft);
}

.tesae-testimonials .slick-prev,
.tesae-testimonials .slick-next {
  display: none !important;
}

@media (min-width: 992px) {
  .tesae-testimonials {
    height: var(--tesae-testimonials-desktop-height);
    padding: 0;
    overflow: hidden;
  }

  .tesae-testimonials::before {
    content: '';
    position: absolute;
    top: var(--tesae-testimonials-desktop-watermark-top);
    left: var(--tesae-testimonials-desktop-watermark-left);
    width: var(--tesae-testimonials-desktop-watermark-width);
    height: var(--tesae-testimonials-desktop-watermark-height);
    background: var(--tesae-color-tint);
    /* Its own vector, not the card's quote mark stretched to fit — the two are
       different drawings and scaling one into the other deformed the curves. */
    -webkit-mask: url('../img/testimonial-watermark-figma.svg') center / 100% 100% no-repeat;
    mask: url('../img/testimonial-watermark-figma.svg') center / 100% 100% no-repeat;
  }

  .tesae-testimonials .tesae-container {
    position: relative;
    max-width: none;
    height: 100%;
    padding: 0;
  }

  .tesae-testimonials__title {
    position: absolute;
    left: var(--tesae-testimonials-desktop-title-left);
    top: var(--tesae-testimonials-desktop-title-top);
    z-index: 2;
    margin: 0;
  }

  .tesae-testimonials__title .tesae-ink {
    display: block;
  }

  .tesae-testimonials__slider {
    position: absolute;
    left: var(--tesae-testimonials-desktop-slider-left);
    top: var(--tesae-testimonials-desktop-slider-top);
    width: var(--tesae-testimonials-desktop-slider-width);
    z-index: 1;
    margin: 0;
  }

  .tesae-testimonials .slick-list {
    clip-path: inset(
      calc(var(--tesae-testimonial-desktop-list-bleed) * -1)
      0
      calc(var(--tesae-testimonial-desktop-list-bleed) * -1)
      0
    );
  }

  .tesae-testimonials__slide {
    width: var(--tesae-testimonial-desktop-slide-width) !important;
  }

  /* Desktop draws the card at fixed pixels, so it undoes the mobile card's container
     scaling — otherwise its cap would clamp this one and the cqw type would follow
     the card's width here too. */
  .tesae-testimonial {
    container-type: normal;
    width: var(--tesae-testimonial-desktop-width);
    max-width: none;
    height: var(--tesae-testimonial-desktop-height);
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
  }

  .tesae-testimonial__mark {
    top: var(--tesae-testimonial-desktop-mark-top);
    left: var(--tesae-testimonial-desktop-mark-left);
    width: var(--tesae-testimonial-desktop-mark-width);
    height: var(--tesae-testimonial-desktop-mark-height);
  }

  .tesae-stars {
    top: var(--tesae-testimonial-desktop-stars-top);
    right: var(--tesae-testimonial-desktop-stars-right);
    width: var(--tesae-testimonial-desktop-stars-width);
    height: var(--tesae-testimonial-desktop-stars-height);
  }

  /* Boxing this to the Figma height cut the last line off. The design's own 27/18
     leading fits the copy inside the card on its own, so the box is a floor now. */
  /* Desktop pins these; mobile lets them flow, so the positioning is restored here. */
  .tesae-testimonial__quote {
    position: absolute;
    top: var(--tesae-testimonial-desktop-quote-top);
    left: var(--tesae-testimonial-desktop-quote-left);
    width: var(--tesae-testimonial-desktop-quote-width);
    height: auto;
    min-height: var(--tesae-testimonial-desktop-quote-height);
    margin: 0;
    overflow: visible;
    font-size: var(--tesae-fs-body);
  }

  .tesae-testimonial__author {
    position: absolute;
    top: var(--tesae-testimonial-desktop-author-top);
    left: var(--tesae-testimonial-desktop-author-left);
    margin-left: 0;
    gap: var(--tesae-testimonial-desktop-author-gap);
  }

  .tesae-testimonial__avatar {
    width: var(--tesae-testimonial-desktop-avatar-size);
    height: var(--tesae-testimonial-desktop-avatar-size);
  }

  .tesae-testimonial__name,
  .tesae-testimonial__role {
    font-size: var(--tesae-fs-body-lg);
  }

  .tesae-testimonials .slick-dots {
    position: absolute;
    top: var(--tesae-testimonial-desktop-dots-top);
    left: var(--tesae-testimonial-desktop-dots-left);
    gap: var(--tesae-testimonial-desktop-dot-gap);
    width: var(--tesae-testimonial-desktop-dots-width);
    margin: 0;
  }

  .tesae-testimonials .slick-dots li {
    flex-basis: var(--tesae-testimonial-desktop-dot-size);
    width: var(--tesae-testimonial-desktop-dot-size);
    height: var(--tesae-testimonial-desktop-dot-size);
  }
}


@media (max-width: 1550px) {

.tesae-page-art__orbit--middle{
  top:clamp(2470.51px, 28.9483vw + 1867.303px, 2825.51px);
}
.tesae-page-art__orbit--upper {
    top: 457.858px;
    left:-275px;
} 
.tesae-footer__band{
  top: -3px;
}

.tesae-hero__bg{
  top: 4.6809%;;
}
.tesae-hero__bg img {

}

}


/* -------------------------------------------------------------- mobile: 991 */

@media (max-width: 991px) {
  .tesae-break {
    display: none;
  }

  .tesae-page-art,
  .tesae-hero__scroll {
    display: none;
  }

  .tesae-hero__title,
  .tesae-hero__text {
    transform: none;
  }

  .tesae-app__inner::before {
    content: none;
  }
  .tesae-hero {
    height: auto;
    min-height: calc(var(--tesae-hero-mobile-panel-height) + var(--tesae-space-s));
    margin-top: calc(var(--tesae-header-height) * -1);
    padding: 0 0 var(--tesae-space-s);
  }

  .tesae-hero__inner,
  .tesae-app__inner,
  .tesae-api__panel,
  .tesae-form-section__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tesae-deadline__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      'copy'
      'media'
      'countdown';
    height: auto;
  }

  .tesae-deadline__top {
    align-items: flex-start;
    height: var(--tesae-deadline-mobile-copy-height);
    padding: var(--tesae-deadline-mobile-copy-top) var(--tesae-gutter) 0;
  }

  .tesae-deadline__copy {
    position: static;
    gap: var(--tesae-space-m);
    width: auto;
  }

  .tesae-deadline__media {
    --tesae-deadline-background-width: var(--tesae-deadline-mobile-media-background-width);
    --tesae-deadline-background-height: var(--tesae-deadline-mobile-media-background-height);
    --tesae-deadline-background-left: var(--tesae-deadline-mobile-media-background-left);
    --tesae-deadline-background-top: var(--tesae-deadline-mobile-media-background-top);
    --tesae-deadline-foreground-wrap-width: var(--tesae-deadline-mobile-media-foreground-wrap-width);
    --tesae-deadline-foreground-width: var(--tesae-deadline-mobile-media-foreground-width);
    --tesae-deadline-foreground-height: var(--tesae-deadline-mobile-media-foreground-height);
    --tesae-deadline-foreground-left: var(--tesae-deadline-mobile-media-foreground-left);
    --tesae-deadline-foreground-top: var(--tesae-deadline-mobile-media-foreground-top);
    --tesae-deadline-wash-width: var(--tesae-deadline-mobile-media-wash-width);
    --tesae-deadline-wash-height: var(--tesae-deadline-mobile-media-wash-height);
    --tesae-deadline-shade-top: var(--tesae-deadline-mobile-media-shade-top);
    --tesae-deadline-shade-height: var(--tesae-deadline-mobile-media-shade-height);
    width: calc(100% + (var(--tesae-deadline-mobile-media-bleed) * 2));
    height: var(--tesae-deadline-mobile-media-height);
    margin-inline: calc(var(--tesae-deadline-mobile-media-bleed) * -1);
  }

  .tesae-deadline__copy .tesae-h2 {
    font-size: var(--tesae-fs-deadline-mobile);
  }

  .tesae-countdown {
    z-index: 1;
    height: calc(
      var(--tesae-deadline-mobile-countdown-height) +
      var(--tesae-deadline-mobile-status-height)
    );
    margin-top: calc(var(--tesae-deadline-mobile-countdown-overlap) * -1);
    padding: 0;
  }

  /* The fade lives on the same pseudo-element as the desktop black, or the two would
     stack and the transparent top of the gradient would read as solid. Here z-index: 1
     above does open a stacking context, so the -1 stays inside the countdown — which is
     what keeps the fade over the photograph it overlaps. The art is display:none below
     992 anyway. */
  .tesae-countdown::before {
    background: linear-gradient(to bottom, transparent, var(--tesae-color-black));
  }

  /* Laid out from the top rather than the foot, so each gap is the frame's own
     measurement instead of whatever is left over. */
  .tesae-countdown__inner {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    height: var(--tesae-deadline-mobile-countdown-height);
    padding: var(--tesae-deadline-mobile-label-top)
      var(--tesae-deadline-mobile-panel-inset) 0;
  }

  /* The frame insets the label 4px further than the panel it sits above. */
  .tesae-countdown__label {
    margin-left: var(--tesae-deadline-mobile-label-inset);
    font-size: var(--tesae-fs-body);
    line-height: var(--tesae-lh-snug);
  }

  /* Frosted, as the frame draws it: white at 10% over a blurred backdrop. `background:
     none` here left nothing for the blur to tint, so the panel read as plain. The blur
     is --tesae-blur-glass, which the header no longer shares (it blurs harder now that
     it is sticky); the fill is mobile's own, because
     --tesae-overlay-white-10 is the solid slab the desktop panel wants. */
  .tesae-countdown__box {
    height: var(--tesae-deadline-mobile-panel-height);
    margin-top: var(--tesae-deadline-mobile-panel-gap);
    padding: 0;
    align-items: center;
    background: var(--tesae-deadline-mobile-panel-glass);
    backdrop-filter: var(--tesae-blur-glass);
    -webkit-backdrop-filter: var(--tesae-blur-glass);
  }

  /* Figma draws the dividers as two short lines inside the panel, not as full-height
     edges, so they are pseudo-elements rather than the units' own border. */
  .tesae-countdown__unit {
    position: relative;
    justify-content: center;
    gap: 0;
    padding-inline: 0;
    border-left: 0;
  }

  .tesae-countdown__unit + .tesae-countdown__unit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: var(--tesae-deadline-mobile-divider-height);
    background: var(--tesae-color-white);
    transform: translateY(-50%);
  }

  .tesae-countdown__name {
    font-size: var(--tesae-fs-body);
    font-weight: var(--tesae-fw-regular);
    line-height: var(--tesae-lh-loose);
  }

  .tesae-countdown .tesae-button {
    align-self: center;
    width: var(--tesae-deadline-mobile-button-width);
    min-height: var(--tesae-deadline-mobile-button-height);
    height: var(--tesae-deadline-mobile-button-height);
    margin-top: var(--tesae-deadline-mobile-button-gap);
    padding: 0;
  }

  /* Mobile runs the wash to solid black and mirrors the photograph, both as drawn. */
  /* Mobile runs the top wash to solid white and the lower shade to solid black, and
     it does not mirror the photograph: the two frames face opposite ways, so the
     global --tesae-deadline-media-flip is undone here. Measured, not guessed — with
     the flip left on, the figure lands as the exact mirror of Figma 1125:2006 (his
     hair spans 163..282 against the frame's 108..226, reflected about x=195). */
  .tesae-deadline__media {
    --tesae-deadline-shade-end: var(--tesae-color-black);
    --tesae-deadline-media-wash-opacity: var(--tesae-deadline-mobile-wash-opacity);
    --tesae-deadline-media-flip: none;
  }

  .tesae-countdown__mobile-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tesae-space-m);
    height: var(--tesae-deadline-mobile-status-height);
    padding: 0 var(--tesae-deadline-mobile-status-pad-end) 0
      var(--tesae-deadline-mobile-status-pad-start);
    background: var(--tesae-color-ink);
    font-size: var(--tesae-fs-body);
    line-height: var(--tesae-lh-snug);
            opacity: 0;
                    transition: all 0.3s ease-in-out;
  }

  /* The frame sets the count larger than the word beside it. */
  .tesae-countdown__mobile-status strong {
    display: flex;
    align-items: baseline;
    gap: var(--tesae-space-2xs);
    font-weight: var(--tesae-fw-extrabold);
    line-height: var(--tesae-lh-loose);
  }

  .tesae-countdown__mobile-status strong > span {
    font-size: var(--tesae-deadline-mobile-status-value-size);
    line-height: var(--tesae-lh-tight);
  }

  /* Pinned once it reaches the top, released when the user scrolls back up past
     its place in the page.

     position: sticky cannot express this. The strip is the last child of
     .tesae-countdown, which has an explicit height, so a sticky strip would have
     no room to travel and would unpin the moment it pinned — and sticky is bounded
     by its parent anyway, while this has to stay put for the rest of the scroll.
     So main.js swaps it to fixed against a placeholder that holds its place.

     It takes the viewport's very top: the header declares position:sticky but
     body's overflow-x:hidden makes that inert, so nothing else is parked there. */
  .tesae-countdown__mobile-status.is-stuck {
    position: fixed;
    z-index: var(--tesae-z-sticky-status);
    top: 0;
    right: 0;
    left: 0;
            opacity: 1;
  }

  /* .tesae-countdown is a grid item with z-index:1, so it opens a stacking context
     and the pinned strip is painted *inside* it — its own z-index only outranks its
     siblings, while the whole countdown stays at level 1 of the page. Sections later
     in the document carry z-index 2-3 (.tesae-api, .tesae-app__screen, a few h2s) and
     would slide over the top of it. Lifting the context is what actually raises the
     strip; it is done only while pinned so the countdown's own layering, which puts
     it over the deadline photograph, is untouched at rest. */
  .tesae-countdown.is-status-stuck {
    z-index: var(--tesae-z-sticky-status);
  }

  .tesae-countdown__units {
    gap: var(--tesae-space-xl);
  }

  /* Mobile drops the photograph but keeps the display word — 755:4561 draws it over
     the plain green panel. So the surface stays and simply loses its picture and its
     wash; the cut-out figure and the ghost copy that reads through him have nothing
     to sit against here, and stay off. */
  /* The panel keeps a 592 floor, and stretched rows would share the slack out between
     the display word and the copy — which is what pushed every gap ~42px open. The
     rows take their own height and any spare falls at the foot, as the frame draws. */
  .tesae-solution__panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  .tesae-solution__panel::before {
    content: none;
  }

  .tesae-solution__media {
    grid-area: auto;
  }

  /* It is a <span>: absolute positioning blockified it on desktop, so taking that
     away here would drop it back to inline and the padding would stop counting. */
  .tesae-solution__surface {
    position: static;
    display: block;
    overflow: visible;
    padding: var(--tesae-solution-mobile-display-top)
      var(--tesae-solution-mobile-display-inset) 0;
    border-radius: 0;
    background: none;
  }

  .tesae-solution__surface::after {
    content: none;
  }

  .tesae-solution__photo,
  .tesae-solution__cutout,
  .tesae-solution__veil {
    display: none;
  }

  .tesae-solution__display {
    position: static;
    /* Back to the viewport clamp: the container here is the full-width panel, not a half,
       so the desktop cqw would blow the word up. */
    font-size: var(--tesae-fs-display);
    line-height: var(--tesae-solution-mobile-display-lh);
  }

  .tesae-solution__copy {
    grid-area: auto;
    border-radius: 0;
  }

  .tesae-industries__header {
    padding-inline: 0;
    text-align: left;
    align-items: flex-start;
  }

  .tesae-api {
    margin-top: 0;
background: var(--tesae-color-tint);
  }

  .tesae-api .tesae-container {
    padding-inline: var(--tesae-api-mobile-panel-gutter);
  }

  /* The panel is the reference for every cqw below, so the cut-out and the scrim
     scale with the card rather than with the viewport.

     Because she scales and the panel's height does not, she outgrows it past a ~540
     viewport and spills onto the section underneath. A negative top inset opens the
     clip just above the card so her head still breaks the edge, while the sides and
     the foot cut at the panel — the green wash already hides her well before it.

     The foot is rounded to match: the wash and the surface both carry the 10px radius,
     so a square cut let her dark pixels show in the two bottom corners, outside the
     curve. Only the bottom pair is rounded — rounding the opened top would bite into
     her head, which reaches the panel's right edge. */
  .tesae-api__panel {
    container-type: inline-size;
    min-height: var(--tesae-api-mobile-panel-height);
    clip-path: inset(
      var(--tesae-api-mobile-clip-rise)
      var(--tesae-api-mobile-clip-inset)
      var(--tesae-api-mobile-clip-inset)
      var(--tesae-api-mobile-clip-inset)
      round 0 0 var(--tesae-radius-m) var(--tesae-radius-m)
    );
  }

  /* Mobile stacks photo over copy at a set height, so the desktop ratio floor is off —
     the pseudo carries the frame's dark scrim instead. It paints over the photo *and*
     the cut-out (both below it) but under the green wash, which is `::after` and so is
     drawn later at the same level. */
  .tesae-api__panel::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: var(--tesae-api-mobile-scrim-height);
    border-radius: var(--tesae-radius-m) var(--tesae-radius-m) 0 0;
    background:
      linear-gradient(
        to right,
        var(--tesae-overlay-black-65),
        var(--tesae-overlay-black-0) var(--tesae-api-mobile-scrim-soft)
      ),
      linear-gradient(
        to right,
        var(--tesae-color-black),
        var(--tesae-overlay-black-0) var(--tesae-api-mobile-scrim-hard)
      );
    pointer-events: none;
  }

  .tesae-api__surface {
    border-radius: var(--tesae-radius-m);
  }

  /* On mobile the design puts the wash *over* the cut-out, not under it, so it moves
     up to the panel where it can paint on top of both layers. */
  .tesae-api__surface::after {
    content: none;
  }

.tesae-api__panel::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: var(--tesae-radius-m);
        background: linear-gradient(to bottom, var(--tesae-overlay-primary-soft-0) 0%, var(--tesae-overlay-primary-soft-0) 15%, var(--tesae-color-primary-soft) 50%, var(--tesae-color-primary-soft) 100%);
        pointer-events: none;
    }

  /* The copy stays in flow so it can push the panel past its 584px floor when the
     Greek wraps to an extra line — pinning it absolutely is what pushed the button
     out through the bottom edge. */
  .tesae-api__content {
    position: static;
    justify-content: flex-start;
    gap: var(--tesae-space-l);
    width: 100%;
    padding: var(--tesae-api-mobile-copy-top) var(--tesae-api-mobile-inset)
      var(--tesae-space-xl);
    text-align: left;
    align-items: flex-start;
  }

  /* The title is the one piece that does sit on the photo, in white. */
  .tesae-api__content .tesae-h2 {
    position: absolute;
    z-index: 2;
    top: var(--tesae-api-mobile-title-top);
    left: var(--tesae-api-mobile-inset);
    max-width: var(--tesae-api-mobile-title-width);
    color: var(--tesae-color-white);
  }

  .tesae-api__text {
    max-width: none;
    margin-top: 0;
    font-size: var(--tesae-fs-body);
  }

  .tesae-api__text--wide {
    display: none;
  }

  .tesae-api__text--narrow {
    display: block;
  }

  .tesae-api__content .tesae-button {
    width: var(--tesae-api-mobile-button-width);
    min-height: var(--tesae-api-mobile-button-height);
    height: var(--tesae-api-mobile-button-height);
    margin-top: 25px!important;
    padding: 0;
  }

  .tesae-api__background {
    left: 0;
    top: 0;
    width: var(--tesae-api-mobile-background-width);
    height: auto;
    object-fit: fill;
    transform: none;
  }

  .tesae-api__foreground-wrap {
    z-index: 0;
    left: var(--tesae-api-mobile-foreground-wrap-left);
    top: var(--tesae-api-mobile-foreground-rise);
    bottom: auto;
    width: var(--tesae-api-mobile-foreground-wrap-width);
    height: var(--tesae-api-mobile-foreground-wrap-height);
    aspect-ratio: auto;
  }

  .tesae-api__foreground {
    left: var(--tesae-api-mobile-foreground-left);
    top: var(--tesae-api-mobile-foreground-top);
    width: var(--tesae-api-mobile-foreground-width);
    height: var(--tesae-api-mobile-foreground-height);
    max-width: none;
    object-fit: cover;
  }

  .tesae-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .tesae-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    height: auto;
    padding-top: var(--tesae-hero-mobile-inner-top);
  }

  /* Content-sized with a one-screen floor, not a fixed height. The photograph carries
     its own ratio and cannot be compressed, so the only thing left that can give is the
     white tail under the button — Figma's 82px at the full 804. That tail is not padding
     here: it is whatever `min-height` adds beyond the copy, so it appears in full on a
     screen with room for it and simply closes up on a short one, instead of pushing the
     button off the fold. */
  .tesae-hero__panel {
    height: auto;
    min-height: var(--tesae-hero-mobile-panel-height);
    padding: var(--tesae-header-height) var(--tesae-hero-mobile-gutter) 0;
    border-radius: 0;
    background: var(--tesae-color-white);
  }

  .tesae-hero__ambient {
    display: none;
  }

  /* In the flow, after the copy, taking whatever height is left over — so a shorter
     screen or a headline that wraps one line further takes it out of the photograph
     instead of pushing the picture into the paragraph. The image is object-fit: cover,
     so this crops rather than squashes. The negative top margin lifts it back over the
     wordmark, which the frame draws sitting on the picture's top edge; the negative side
     margins undo the panel's gutter so it still bleeds edge to edge. */
  .tesae-hero__bg {
    order: 4;
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    aspect-ratio: var(--tesae-hero-mobile-art-ratio);
    margin: calc(var(--tesae-hero-mobile-wordmark-height) * -1)
      calc(var(--tesae-hero-mobile-gutter) * -1) 0;
    overflow: hidden;
  }

  .tesae-hero__bg--desktop {
    display: none;
  }

  .tesae-hero__bg--mobile {
    display: block;
  }

  .tesae-hero__lead,
  .tesae-hero__aside {
    position: static;
    display: contents;
    width: auto;
  }

  .tesae-hero__title {
    order: 1;
    width: var(--tesae-hero-mobile-copy-width);
    max-width: 100%;
    font-size: 30px;
  }

  .tesae-hero__text {
    order: 2;
    width: var(--tesae-hero-mobile-copy-width);
    max-width: 100%;
    /* Not --tesae-space-l: this gap tightens on a short screen, and the global spacing
       scale must not start following viewport height. */
    margin-top: var(--tesae-hero-mobile-copy-gap);
            font-size: 18px;
  }

  .tesae-hero__wordmark {
    order: 3;
    /* Painted over the photograph, which is pulled up underneath it. */
    position: relative;
    z-index: 1;
    margin-top: var(--tesae-hero-mobile-wordmark-gap);
  }

  .tesae-hero__wordmark img {
    width: var(--tesae-hero-mobile-wordmark-width);
    height: auto;
  }

  /* In the flow too, right after the photograph, lifted back onto it. Pinned from the
     panel it drifted off the picture's edge as soon as the picture changed height; from
     here the frame's overlap holds at every width. */
  .tesae-hero__aside .tesae-button {
    order: 5;
    position: relative;
    z-index: 2;
    align-self: center;
    top: auto;
    left: auto;
    margin-top: calc(var(--tesae-hero-mobile-cta-lift) * -1);
    min-width: var(--tesae-hero-mobile-cta-width);
    height: var(--tesae-hero-mobile-cta-height);
    min-height: var(--tesae-hero-mobile-cta-height);
    transform: none;
  }

  .tesae-hero__aside .tesae-button:hover,
  .tesae-hero__aside .tesae-button:focus-visible {
    transform: translateY(-2px);
  }

  .tesae-hero__badge {
    display: none;
  }

  .tesae-hero__mobile-aade {
    display: inline;
    font-weight: 300;
  }

  .tesae-form-section__inner {
    padding: var(--tesae-space-xl) var(--tesae-space-l);
    border-radius: var(--tesae-radius-m);
  }

  .tesae-tx__title {
    max-width: none;
    font-size: var(--tesae-fs-h3);
  }

  .tesae-why__grid {
    display: flex;
    flex-direction: column;
    gap: var(--tesae-space-l);
    height: auto;
  }

  .tesae-why {
    height: auto;
    padding: var(--tesae-why-mobile-top) 0 var(--tesae-why-mobile-bottom);
  }

  .tesae-why__title {
    margin-bottom: var(--tesae-why-desktop-title-gap);
  }

  .tesae-why__card {
    display: grid;
    grid-template-columns: var(--tesae-space-l) minmax(0, 1fr);
    gap: var(--tesae-space-xs) var(--tesae-space-m);
    padding: 0;
    background: transparent;
    box-shadow: none;
    height: auto;
    border-radius: 0px;
  }

  .tesae-why__card:hover {
    transform: none;
    box-shadow: none;
  }

  .tesae-why__icon {
    grid-row: 1 / span 2;
  }

  /* Full strength on mobile: the 0.5 the desktop card uses, on top of a mark whose
     stroke has already thinned, is what made these read as faint pencil outlines.
     The mobile asset is drawn in the frame's own pale green, so it needs no wash. */
  .tesae-why__icon img {
    width: 100%;
    max-height: none;
    opacity: 1;
  }

  .tesae-why__icon picture {
    display: block;
    width: 100%;
  }

  /* ------------------------------------------------------------------- logos
     CHANGE (20 August 2026) — mobile no longer draws the Figma wall (390x219, the
     six logos pinned to their own pixel, nothing moving). It runs the desktop
     marquee twice: the forward row, and a mirrored copy under it running the other
     way, half a set out of phase. Roughly six logos are on screen at a time and
     all six pass by, which is what the wall could not do on a 390 viewport.

     Not one logo box is restated here. Every size on the row is the desktop size
     times --tesae-logo-scale, so the whole composition is redrawn by the one number
     below — the 0.52 the mobile frame already drew its logos at. */
  .tesae-logos {
    height: auto;
    padding-block: var(--tesae-logos-mobile-pad);
  }

  .tesae-logos__rows {
    gap: var(--tesae-logos-mobile-row-gap);
  }

  .tesae-logos__slide {
    --tesae-logo-scale: var(--tesae-logos-mobile-scale);
  }

  .tesae-logos__row--reverse {
    display: block;
  }

  /* The reverse row is the same left-running slick, mirrored: flipping the viewport
     turns its travel into rightward motion, and flipping each slide back keeps the
     logos themselves the right way round. Two flips, no second slider.

     Slick's own `rtl` option cannot do this here. With `variableWidth: true` slick
     sizes the track to 5000 * slideCount — a fake width — and its rtl offsets are
     measured against that, so the track parks itself off screen. The mirror needs
     nothing from slick and cannot drift out of step with it: scaleX(-1) leaves
     layout width untouched, so every measurement slick takes is the same one it
     takes on the forward row.

     `.slick-slider` is in the selector to win a tie, not for looks: slick.css ships
     `.slick-slider .slick-list { transform: translate3d(0,0,0) }` at the same
     specificity and is enqueued after this file, so the plain two-class selector
     loses and the row silently runs left like the other one. */
  .tesae-logos__row--reverse.slick-slider .slick-list {
    transform: scaleX(-1);
  }

  /* FIX (26 August 2026) — `.slick-slider` gates this one too, and it is not
     decoration: the two flips only cancel out when *both* apply. The outer flip needs
     slick to exist, this one did not, so any state where the row is visible but not
     initialised left every logo mirrored — which is exactly what a desktop page
     narrowed past 991px used to show, since the reverse row is skipped at load on
     desktop and only revealed by the media query afterwards.

     Gated, the failure mode degrades to "a still row of correct logos" instead of
     "a column of backwards ones", whatever the reason slick is absent — JS error,
     blocked script, or a breakpoint crossed before initialisation catches up. */
  .tesae-logos__row--reverse.slick-slider .tesae-logos__slide {
    transform: scaleX(-1);
  }
  
  .tesae-app {
    min-height: var(--tesae-app-mobile-min-height);
    overflow: hidden;
  }

  .tesae-app__inner {
    min-height: var(--tesae-app-mobile-min-height);
    padding-inline: 0;
  }

  .tesae-app__copy {
    text-align: center;
  }

  .tesae-app__wordmark {
    left: 50%;
    top: var(--tesae-app-mobile-wordmark-top);
    width: var(--tesae-app-mobile-wordmark-width);
    transform: translateX(-50%);
  }

  .tesae-app__copy .tesae-h2 {
    left: 50%;
    top: var(--tesae-app-mobile-title-top);
    width: min(
      var(--tesae-app-mobile-title-width),
      calc(100% - var(--tesae-app-mobile-content-side) * 2)
    );
    transform: translateX(-50%);
  }

  .tesae-app__copy .tesae-lead {
    left: 50%;
    top: var(--tesae-app-mobile-body-top);
    width: min(
      var(--tesae-app-mobile-body-width),
      calc(100% - var(--tesae-app-mobile-content-side) * 2)
    );
    transform: translateX(-50%);
  }

  .tesae-app__copy .tesae-hl {
    color: var(--tesae-color-primary);
  }

  .tesae-app__media {
    left: calc(50% + var(--tesae-app-mobile-media-offset));
    top: var(--tesae-app-mobile-media-top);
    width: var(--tesae-app-mobile-media-width);
    transform: translateX(-50%);
  }

  .tesae-app__screen {
    inset:
      var(--tesae-app-mobile-screen-inset-top)
      var(--tesae-app-mobile-screen-inset-right)
      var(--tesae-app-mobile-screen-inset-bottom)
      var(--tesae-app-mobile-screen-inset-left);
    border-radius: var(--tesae-app-mobile-screen-radius);
  }

  /* Centred rather than pinned to both edges: its columns and divider sit at fixed
     Figma pixels, so a stretching list just parked them against the left. */
  .tesae-app__features {
    left: 50%;
    right: auto;
    top: var(--tesae-app-mobile-features-top);
    width: var(--tesae-app-mobile-features-width);
    height: var(--tesae-app-mobile-features-height);
    transform: translateX(-50%);
  }

  .tesae-app__features::after {
    content: '';
    position: absolute;
    left: var(--tesae-app-mobile-feature-divider-left);
    top: 0;
    width: var(--tesae-app-mobile-feature-divider-width);
    height: 100%;
    background: var(--tesae-color-black);
  }

  .tesae-app__features .tesae-app__feature {
    --tesae-app-feature-icon-top: var(--tesae-app-mobile-feature-icon-top);
    --tesae-app-feature-icon-overflow: var(--tesae-app-mobile-feature-icon-bleed);
    --tesae-app-feature-copy-shift: var(--tesae-app-mobile-feature-text-shift);
    left: var(--tesae-app-feature-left);
    top: var(--tesae-app-feature-top);
    width: var(--tesae-app-feature-width);
  }

  .tesae-app__features .tesae-app__feature::before {
    content: '';
    left: calc(
      var(--tesae-app-feature-icon-left)
      + var(--tesae-app-mobile-feature-icon-bg-left)
    );
    top: calc(
      var(--tesae-app-feature-icon-top)
      + var(--tesae-app-mobile-feature-icon-bg-top)
    );
    width: var(--tesae-app-mobile-feature-icon-bg-size);
    height: var(--tesae-app-mobile-feature-icon-bg-size);
    background: var(--tesae-color-white);
  }

  .tesae-app__features .tesae-app__feature::after {
    width: var(--tesae-app-feature-icon-width);
    height: var(--tesae-app-feature-icon-height);
    background-image: url('../img/app-check-mobile.svg');
  }

  .tesae-app__feature:nth-child(1) {
    --tesae-app-feature-left: var(--tesae-app-mobile-online-left);
    --tesae-app-feature-top: var(--tesae-app-mobile-online-top);
    --tesae-app-feature-width: var(--tesae-app-mobile-online-width);
    --tesae-app-feature-icon-left: var(--tesae-app-mobile-online-icon-left);
  }

  .tesae-app__feature:nth-child(2) {
    --tesae-app-feature-left: var(--tesae-app-mobile-receipt-left);
    --tesae-app-feature-top: var(--tesae-app-mobile-receipt-top);
    --tesae-app-feature-width: var(--tesae-app-mobile-receipt-width);
    --tesae-app-feature-icon-left: var(--tesae-app-mobile-receipt-icon-left);
  }

  .tesae-app__feature:nth-child(3) {
    --tesae-app-feature-left: var(--tesae-app-mobile-viber-left);
    --tesae-app-feature-top: var(--tesae-app-mobile-viber-top);
    --tesae-app-feature-width: var(--tesae-app-mobile-viber-width);
    --tesae-app-feature-icon-left: var(--tesae-app-mobile-viber-icon-left);
  }

  .tesae-app__feature:nth-child(4) {
    --tesae-app-feature-left: var(--tesae-app-mobile-email-left);
    --tesae-app-feature-top: var(--tesae-app-mobile-email-top);
    --tesae-app-feature-width: var(--tesae-app-mobile-email-width);
    --tesae-app-feature-icon-left: var(--tesae-app-mobile-email-icon-left);
  }

  .tesae-app__feature:nth-child(5) {
    --tesae-app-feature-left: var(--tesae-app-mobile-history-left);
    --tesae-app-feature-top: var(--tesae-app-mobile-history-top);
    --tesae-app-feature-width: var(--tesae-app-mobile-history-width);
    --tesae-app-feature-icon-left: var(--tesae-app-mobile-history-icon-left);
  }

  .tesae-app__feature:nth-child(6) {
    --tesae-app-feature-left: var(--tesae-app-mobile-print-left);
    --tesae-app-feature-top: var(--tesae-app-mobile-print-top);
    --tesae-app-feature-width: var(--tesae-app-mobile-print-width);
    --tesae-app-feature-icon-left: var(--tesae-app-mobile-print-icon-left);
  }

  .tesae-app__badge {
    left: 50%;
    top: var(--tesae-app-mobile-badge-top);
    width: var(--tesae-app-mobile-badge-width);
    transform: translateX(-50%);
  }

  .tesae-app__badge img {
    width: 100%;
  }

  .tesae-tx {
    padding: var(--tesae-tx-mobile-top) 0 var(--tesae-tx-mobile-bottom);
background: var(--tesae-color-tint);
  }

  .tesae-tx__header {
    margin-bottom: var(--tesae-tx-mobile-header-gap);
  }

  .tesae-tx__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tesae-tx-mobile-grid-gap);
  }

  /* Same notch, drawn smaller — and on mobile it holds the expand control rather
     than the badge, which moves up beside the title. */
  .tesae-tx__card {
    --tesae-tx-chip-w: var(--tesae-tx-mobile-chip-w);
    --tesae-tx-chip-h: var(--tesae-tx-mobile-chip-h);
    --tesae-tx-notch-inset: var(--tesae-tx-mobile-notch-inset);
    --tesae-tx-notch-drop: var(--tesae-tx-mobile-notch-drop);
    min-height: var(--tesae-mobile-tx-min-height);
  }

  .tesae-tx__body {
    justify-content: center;
    gap: var(--tesae-space-s);
    padding: var(--tesae-space-m);
  }

  .tesae-tx__summary {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .tesae-tx__heading {
    gap: var(--tesae-space-2xs);
  }

  .tesae-tx__code {
    position: static;
    display: block;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    font-size: var(--tesae-fs-tx-code-mobile);
    font-weight: var(--tesae-fw-extrabold);
    line-height: var(--tesae-lh-tight);
  }

  .tesae-tx__title {
    font-size: var(--tesae-fs-tx-title-mobile);
    line-height: var(--tesae-lh-snug);
  }

  .tesae-tx__text {
    margin-top: 0;
    font-size: var(--tesae-fs-body);
  }

  /* No hover lift here. A touch screen has no hover to leave, so the state sticks after
     a tap, and the 6px translate shifts the card out from under the notch's three
     rectangles — which is the dark seam that shows up across the card's shoulder. */
  .tesae-tx__card:hover {
    transform: none;
    box-shadow: none;
  }

  .tesae-tx__bullets {
    margin-top: 15px;
    gap: var(--tesae-space-s);
  }

  .tesae-tx__bullets li {
    padding-left: calc(var(--tesae-space-m) + var(--tesae-space-s));
    line-height: var(--tesae-lh-normal);
  }

  .tesae-tx__bullets li::before {
    top: 0.15em;
    width: var(--tesae-space-m);
    height: var(--tesae-space-m);
  }


  .tesae-tx__details {
    display: none;
    padding-top: var(--tesae-space-s);
  }

  .tesae-tx__card.is-open .tesae-tx__details {
    display: flex;
  }

  .tesae-mobile-card-toggle {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--tesae-mobile-control-size);
    height: var(--tesae-mobile-control-size);
    border-radius: var(--tesae-radius-s);
    background: var(--tesae-color-black);
  }

  .tesae-mobile-card-toggle::before,
  .tesae-mobile-card-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--tesae-space-s);
    height: 2px;
    background: var(--tesae-color-white);
    transform: translate(-50%, -50%);
    transition: opacity var(--tesae-transition), transform var(--tesae-transition);
  }

  .tesae-mobile-card-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .tesae-mobile-card-toggle[aria-expanded='true']::after {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  /* On the cards the control sits in the notch and reads as part of the badge, so it
     takes the card's own colours instead of a black chip. */
  .tesae-tx__card .tesae-tx__toggle {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: var(--tesae-tx-chip-w);
    height: var(--tesae-tx-chip-h);
    border-radius: var(--tesae-radius-m);
    background: var(--tesae-notch-bg);
  }

  .tesae-tx__card .tesae-tx__toggle::before,
  .tesae-tx__card .tesae-tx__toggle::after {
    width: var(--tesae-space-m);
    background: currentColor;
  }

  .tesae-solution {
    padding: 0;
    background: var(--tesae-color-tint);
  }

  .tesae-solution .tesae-container {
    padding-inline: 0;
  }

  .tesae-solution__panel {
    min-height: var(--tesae-solution-mobile-height);
    border-radius: 0;
  }

  /* Height comes from the display word now, not a reserved strip. */
  .tesae-solution__media {
    background: var(--tesae-color-primary-soft);
  }

  /* Every inset and gap below is the frame's own measurement rather than a step off
     the spacing scale, because this panel is drawn to fixed numbers at 390. */
  .tesae-solution__copy {
    padding: var(--tesae-solution-mobile-title-gap)
      var(--tesae-solution-mobile-copy-inset) 80px;
  }

  .tesae-solution__title {
    max-width: none;
    /* The frame sets the running text in Light; ExtraLight is the desktop weight. */
    font-weight: var(--tesae-fw-light);
  }

  .tesae-solution__text {
    max-width: none;
    margin-top: var(--tesae-solution-mobile-text-gap);
    margin-left: var(--tesae-solution-mobile-text-inset);
    line-height: var(--tesae-lh-snug);
  }

  .tesae-solution__copy .tesae-button {
    width: var(--tesae-solution-mobile-button-width);
    min-height: var(--tesae-solution-mobile-button-height);
    height: var(--tesae-solution-mobile-button-height);
    margin-top: var(--tesae-solution-mobile-button-gap);
    padding: 0;
  }

  /* Mobile inverts the highlight: a white chip with black type. */
  .tesae-solution__title .tesae-hl {
    background: var(--tesae-color-white);
    color: var(--tesae-color-black);
  }

  .tesae-industries__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tesae-industries-mobile-grid-gap);
    height: auto;
  }

  .tesae-industries {
    padding: var(--tesae-industries-mobile-top) 0 var(--tesae-industries-mobile-bottom);
  }

  .tesae-industries__header {
    margin-bottom: var(--tesae-industries-mobile-header-gap);
  }

  .tesae-industries .tesae-showmore {
    margin-top: var(--tesae-space-xl);
  }

  /* The mobile frame keeps the notched shape: the black chip overhangs the card's
     top-right corner and the fill is cut around it, same construction as desktop.
     The chip tokens are composed here rather than on :root, so the mobile sizes
     actually reach --tesae-notch-w/h. */
  .tesae-industries__card,
  .tesae-industries__card:hover,
  .tesae-industries__card:focus-within,
  .tesae-industries__card.is-featured {
    /* --tesae-notch-w/h are inherited from the desktop rule: the chip and notch
       tokens already clamp to Figma's mobile 50x48.8 badge and 60x57.6 cut-out at
       991px, so the shape carries over unchanged. Only the fill is restated, because
       the hover rule that blackens it does not apply on a touch screen. */
    --tesae-notch-bg: var(--tesae-color-white);
    display: grid;
    grid-template-columns: var(--tesae-ind-mobile-icon-size) minmax(0, 1fr);
    grid-template-areas:
      'icon title'
      'text text'
      'cta  cta';
    /* The title row takes what it needs, the answer row is empty until the card is
       opened, and the last row absorbs the slack so the CTA sits on the card floor. */
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: var(--tesae-ind-mobile-icon-gap);
    row-gap: 0;
    padding: var(--tesae-ind-mobile-pad-top) var(--tesae-ind-mobile-pad-x)
      var(--tesae-ind-mobile-cta-bottom);
    min-height: var(--tesae-industries-mobile-card-height);
    height: auto;
    overflow: visible;
    border-color: transparent;
    background: transparent;
    color: var(--tesae-color-black);
    box-shadow: none;
    transform: none;
  }

  .tesae-industries__card.is-mobile-preview-item:not(.is-revealed) {
    display: grid;
  }

  .tesae-industries__card.is-hidden-item:not(.is-mobile-preview-item):not(.is-revealed) {
    display: none;
  }

  /* The card is notched exactly as on desktop — the corner is cut away and the chip
     sits in the void. Confirmed off the node's render: above the chip there is no
     card fill at all, only the chip's own drop shadow. The three rectangles draw the
     fill and carry the shadow, so the card itself stays transparent. */
  .tesae-industries__card .tesae-notch {
    display: block;
  }

  /* Mobile puts the icon inline with the title instead of in the notch — the notch
     holds the +/- control here — so it loses the badge background. */
  .tesae-industries__icon,
  .tesae-industries__card:hover .tesae-industries__icon,
  .tesae-industries__card:focus-within .tesae-industries__icon,
  .tesae-industries__card.is-featured .tesae-industries__icon {
    position: relative;
    z-index: 1;
    grid-area: icon;
    width: var(--tesae-ind-mobile-icon-size);
    height: var(--tesae-ind-mobile-icon-size);
    border-radius: 0;
    background: transparent;
  }

  /* The card stays white here, so the icon stays black even on the featured one. */
  .tesae-industries__icon img,
  .tesae-industries__card:hover .tesae-industries__icon img,
  .tesae-industries__card:focus-within .tesae-industries__icon img,
  .tesae-industries__card.is-featured .tesae-industries__icon img {
    width: 100%;
    filter: brightness(0);
  }

  /* The body is not a box on mobile: its three children are placed on the card's own
     grid, so the title sits beside the icon and the CTA spans the full width below.
     Dropping the wrapper also drops the position:relative that lifted the copy above
     .tesae-notch (z-index:0), so each promoted child has to carry its own. */
  .tesae-industries__body {
    display: contents;
  }

  .tesae-industries__body > * {
    position: relative;
    z-index: 1;
  }

  .tesae-industries__text {
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    line-height: var(--tesae-lh-normal);
  }

  .tesae-industries__card .tesae-button--primary {
    margin-top: 0;
  }

  /* 18px regular over 1.29 — the frame wraps these titles onto two lines and the
     card's 123px floor is drawn for exactly that. */
  .tesae-industries__body .tesae-h3 {
    grid-area: title;
    align-self: start;
    max-width: var(--tesae-ind-mobile-title-max);
    margin: 0;
    font-weight: var(--tesae-fw-regular);
    line-height: var(--tesae-lh-tight);
  }

  .tesae-industries__header > .tesae-h2 .tesae-hl {
    display: block;
  }

  /* On mobile the control *is* the badge: it takes the same corner, size and radius
     the icon holds on desktop, so the notch cut out by .tesae-notch fits it exactly.
     Figma's Rectangle 294 is 50x48.8 flush in the corner, which is what these tokens
     clamp to at 991px. */
  .tesae-industries__toggle {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: var(--tesae-ind-chip-w);
    height: var(--tesae-ind-chip-h);
    border-radius: var(--tesae-radius-m);
  }

	_.tesae-industries .tesae-showmore{
		display:none;
	}


  /* The frame's plus is 24x21, larger than the shared card control's. */
  .tesae-industries__toggle::before,
  .tesae-industries__toggle::after {
    width: var(--tesae-ind-mobile-plus-w);
  }

  .tesae-industries__toggle::after {
    width: var(--tesae-ind-mobile-plus-h);
  }

  .tesae-industries__text {
    display: none;
  }

  /* The answer opens between the title row and the CTA row, spanning both columns.
     The frame runs it at 14/1.6 and keeps it clear of the card's right edge. */
  .tesae-industries__card.is-open .tesae-industries__text {
    display: block;
    grid-area: text;
    margin-top: var(--tesae-ind-mobile-text-top);
    margin-right: var(--tesae-ind-mobile-text-end);
    margin-bottom: var(--tesae-ind-mobile-text-bottom);
    font-size: var(--tesae-ind-mobile-text-size);
    line-height: var(--tesae-lh-loose);
  }

  /* Open is the mobile equivalent of the desktop hover: the card inverts to black
     with white type, the CTA keeping its soft green. Without a pointer there is no
     hover state to carry it, so the accordion does. */
  .tesae-industries__card.is-open,
  .tesae-industries__card.is-open:hover,
  .tesae-industries__card.is-open:focus-within {
    --tesae-notch-bg: var(--tesae-color-black);
    color: var(--tesae-color-text-invert);
    padding-bottom: var(--tesae-ind-mobile-open-bottom);
  }

  .tesae-industries__card.is-open .tesae-industries__icon img {
    filter: brightness(0) invert(1);
  }

  /* The mark is black against the white cards; on the open one it would vanish. */
  .tesae-industries__card.is-open .tesae-button--primary::before {
    color: var(--tesae-color-primary-soft);
  }

  /* "Ενδιαφέρομαι" is a plain link row on the last line of the card, its chevron
     leading rather than trailing — the frame puts the mark at x=18 and the label
     at x=40, both left of the card's 20px inset. */
  .tesae-industries__card .tesae-button--primary,
  .tesae-industries__card:hover .tesae-button--primary,
  .tesae-industries__card:focus-within .tesae-button--primary,
  .tesae-industries__card.is-featured .tesae-button--primary {
    grid-area: cta;
    align-self: end;
    justify-self: start;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: auto;
    min-height: 0;
    margin-left: calc(var(--tesae-ind-mobile-cta-inset) - var(--tesae-ind-mobile-pad-x));
    gap: var(--tesae-ind-mobile-cta-gap);
    padding: 0;
    background: transparent;
    color: var(--tesae-color-primary-soft);
    font-size: var(--tesae-ind-mobile-cta-size);
    font-weight: var(--tesae-fw-bold);
    box-shadow: none;
    transform: none;
  }

     .tesae-industries__card .tesae-button--primary::before {
        content: '';
        flex: 0 0 var(--tesae-ind-mobile-chevron-w);
        color: var(--tesae-color-black);
        font-size: var(--tesae-fs-body-lg);
        line-height: 1;
        background-image: url(https://e-invoicing.tesae.gr/wp-content/uploads/2026/08/Group-480.png);
        width: 13px;
        height: 16px;
        background-size: contain;
        background-repeat: no-repeat;
    }

  /* The desktop rule adds a trailing mark; mobile leads with one instead. */
  .tesae-industries__card .tesae-button--primary::after {
    content: none;
  }

  .tesae-faq__title {
    max-width: 7ch;
    margin-bottom: var(--tesae-faq-mobile-title-gap);
    text-align: left;
  }

  .tesae-faq {
    padding: var(--tesae-faq-mobile-top) 0 var(--tesae-faq-mobile-bottom);
    /* Only the FAQ is linked from the bottom bar while the countdown strip covers
       the viewport top. Keep its heading below that strip without shifting any
       other in-page anchor. */
    scroll-margin-top: var(--tesae-deadline-mobile-status-height);
  }

  .tesae-accordion {
    gap: 0;
    width: 100%;
  }

  .tesae-accordion__item,
  .tesae-accordion__item:hover {
    height: var(--tesae-faq-mobile-item-height);
    min-height: var(--tesae-faq-mobile-item-height);
    border-bottom: 1px solid var(--tesae-color-black);
    border-radius: 0;
    background: transparent;
  }

  /* The list's outer edges stay open — no rule above the first row, none under the last —
     so the lines read as dividers between rows instead of boxing the whole list in.
     The `:hover` variants are named too because the base rule sets the bottom border on
     `.tesae-accordion__item:hover` as well, at the same specificity. */
  .tesae-accordion__item:first-child,
  .tesae-accordion__item:first-child:hover {
    border-top: 0;
  }

  /* "Last" has to mean the last row *on screen*, not the last in the DOM. The FAQ ships
     11 rows and shows 6 until "Δες περισσότερα" reveals the rest — the other five stay in
     the markup as `display: none` — so `:last-child` alone clears the border under a row
     nobody can see and leaves one hanging under the 6th.
     The `:has()` selector catches the row sitting immediately before the first hidden one,
     which is the last visible row while the list is collapsed; `:last-child` takes over
     once everything is revealed. Both states, one rule, no JS. */
  .tesae-accordion__item:last-child,
  .tesae-accordion__item:last-child:hover,
  .tesae-accordion__item:has(+ .is-hidden-item:not(.is-revealed)),
  .tesae-accordion__item:has(+ .is-hidden-item:not(.is-revealed)):hover {
    border-bottom: 0;
  }

  .tesae-accordion__item:nth-child(2) {
    height: var(--tesae-faq-mobile-tall-item-height);
  }

  .tesae-accordion__item:nth-child(4) {
    height: var(--tesae-faq-mobile-medium-item-height);
  }

  .tesae-accordion__item.is-open,
  .tesae-accordion__item.is-open:hover {
    height: var(--tesae-faq-mobile-open-height);
    min-height: var(--tesae-faq-mobile-open-height);
    margin-inline: calc(var(--tesae-gutter) * -1);
    padding-inline: var(--tesae-gutter);
    border-color: var(--tesae-color-black);
    border-radius: 0;
    background: var(--tesae-color-black);
    margin-top: -1px;
  }

  .tesae-accordion__trigger {
    min-height: var(--tesae-faq-mobile-item-height);
    padding: var(--tesae-space-m) 0;
    font-size: 18px;
  }

  /* No pill on mobile: the frame draws a bare mark, so the disc goes transparent. */
  .tesae-accordion__icon,
  .tesae-accordion__item.is-open .tesae-accordion__icon,
  .tesae-accordion__trigger:hover .tesae-accordion__icon {
    width: var(--tesae-faq-mobile-icon-size);
    height: var(--tesae-faq-mobile-icon-size);
    background: transparent;
  }

  .tesae-accordion__icon::before,
  .tesae-accordion__icon::after,
  .tesae-accordion__trigger:hover .tesae-accordion__icon::before,
  .tesae-accordion__trigger:hover .tesae-accordion__icon::after {
    width: var(--tesae-faq-mobile-mark-width);
    background: var(--tesae-color-primary);
  }

  /* The upright arm is rotated 90deg, so its `width` is what runs vertically — and the
     frame's plus is 24 across but only 21 tall. */
  .tesae-accordion__icon::after,
  .tesae-accordion__trigger:hover .tesae-accordion__icon::after {
    width: var(--tesae-faq-mobile-mark-height);
  }

  /* White on the opened black card, not the pale green the pill used. */
  .tesae-accordion__item.is-open .tesae-accordion__icon::before,
  .tesae-accordion__item.is-open .tesae-accordion__icon::after {
    background: var(--tesae-color-white);
  }

  .tesae-accordion__answer {
    padding: 0 0 var(--tesae-space-l);
  }

  .tesae-faq .tesae-showmore {
    margin-top: var(--tesae-faq-mobile-showmore-gap);
  }

  .tesae-tx__header {
    align-items: center;
    text-align: center;
  }

  .tesae-showmore .tesae-button--ghost {
    gap: var(--tesae-space-xs);
    padding: 0;
    border: 0;
    font-size: var(--tesae-fs-body);
    font-weight: var(--tesae-fw-extrabold);
  }

  .tesae-showmore .tesae-button--ghost::after {
    content: '';
    width: var(--tesae-space-xs);
    height: var(--tesae-space-xs);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
  }

  .tesae-showmore .tesae-button--ghost[aria-expanded='true']::after {
    transform: translateY(25%) rotate(225deg);
  }

  .tesae-showmore .tesae-button--ghost:hover,
  .tesae-showmore .tesae-button--ghost:focus-visible {
    background: transparent;
    color: var(--tesae-color-primary);
  }

  .tesae-testimonials__title {
    text-align: center;
    transform: translate(
      var(--tesae-testimonials-mobile-title-shift-x),
      var(--tesae-testimonials-mobile-title-shift-y)
    );
  }

  .tesae-form-section {
    padding: 0 0 var(--tesae-form-mobile-bottom);
    
  }

  .tesae-form-section .tesae-container {
    max-width: none;
    padding-inline: var(--tesae-form-mobile-gutter);
  }

  .tesae-form-section__inner {
    display: block;
    width: 100%;
    min-height: var(--tesae-form-mobile-min-height);
    padding: var(--tesae-form-mobile-padding-top) var(--tesae-form-mobile-padding-x)
      var(--tesae-form-mobile-padding-bottom);
    border-radius: var(--tesae-radius-m);
  }

  .tesae-form-section__copy {
    margin-left: var(--tesae-form-mobile-copy-inset);
    gap: var(--tesae-form-mobile-copy-gap);
  }

  .tesae-form-section__copy .tesae-lead {
    max-width: none;
  }

  .tesae-form {
    margin-top: var(--tesae-form-mobile-form-gap);
  }

  .tesae-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tesae-form__grid > .tesae-form__field {
    height: var(--tesae-form-mobile-field-height);
  }

  .tesae-form__field--select::before {
    content: '';
    position: absolute;
    top: var(--tesae-form-mobile-select-top);
    right: var(--tesae-form-mobile-select-right);
    z-index: 2;
    width: var(--tesae-form-mobile-select-width);
    height: var(--tesae-form-mobile-select-height);
    background: url('../img/form-select-chevron-mobile-figma.svg') center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .tesae-form__grid > .tesae-form__field--full {
    height: var(--tesae-form-mobile-textarea-cell-height);
    transform: none;
  }

  .tesae-form__field--full textarea.tesae-form__input {
    height: var(--tesae-form-mobile-textarea-input-height);
  }

  .tesae-form__footer {
    position: relative;
    display: block;
    height: var(--tesae-form-mobile-footer-height);
    margin-top: 0;
  }

  .tesae-form__field--consent {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .tesae-form__consent {
    font-size: var(--tesae-fs-body);
  }

  .tesae-form__footer .tesae-button {
    position: absolute;
    top: var(--tesae-form-mobile-submit-top);
    left: 50%;
    transform: translateX(-50%);
  }

  .tesae-form__footer .tesae-button:hover,
  .tesae-form__footer .tesae-button:focus-visible {
    transform: translateX(-50%) translateY(var(--tesae-form-button-hover-shift));
  }

  .tesae-testimonials {
    padding: var(--tesae-testimonials-mobile-top) 0 var(--tesae-testimonials-mobile-bottom);
  }

  .tesae-testimonials .tesae-container {
    padding-inline: var(--tesae-testimonials-mobile-gutter);
  }

  /* There is no hover on a phone, and the frame still draws one card black: it is the
     slide you are on. Slick already marks that, so the black follows the swipe. */
  .tesae-testimonial {
    min-height: var(--tesae-testimonial-mobile-height);
    background: var(--tesae-color-primary-soft);
  }

  .slick-current .tesae-testimonial {
    background: var(--tesae-color-black);
    color: var(--tesae-color-text-invert);
  }
}
@media (max-height: 700px) {
.tesae-h1.tesae-hero__title{
  font-size:31px;
}


}


@media (max-width: 430px) {


    .tesae-footer__band-image {
              top:11.1px;
    }


}


@media (max-width: 390px) {

.tesae-solution__display{
  font-size:40px;
}

    .tesae-footer__band-image {
              top:24.1px;
    }


}

@media (min-width: 380px) and (max-width: 430px) and (min-height: 701px) {
.tesae-hero__inner {
height: 390px;
justify-content: space-between;
}
}


/*GS ZOOM CHANGES*/
@media (max-width: 360px) {
	.tesae-accordion__item, .tesae-accordion__item:hover {
		height: auto;
	}

	.tesae-accordion__item.is-open, .tesae-accordion__item.is-open:hover {
		height: auto;
	}

	.tesae-solution__surface {
		font-size: 35px;
	}

	.tesae-solution__display {
		font-size: 35px;
	}
}
@media (max-width: 345px) {
	.tesae-accordion__item, .tesae-accordion__item:hover {
		height: auto;
	}

	.tesae-accordion__item.is-open, .tesae-accordion__item.is-open:hover {
		height: auto;
	}

	.tesae-solution__surface {
		font-size: 35px;
	}

	.tesae-solution__display {
		font-size: 35px;
	}

	.tesae-app__feature:nth-child(6),.tesae-app__feature:nth-child(5),.tesae-app__feature:nth-child(4),.tesae-app__feature:nth-child(2) {
		left: 63%;
	}

	.tesae-app__features::after {
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.tesae-app__features {
		width: calc(100% - 10px);
	}

	.tesae-app__features .tesae-app__feature {
		width: 100%;
		max-width: 39%;
	}

	.tesae-app__features .tesae-app__feature::after {
		/* left: 0px; */
		right: unset;
		margin-left: 0;
		margin-right: auto;
	}

	.tesae-app__features .tesae-app__feature::before {
		top: -5px;
		left: calc(var(--tesae-app-feature-icon-left) + var(--tesae-app-feature-icon-overflow));
	}
}