/* ==========================================================================
   ATEX DIGITAL · components.css
   --------------------------------------------------------------------------
   Phase 2 note: every class in this file is page-agnostic. The 29 inner pages
   inherit it untouched. Do not add page-specific rules here.
   --------------------------------------------------------------------------
   01 · BUTTONS
   02 · TEXT LINKS
   03 · CARDS
   04 · CHIPS · TAGS · METER · AVATARS
   05 · TICK LISTS
   06 · FORM FIELDS
   07 · ACCORDION
   08 · MARQUEE
   09 · RAIL
   10 · TABS
   11 · SECTION HEAD
   12 · STAT BAND
   13 · PRICING CARDS
   14 · FAQ GRID
   15 · CLOSING CTA
   16 · TOUCH TARGETS
   ========================================================================== */


/* ===== 01 · BUTTONS =================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 48px;
  padding-inline: var(--s-6);
  padding-block: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.004em;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  transition:
    color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    box-shadow var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out),
    transform 90ms var(--e-snap);
}

.btn:active { transform: scale(.985); }

/* --- solid · the action --------------------------------------------- */
/* White on the magenta, not the deep ink. Worth recording the trade, because
   the numbers run against the intuition: white measures 3.77:1 on #FF0080 and
   --ink-950 measured 4.62:1, so this is the LOWER-contrast pair and sits under
   the 4.5 AA floor for text this size. It reads cleaner, which is the call
   that was made. To keep white AND clear AA, deepen the fill on this component
   to #E00071 — visually the same pink, white lands at 4.76:1. */
.btn--solid {
  background: var(--signal);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 6px rgba(var(--shade), .42),
    0 14px 30px -12px rgba(255, 0, 128, .34);
}

/* wipe, not a colour swap */
.btn--solid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal-hi);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-2) var(--e-out);
}

.btn--solid:hover::before,
.btn--solid:focus-visible::before { transform: scaleX(1); }

/* --- ghost ----------------------------------------------------------- */
.btn--ghost {
  border: 1px solid var(--line);
  color: var(--bone);
  background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--line-hi);
  box-shadow: inset 0 0 0 1px rgba(191, 255, 0, .16);
  background: var(--ink-800);
}

/* --- quiet ----------------------------------------------------------- */
.btn--quiet {
  min-block-size: 0;
  padding: 0;
  color: var(--bone-dim);
  font-weight: 500;
  overflow: visible;
}

.btn--quiet:hover { color: var(--bone); }

/* --- sizes ----------------------------------------------------------- */
.btn--sm {
  min-block-size: 40px;
  padding-inline: var(--s-5);
  font-size: var(--t-micro);
}

.btn--block {
  display: flex;
  inline-size: 100%;
}


/* ===== 02 · TEXT LINKS ================================================ */

.link-u {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--bone-dim);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-block-end: 2px;
  transition:
    background-size var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}

.link-u svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  transition: transform var(--d-2) var(--e-out);
}

.link-u:hover,
.link-u:focus-visible {
  color: var(--bone);
  background-size: 100% 1px;
}

.link-u:hover svg { transform: translateX(3px); }


/* ===== 03 · CARDS ===================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%),
    var(--ink-800);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 2px 6px rgba(var(--shade), .42),
    0 18px 44px -14px rgba(var(--shade), .66);
  overflow: hidden;
  transition:
    transform var(--d-3) var(--e-out),
    border-color var(--d-3) var(--e-out),
    box-shadow var(--d-3) var(--e-out);
}

.card:hover,
.card:focus-within {
  transform: translateY(-3px);
  border-color: var(--line-hi);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .085),
    0 4px 10px rgba(var(--shade), .46),
    0 28px 64px -18px rgba(var(--shade), .72);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-700);
  flex: none;
}

.card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--d-3) var(--e-out);
}

.card:hover .card__media img { transform: scale(1.045); }

/* image cards sit in a well · the vignette stops the photo floating */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--shade), .6));
  pointer-events: none;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  flex: 1 1 auto;
}

.card__ic {
  inline-size: 26px;
  block-size: 26px;
  color: var(--bone-2);
  margin-block-end: var(--s-2);
  transition: color var(--d-3) var(--e-out);
}

.card:hover .card__ic { color: var(--azure); }

.card__title { color: var(--bone); }

