/* ============================================================================
   TESAE — section styles.
   ========================================================================== */

/* ------------------------------------------------------------------- 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-tx__card,
.tesae-tx__body,
.tesae-industries__card,
.tesae-industries__body,
.tesae-form-section__copy,
.tesae-accordion__trigger,
.tesae-accordion__question{min-width: 0}

/* 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: #cb1716}

/* 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: #000000}

.tesae-section--dark .tesae-ink,
.tesae-tx__card:nth-child(2) .tesae-ink,
.tesae-tx__card:nth-child(3) .tesae-ink{color: #ffffff}

.tesae-thin{font-weight: 300}

/* 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: clamp(12px, 0.4306vw + 7.733px, 16px)}

.tesae-checklist li{position: relative;
padding-left: calc(clamp(16px, 0.6611vw + 7.466px, 24px) + clamp(12px, 0.4306vw + 7.733px, 16px));
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 500}

.tesae-checklist li::before{content: '';
position: absolute;
left: 0;
top: 0.15em;
width: clamp(16px, 0.6611vw + 7.466px, 24px);
height: clamp(16px, 0.6611vw + 7.466px, 24px);
background: #cb1716;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M6.2 11.4 2.8 8l1.2-1.2 2.2 2.2 5-5L12.4 5.2z'/%3E%3C/svg%3E") center / contain no-repeat}

.tesae-card{display: flex;
flex-direction: column;
gap: clamp(16px, 0.6611vw + 7.466px, 24px);
padding: 8%;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 0 28.4px rgba(0, 0, 0, 0.11);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-card:hover{transform: translateY(-6px);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12)}

.tesae-showmore{display: flex;
justify-content: center;
margin-top: clamp(32px, 3.4446vw - 2.136px, 64px)}

/* 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 */

/* --------------------------------------------------------------------- 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. */

/* 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. */

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

  50% {
    transform: translateY(8px);

  }
}

/* The ΑΑΔΕ mark trails the last line of the headline. */

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

/* 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. */

/* 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. */

/* 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`. */

/* 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. */

/* Translucent box holding the three units, split by hairlines. */

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

/* 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. */

/* The card stretches to its row on its own; `overflow: hidden` on top of a fixed
   height is what clipped the copy. */

/* -------------------------------------------------------------------- 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. */

/* 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. */

/* 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-showmore .tesae-button--ghost::after{content: '';
width: clamp(12px, 0.4306vw + 7.733px, 16px);
height: clamp(12px, 0.4306vw + 7.733px, 16px);
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. */

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

/* 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. */

/* 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. */

/* 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. */

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

/* 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. */

/* 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. */

/* Green over the photo: opaque across the copy, gone by the right edge. */

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

.tesae-tx{padding: 160px 0 0}

.tesae-tx__header{display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 0.6611vw + 7.466px, 24px);
max-width: 910px;
margin-inline: auto;
margin-bottom: 70px;
text-align: center}

.tesae-tx__grid{display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2.7987vw - 11.734px, 42px)}

/* 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{position: relative;
display: flex;
flex-direction: column;
color: #000000;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-tx__card:hover{transform: translateY(-6px);
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12)}

.tesae-tx__body{position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 0;
padding: clamp(16px, 4.6286vw - 29.87px, 59px) clamp(16px, 3.9828vw - 23.290px, 53px) clamp(16px, 3.9828vw - 23.290px, 53px)}

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

.tesae-tx__title{font-weight: 300;
line-height: 1.2}

.tesae-tx__text{margin-top: clamp(16px, 2.7987vw - 11.734px, 42px);
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 500;
line-height: 1.5}

/* One blank line between bullets, exactly as the design's text block is set. */
.tesae-tx__bullets{margin-top: clamp(16px, 3.8751vw - 22.41px, 52px);
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
gap: calc(1.43 * 1em)}

.tesae-tx__bullets li{padding-left: 2.722em;
line-height: 1.43}

.tesae-tx__bullets li::before{top: 0;
width: 1.4em;
height: 1.4em}

.tesae-tx__card:nth-child(2) .tesae-tx__bullets li::before {background-color: transparent}