.card__copy {
  font-size: var(--t-sm);
  color: var(--bone-dim);
  max-inline-size: 46ch;
}

.card__foot { margin-block-start: auto; padding-block-start: var(--s-4); }

/* --- feature ---------------------------------------------------------- */
.card--feature .card__body { gap: var(--s-4); }

/* --- story ------------------------------------------------------------ */
.card--story .card__media { aspect-ratio: 4 / 3; }

/* --- quote ------------------------------------------------------------ */
.card--quote {
  padding: var(--s-6);
  gap: var(--s-5);
  border-radius: var(--r-md);
}

.card--quote blockquote {
  font-size: var(--t-sm);
  color: var(--bone-2);
  text-wrap: pretty;
}

/* --- price ------------------------------------------------------------ */
.card--price {
  padding: var(--s-6) var(--s-5);
  gap: var(--s-3);
  border-radius: var(--r-lg);
}


/* ===== 04 · CHIPS · TAGS · METER · AVATARS ============================ */

.chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 38px;
  padding-inline: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--ink-850);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--bone-dim);
  white-space: nowrap;
  transition:
    color var(--d-2) var(--e-out),
    border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

.chip:hover { color: var(--bone); border-color: var(--line-hi); }

.chip.is-active {
  color: var(--azure);
  border-color: var(--line-brand);
  background: var(--azure-wash);
}

.tag {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--bone-dim);
}

/* the VU indicator · live / active / earning only */
.meter {
  inline-size: 6px;
  block-size: 6px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal-glow);
  animation: meter-pulse 2.4s ease-in-out infinite;
}

@keyframes meter-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .32; }
}

.avatar {
  border-radius: var(--r-pill);
  background: var(--ink-700);
  object-fit: cover;
  flex: none;
}

.avatar-stack {
  display: flex;
  align-items: center;
  flex: none;
}

.avatar-stack .avatar {
  inline-size: 40px;
  block-size: 40px;
  box-shadow: 0 0 0 2px var(--ink-900);
}

.avatar-stack .avatar + .avatar { margin-inline-start: -12px; }


/* ===== 05 · TICK LISTS ================================================ */

.ticklist {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.ticklist__item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--s-4);
  align-items: start;
  font-size: var(--t-sm);
  color: var(--bone-dim);
}

.ticklist__item svg {
  inline-size: 20px;
  block-size: 20px;
  color: var(--azure);
  margin-block-start: 2px;
}

.ticklist__item strong {
  display: block;
  color: var(--bone);
  font-weight: 700;
}


/* ===== 06 · FORM FIELDS =============================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.field__input {
  inline-size: 100%;
  min-block-size: 52px;
  padding-inline: var(--s-5);
  padding-block: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-800);
  color: var(--bone);
  font-size: var(--t-sm);
  transition:
    border-color var(--d-2) var(--e-out),
    background-color var(--d-2) var(--e-out);
}

.field__input::placeholder { color: var(--bone-dim); }

.field__input:hover { border-color: var(--line-hi); }

.field__input:focus {
  outline: none;
  border-color: var(--line-brand);
  background: var(--ink-700);
}

.field__input:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
}

/* inline submit lives inside the field */
.field--inline { position: relative; }

.field--inline .field__input { padding-inline-end: 56px; }

.field__submit {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  background: var(--ink-700);
  color: var(--bone-2);
  transition:
    background-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out);
}

.field__submit svg { inline-size: 18px; block-size: 18px; }

.field__submit:hover { background: var(--azure); color: var(--ink-950); }

.field__msg {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-micro);
  min-block-size: 20px;
  color: var(--bone-dim);
}

.field__msg svg { inline-size: 16px; block-size: 16px; flex: none; }

.field__msg.is-warn { color: var(--warn); }
.field__msg.is-ok   { color: var(--ok); }


/* ===== 07 · ACCORDION ================================================= */

.acc { display: flex; flex-direction: column; }

.acc__item { border-block-end: 1px solid var(--line); }

.acc__item:first-child { border-block-start: 1px solid var(--line); }

.acc__item:hover { border-color: var(--line-hi); }

.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  text-align: start;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--bone);
  transition: color var(--d-2) var(--e-out);
}

.acc__btn:hover { color: var(--azure-soft); }

.acc__ic {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--bone-dim);
  transition:
    transform var(--d-3) var(--e-in-out),
    color var(--d-3) var(--e-out);
}

.acc__btn[aria-expanded="true"] .acc__ic {
  transform: rotate(45deg);
  color: var(--azure);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-3) var(--e-in-out);
}

.acc__panel.is-open { grid-template-rows: 1fr; }

.acc__inner {
  overflow: hidden;
  min-block-size: 0;
}

.acc__inner > * {
  font-size: var(--t-sm);
  color: var(--bone-dim);
  max-inline-size: 62ch;
  padding-block-end: var(--s-5);
}


/* ===== 08 · MARQUEE =================================================== */

.marquee {
  --mq-gap: var(--s-8);
  --mq-dur: 42s;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  inline-size: max-content;
  will-change: transform;
  animation: mq-left var(--mq-dur) linear infinite;
}

.marquee__track--rev { animation-name: mq-right; }

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__item { flex: none; }

@keyframes mq-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - (var(--mq-gap) / 2)), 0, 0); }
}

@keyframes mq-right {
  from { transform: translate3d(calc(-50% - (var(--mq-gap) / 2)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}


/* ===== 09 · RAIL ====================================================== */

.rail { display: flex; flex-direction: column; gap: var(--s-3); }

.rail__viewport {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  /* Room for the card shadows. overflow-x:auto computes overflow-y to auto
     too, so vertical shadow would otherwise be clipped.
     Horizontal padding is deliberately NOT used here: scroll-snap latches the
     first card onto it, the rail can never rest at scrollLeft 0, and the Prev
     button would stay enabled at the start. */
  padding-block: var(--s-2) var(--s-5);
  margin-block-start: calc(-1 * var(--s-2));
}

.rail__viewport::-webkit-scrollbar { display: none; }

.rail__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.rail__viewport.is-dragging * { user-select: none; }

.rail__viewport > * {
  flex: none;
  inline-size: min(86vw, 420px);
  scroll-snap-align: start;
}

.rail__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.rail__btn {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--bone-2);
  transition:
    border-color var(--d-2) var(--e-out),
    color var(--d-2) var(--e-out),
    opacity var(--d-2) var(--e-out);
}

.rail__btn svg { inline-size: 20px; block-size: 20px; }

.rail__btn:hover:not(:disabled) { border-color: var(--line-hi); color: var(--bone); }

.rail__btn:disabled { opacity: .3; cursor: not-allowed; }

.rail__prog {
  position: relative;
  block-size: 2px;
  background: var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.rail__thumb {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 20%;
  background: var(--azure);
  border-radius: var(--r-pill);
  transform-origin: left center;
}


/* ===== 10 · TABS ====================================================== */

.tabs { display: flex; flex-direction: column; gap: var(--s-6); }

.tabs__list {
  position: relative;
  display: flex;
  gap: var(--s-6);
  border-block-end: 1px solid var(--line);
}

.tabs__tab {
  position: relative;
  padding-block: var(--s-3) var(--s-4);
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -.016em;
  color: var(--bone-dim);
  transition: color var(--d-2) var(--e-out);
}

.tabs__tab:hover { color: var(--bone-2); }

.tabs__tab[aria-selected="true"] { color: var(--bone); }

.tabs__ink {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 0;
  background: var(--azure);
  transition:
    transform var(--d-2) var(--e-out),
    width var(--d-2) var(--e-out);
  pointer-events: none;
}

.tabs__panels {
  position: relative;
  transition: block-size var(--d-2) var(--e-in-out);
  overflow: hidden;
}

.tabs__panel {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--d-2) var(--e-out),
    transform var(--d-2) var(--e-out);
}

.tabs__panel[hidden] { display: none; }

.tabs__panel.is-active { opacity: 1; transform: none; }


/* ===== 11 · SHARED SECTION HEAD ======================================= */

.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-block-end: clamp(var(--s-6), 3vw, var(--s-7));
}

/* the eyebrow carries its own bottom margin; .sec-head already supplies the gap */
.sec-head .eyebrow { margin-block-end: 0; }


/* ===== 12 · STAT BAND ================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.stat {
  padding-block: clamp(var(--s-6), 4vw, var(--s-8));
  padding-inline: var(--s-4);
  text-align: center;
}

.stat:nth-child(odd)   { border-inline-end: 1px solid var(--line); }
.stat:nth-child(-n+2)  { border-block-end: 1px solid var(--line); }

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat:nth-child(odd)  { border-inline-end: 0; }
  .stat:nth-child(-n+2) { border-block-end: 0; }
  .stat:not(:last-child) { border-inline-end: 1px solid var(--line); }
}

.stat__n {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--azure);
  font-variant-numeric: tabular-nums;
}

.stat__l {
  display: block;
  margin-block-start: var(--s-3);
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--bone-dim);
}


/* ===== 13 · PRICING TEASER ============================================ */

.pricing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}