.tesae-tx__card:nth-child(2) .tesae-hl,
.tesae-tx__card:nth-child(3) .tesae-hl{color: #ffffff}

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

/* 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. */

/* Clipped ground: the room photograph under a black wash, plus the solid copy of the
   display word. */

/* The figure stands proud of the panel's top edge, so it lives outside the clip. */

/* Second, faint copy of the word — clipped like the first, but painted over him. */

/* 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. */

/* 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. */

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

.tesae-industries{padding: clamp(64px, 8.1808vw - 17.072px, 140px) 0 5px}

.tesae-industries__header{display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 0.6611vw + 7.466px, 24px);
max-width: 1133px;
margin-inline: auto;
margin-bottom: 77px;
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: clamp(16px, 3.1216vw - 14.94px, 45px)}

.tesae-industries__card{position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
min-height: 0;
padding: clamp(16px, 2.6911vw - 10.67px, 41px) clamp(12px, 0.4306vw + 11.73px, 16px)
    clamp(16px, 1.3993vw + 2.13px, 29px) clamp(16px, 2.7987vw - 11.73px, 42px);
color: #000000}

/* The shadow goes on the shape rather than the card, so it follows the notched
   outline and leaves the copy alone. */

/* 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: clamp(50px, 0.8396vw + 41.68px, 57.8px);
height: clamp(49px, 0.8719vw + 40.36px, 57.1px);
border-radius: 10px;
background: #ffffff}

/* 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: 50%;
height: auto;
filter: brightness(0);
transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

/* 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% - calc(clamp(50px, 0.8396vw + 41.68px, 57.8px) + 10px));
font-size: clamp(18px, 1.0764vw + 7.333px, 28px);
line-height: 1.26}

.tesae-industries__text{margin-top: clamp(12px, 2.5834vw - 13.60px, 36px);
margin-bottom: clamp(12px, 2.6911vw - 14.67px, 37px);
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
line-height: 1.6;
max-width: 326px}

.tesae-industries__card .tesae-button--primary{margin-top: auto;
background: #f6f6f6;
color: #000000}

.tesae-industries__card,
.tesae-industries__card:hover,
.tesae-industries__card:focus-within{color: #1a1a1a}

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

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

.tesae-faq__title{margin-bottom: 68px;
text-align: center}

.tesae-faq{background: transparent}

.tesae-faq::before{content: '';
position: absolute;
inset: 0;
z-index: -1;
background: #f6f6f6}

.tesae-faq{padding: clamp(64px, 8.1808vw - 17.072px, 140px) 0 0}

.tesae-accordion{display: flex;
flex-direction: column;
gap: 23px;
width: 1508px;
max-width: 100%;
margin-inline: auto}

.tesae-accordion__item{min-height: 97px;
overflow: hidden;
border-radius: 8px;
background: #ffffff;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-accordion__item.is-open{min-height: 208px;
border-radius: 8px;
background: #5c0022;
color: #ffffff}

.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: clamp(16px, 0.6611vw + 7.466px, 24px);
width: 100%;
min-height: 97px;
padding: clamp(16px, 0.6611vw + 7.466px, 24px) clamp(16px, 0.6611vw + 7.466px, 24px) clamp(16px, 0.6611vw + 7.466px, 24px) clamp(32px, 3.4446vw - 2.136px, 64px);
text-align: left;
font-size: clamp(18px, 1.0764vw + 7.333px, 28px);
font-weight: 300;
line-height: 1.26}

.tesae-accordion__item.is-open .tesae-accordion__trigger{font-weight: 800}

.tesae-accordion__item:hover{background: #ffffff}

.tesae-accordion__item.is-open:hover{background: #5c0022}

.tesae-accordion__trigger:hover .tesae-accordion__question{color: #cb1716}

.tesae-accordion__trigger:hover .tesae-accordion__icon{background: #cb1716}

.tesae-accordion__trigger:hover .tesae-accordion__icon::before,
.tesae-accordion__trigger:hover .tesae-accordion__icon::after{background: #ffffff}

.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: #ffffff;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-accordion__item.is-open .tesae-accordion__icon{background: #ffffff}

.tesae-accordion__icon::before,
.tesae-accordion__icon::after{content: '';
position: absolute;
left: 50%;
top: 50%;
width: 0.9em;
height: 2px;
background: #e4e4e4;
transform: translate(-50%, -50%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.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: #5c0022}

.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 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

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

.tesae-accordion__answer{padding: 0 clamp(32px, 3.4446vw - 2.136px, 64px) clamp(24px, 1.7223vw + 6.932px, 40px);
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 500}

.tesae-accordion__answer p{margin: 0 0 clamp(12px, 0.4306vw + 7.733px, 16px)}

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

.tesae-faq .tesae-showmore{margin-top: 35px}

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

.tesae-form-section{padding: clamp(0px, 13.1324vw - 130.142px, 122px) 0 clamp(18px, 12.2713vw - 103.608px, 132px)}

/* 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 .tesae-container{max-width: 1508px;
padding-inline: clamp(0px, -1.7223vw + 33.067px, 16px)}

.tesae-form-section__inner{position: relative;
z-index: 2;
display: grid;
align-items: start;
width: 96%;
max-width: 1502px;
min-height: 700px;
margin: auto}

.tesae-form-section__copy{display: flex;
flex-direction: column;
gap: clamp(22px, 1.1841vw + 10.267px, 33px)}

.tesae-form-section__copy .tesae-lead{max-width: 495px}

.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: clamp(24px, 1.8299vw + 5.864px, 41px)}

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

.tesae-form__grid > .tesae-form__field{height: clamp(72px, 1.7223vw + 54.932px, 88px)}

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

.tesae-form__label{position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
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: clamp(32px, 0.9688vw + 22.4px, 41px);
padding: 0 2px;
border: 0;
border-bottom: 0.8px solid #ffffff;
border-radius: 0;
background: transparent;
color: inherit;
font-family: inherit;
font-size: clamp(16px, 0.6459vw + 9.600px, 22px);
font-weight: 300;
line-height: 1.29;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

.tesae-form__input::placeholder{color: #000000;
opacity: 1}

.tesae-form__input:focus{outline: none;
border-bottom-color: #000000}

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

.tesae-form__grid > .tesae-form__field--full{height: clamp(130px, 1.0764vw + 119.333px, 140px);
transform: translateY(clamp(-2px, -0.2153vw + 2.134px, 0px))}

.tesae-form__field--full textarea.tesae-form__input{height: clamp(130px, 1.0764vw + 119.333px, 140px);
padding-top: 5px;
resize: none}

.tesae-form__input option{color: #000000}

.tesae-form__field.has-error .tesae-form__input{border-bottom-color: #000000}

.tesae-form__error{position: absolute;
top: calc(clamp(32px, 0.9688vw + 22.4px, 41px) + 4px);
left: 0;
z-index: 1;
font-size: clamp(12px, 0.6459vw + 5.600px, 18px);
font-weight: 700;
color: #000000}

.tesae-form__field--full .tesae-form__error{top: calc(clamp(130px, 1.0764vw + 119.333px, 140px) + 4px)}

.tesae-form__error:empty{display: none}

.tesae-form__footer{display: flex;
align-items: flex-start;
justify-content: space-between;
margin-top: 50px}

.tesae-form__field--consent{margin-top: 23px;
margin-left: 2px}

.tesae-form__consent{display: flex;
align-items: flex-start;
gap: clamp(8px, 0.2153vw + 5.866px, 10px);
font-size: clamp(12px, 0.4306vw + 9.733px, 18px);
font-weight: 300;
line-height: 1.29;
cursor: pointer}

.tesae-form__consent input[type='checkbox']{appearance: none;
position: relative;
flex: 0 0 clamp(16px, -0.1076vw + 18.067px, 17px);
width: clamp(16px, -0.1076vw + 18.067px, 17px);
height: 14px;
margin: 0;
border: 0;
border-radius: 0;
background: #000000}

/* 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: 5px;
height: 9px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: translate(-50%, -60%) rotate(45deg)}

.tesae-form__consent span{transform: translateY(clamp(-3px, -0.1076vw - 0.933px, -2px))}

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

.tesae-form__footer .tesae-button{flex: 0 1 clamp(171px, 7.1044vw + 100.595px, 237px);
width: 100%;
max-width: clamp(171px, 7.1044vw + 100.595px, 237px);
min-height: clamp(47px, 1.0764vw + 36.333px, 57px);
padding: 0}

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

.tesae-form__feedback{margin-top: clamp(16px, 0.6611vw + 7.466px, 24px);
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 700}

.tesae-form__feedback:empty{display: none}

.tesae-form__feedback.is-error{color: #000000}

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

/* 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. */

/* 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. */

/* 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. */

/* 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. */

/* 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. */

@media (min-width: 992px) {
  

  

  

  

  

  

  

  

  /* 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. */
  

  

  /* 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. */
  

  

  

  

  

  
}

@media (max-width: 1550px) {

 
.tesae-footer__band{top: -3px}

}

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

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

  

  

  
  

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

  

  

  

  

  

  

  /* 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. */
  

  /* Laid out from the top rather than the foot, so each gap is the frame's own
     measurement instead of whatever is left over. */
  

  /* The frame insets the label 4px further than the panel it sits above. */
  

  /* 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. */
  

  /* 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. */
  

  

  

  

  /* 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). */
  

  

  /* The frame sets the count larger than the word beside it. */
  

  

  /* 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 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. */
  

  

  /* 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. */
  

  

  

  /* 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-industries__header{padding-inline: 0;
text-align: left;
align-items: flex-start}

  

  

  /* 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. */
  

  /* 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. */
  

  

  /* 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. */
  

  /* 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. */
  

  /* The title is the one piece that does sit on the photo, in white. */
  

  

  

  

  

  

  

  

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

  

  /* 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. */
  

  

  /* 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. */
  

  

  

  

  

  

  

  

  /* 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-form-section__inner{padding: clamp(32px, 3.4446vw - 2.136px, 64px) clamp(24px, 1.7223vw + 6.932px, 40px);
border-radius: 10px}

  .tesae-tx__title{max-width: none;
font-size: clamp(20px, 0.8611vw + 11.466px, 28px)}

  

  

  

  

  

  

  /* 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. */
  

  

  /* ------------------------------------------------------------------- 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. */
  

  

  

  

  /* 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. */
  

  /* 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. */
  
  
  

  

  

  

  

  

  

  

  

  /* 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-tx{padding: 88px 0 105px;
background: #f6f6f6}

  .tesae-tx__header{margin-bottom: 34px}

  .tesae-tx__grid{grid-template-columns: minmax(0, 1fr);
gap: 16px}

  /* 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{min-height: 155px}

  .tesae-tx__body{justify-content: center;
gap: clamp(12px, 0.4306vw + 7.733px, 16px);
padding: clamp(16px, 0.6611vw + 7.466px, 24px)}

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

  .tesae-tx__heading{gap: 4px}

  .tesae-tx__code{position: static;
display: block;
width: auto;
height: auto;
border-radius: 0;
background: none;
font-size: 32px;
font-weight: 800;
line-height: 1.2}

  .tesae-tx__title{font-size: 24px;
line-height: 1.26}

  .tesae-tx__text{margin-top: 0;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px)}

  /* 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: clamp(12px, 0.4306vw + 7.733px, 16px)}

  .tesae-tx__bullets li{padding-left: calc(clamp(16px, 0.6611vw + 7.466px, 24px) + clamp(12px, 0.4306vw + 7.733px, 16px));
line-height: 1.5}

  .tesae-tx__bullets li::before{top: 0.15em;
width: clamp(16px, 0.6611vw + 7.466px, 24px);
height: clamp(16px, 0.6611vw + 7.466px, 24px)}

  .tesae-tx__details{display: none;
padding-top: clamp(12px, 0.4306vw + 7.733px, 16px)}

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

  .tesae-mobile-card-toggle{position: relative;
display: block;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: 7px;
background: #000000}

  .tesae-mobile-card-toggle::before,
.tesae-mobile-card-toggle::after{content: '';
position: absolute;
left: 50%;
top: 50%;
width: clamp(12px, 0.4306vw + 7.733px, 16px);
height: 2px;
background: #ffffff;
transform: translate(-50%, -50%);
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

  .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: calc(clamp(30px, 1.3994vw + 18.132px, 40px) * 2.7556);
height: calc(clamp(30px, 1.3994vw + 18.132px, 40px) * 1.6667);
border-radius: 10px;
background: #ffffff}

  .tesae-tx__card .tesae-tx__toggle::before,
.tesae-tx__card .tesae-tx__toggle::after{width: clamp(16px, 0.6611vw + 7.466px, 24px);
background: currentColor}

  

  

  

  /* Height comes from the display word now, not a reserved strip. */
  

  /* 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. */
  

  

  

  

  /* Mobile inverts the highlight: a white chip with black type. */
  

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

  .tesae-industries{padding: 88px 0 64px}

  .tesae-industries__header{margin-bottom: 50px}

  .tesae-industries .tesae-showmore{margin-top: clamp(32px, 3.4446vw - 2.136px, 64px)}

  /* 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. */
display: grid;
grid-template-columns: 23px minmax(0, 1fr);
grid-template-areas: 'icon title'
      'text text'
      'cta  cta';
grid-template-rows: auto auto 1fr;
align-items: start;
column-gap: 15px;
row-gap: 0;
padding: 22px 20px
      18px;
min-height: 123px;
height: auto;
overflow: visible;
border-color: transparent;
background: transparent;
color: #000000;
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. */
  

  /* 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: 23px;
height: 23px;
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: 1.5}

  .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: 16ch;
margin: 0;
font-weight: 400;
line-height: 1.2}

  .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: clamp(50px, 0.8396vw + 41.68px, 57.8px);
height: clamp(49px, 0.8719vw + 40.36px, 57.1px);
border-radius: 10px}

	_.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: 24px}

  .tesae-industries__toggle::after{width: 21px}

  .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: 26.8px;
margin-right: 44px;
margin-bottom: 12px;
font-size: 14px;
line-height: 1.6}

  /* 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{color: #ffffff;
padding-bottom: 10.5px}

  .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: #ffffff}

  /* "Ενδιαφέρομαι" 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(18px - 20px);
gap: 8px;
padding: 0;
background: transparent;
color: #ffffff;
font-size: 16px;
font-weight: 700;
box-shadow: none;
transform: none}

     .tesae-industries__card .tesae-button--primary::before{content: '';
flex: 0 0 11px;
color: #000000;
font-size: clamp(16px, 0.6459vw + 9.600px, 22px);
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: 0;
text-align: left}

  .tesae-faq{padding: 20px 0 80px;
scroll-margin-top: 49px}

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

  .tesae-accordion__item,
.tesae-accordion__item:hover{height: 93px;
min-height: 93px;
border-bottom: 1px solid #000000;
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: 123px}

  .tesae-accordion__item:nth-child(4){height: 100px}

  .tesae-accordion__item.is-open,
.tesae-accordion__item.is-open:hover{height: 288px;
min-height: 288px;
margin-inline: calc(clamp(16px, 7.7503vw - 60.814px, 88px) * -1);
padding-inline: clamp(16px, 7.7503vw - 60.814px, 88px);
border-color: #000000;
border-radius: 0;
background: #000000;
margin-top: -1px}

  .tesae-accordion__trigger{min-height: 93px;
padding: clamp(16px, 0.6611vw + 7.466px, 24px) 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: 24px;
height: 24px;
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: 24px;
background: #cb1716}

  /* 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: 21px}

  /* 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: #ffffff}

  .tesae-accordion__answer{padding: 0 0 clamp(24px, 1.7223vw + 6.932px, 40px)}

  .tesae-faq .tesae-showmore{margin-top: 20.5px}

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

  .tesae-showmore .tesae-button--ghost{gap: 8px;
padding: 0;
border: 0;
font-size: clamp(16px, 0.2153vw + 13.866px, 18px);
font-weight: 800}

  .tesae-showmore .tesae-button--ghost::after{content: '';
width: 8px;
height: 8px;
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: #cb1716}

  

  .tesae-form-section{padding: 0 0 18px}

  .tesae-form-section .tesae-container{max-width: none;
padding-inline: 11.375px}

  .tesae-form-section__inner{display: block;
width: 100%;
min-height: 1043.5px;
padding: 77px 23.875px
      78px;
border-radius: 10px}

  .tesae-form-section__copy{margin-left: 2px;
gap: 22px}

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

  .tesae-form{margin-top: 30px}

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

  .tesae-form__grid > .tesae-form__field{height: 72px}

  .tesae-form__field--select::before{content: '';
position: absolute;
top: -1px;
right: 0px;
z-index: 2;
width: 17.8988px;
height: 14.6145px;
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: 167px;
transform: none}

  .tesae-form__field--full textarea.tesae-form__input{height: 130px}

  .tesae-form__footer{position: relative;
display: block;
height: 103px;
margin-top: 0}

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

  .tesae-form__consent{font-size: clamp(16px, 0.2153vw + 13.866px, 18px)}

  .tesae-form__footer .tesae-button{position: absolute;
top: 56px;
left: 50%;
transform: translateX(-50%)}

  .tesae-form__footer .tesae-button:hover,
.tesae-form__footer .tesae-button:focus-visible{transform: translateX(-50%) translateY(-2px)}

  

  

  /* 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. */
  

  
}
/* Mobile only: on desktop the hero title follows --tesae-fs-h1, which already
   scales with the window height (see "dynamic type" in variables.css). */

@media (max-width: 430px) {

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

}

@media (max-width: 390px) {

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

}

/*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}

	

	
}
@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}

	

	

	

	

	

	

	

	
}