@media (min-width: 768px) {
  .pricing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__grid > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 1080px) {
  .pricing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing__grid > :last-child { grid-column: auto; }
  /* raised by margin, not transform: the card also carries .reveal, and a
     transform there would be overridden the moment it reveals */
  .price--feature { margin-block-start: -22px; margin-block-end: -10px; }
}

/* The recommended plan has to win on more than a border: a warmer ground,
   a full-strength edge, a bigger figure and a deeper lift. */
.price--feature {
  border-color: var(--signal);
  background:
    linear-gradient(180deg, var(--signal-wash), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 42%),
    var(--ink-800);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 2px 6px rgba(var(--shade), .42),
    0 34px 76px -20px rgba(var(--shade), .82),
    0 0 72px -18px var(--signal-glow);
}

.price--feature .price__fig b { font-size: calc(var(--t-stat) * 1.14); }

.price--feature .card__title { color: var(--bone); }

.price--feature .price__list li::before { background: var(--signal); opacity: .65; }

.price__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--signal);
  border: 1px solid var(--signal);
  font-size: var(--t-micro);
  font-weight: 700;
  color: #fff;
}

.price__pill .meter { background: #fff; box-shadow: none; }

.price__fig {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.price__fig b {
  font-family: var(--f-display);
  font-size: var(--t-stat);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--azure);
  font-variant-numeric: tabular-nums;
}

.price__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-block-start: var(--s-2);
}

.price__list li {
  position: relative;
  padding-inline-start: var(--s-5);
  font-size: var(--t-sm);
  color: var(--bone-dim);
}

.price__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .7em;
  inline-size: 8px;
  block-size: 1px;
  background: var(--line-hi);
}

.pricing__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
}

.pricing__foot p {
  font-size: var(--t-sm);
  color: var(--bone-2);
  margin-inline-end: auto;
}


/* ===== 14 · FAQ ======================================================= */

.faq__grid {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-8));
}

@media (min-width: 1080px) {
  .faq__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
  }
  .faq__head {
    grid-column: 1 / 6;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--hdr-h-stuck) + var(--announce-h) + var(--s-7));
  }
  .faq__list { grid-column: 6 / 13; }
}


/* ===== 15 · CLOSING CTA =============================================== */

.cta {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: .42;
}

/* ink-900 fades in from both edges so the texture never fights the type */
.cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--ink-900) 0%,
    transparent 34%,
    transparent 66%,
    var(--ink-900) 100%
  );
}

.cta { --section-y: clamp(48px, 5vw, 80px); }

.cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

/* THE SEAM · 2 of 3. The block is centred; the seam is not — it still runs
   in from the left viewport edge, which is what makes it the same motif. */
.cta .seam { align-self: flex-start; }

.cta h2 {
  font-size: var(--t-h1);
  letter-spacing: -.032em;
  line-height: .95;
}

.cta__sub {
  font-size: var(--t-lead);
  color: var(--bone-dim);
  max-inline-size: 46ch;
}

.cta__mail {
  font-size: var(--t-micro);
  color: var(--bone-dim);
  transition: color var(--d-2) var(--e-out);
}

.cta__mail:hover { color: var(--bone-2); }


/* ===== 16 · TOUCH TARGETS ============================================= */
/* Hit areas reach 44px on coarse pointers only, so desktop typography stays
   tight. Inline links inside a sentence are left alone — expanding those
   would break the line box they sit in. */

@media (pointer: coarse) {

  .link-u { min-block-size: 44px; }

  .chip { min-block-size: 44px; }

  /* the field grows so a 44px control still clears its 6px inset */
  .field--inline .field__input {
    min-block-size: 56px;
    padding-inline-end: 60px;
  }

  .field__submit {
    inline-size: 44px;
    block-size: 44px;
  }

  .cta__mail {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}