/* 各段落版面。斷點：640（手機→平板）、1180（平板→桌機） */

/* ---------- 導覽：一條平的列，字標＋四個連結＋一個動作 ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: max(18px, env(safe-area-inset-top, 0px));
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--step-small);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.3em;
}

.nav__links a:hover,
.nav__links a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--step-body);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (max-width: 899px) {
  .nav__toggle {
    display: inline-flex;
    align-items: center;
  }

  .nav {
    position: relative;
    flex-wrap: wrap;
  }

  .js .nav__links {
    display: none;
  }

  .js .nav[data-open="true"] .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 0;
    padding: 8px 20px 16px;
    background: var(--surface);
    box-shadow: 0 16px 32px rgb(0 0 0 / 0.25); /* taste-skill-ignore：展開的選單浮在內容上 */
  }

  .js .nav[data-open="true"] .nav__links a {
    min-height: 52px;
    font-size: var(--step-body);
  }

  html:not(.js) .nav__links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-left: 0;
  }
}

/* ---------- 首頁：句子被畫面分開，畫面隨捲動往下走 ---------- */
.hero {
  --steps: 4;
  --step-scroll: 33svh;
  --fw: min(35vw, 620px);
  --fh: calc(var(--fw) * 9 / 16);
  --gap: 24px;
  --sliver: 60px;
  --wh: calc(var(--fh) + 2 * (var(--gap) + var(--sliver)));
  position: relative;
  height: calc(100svh + (var(--steps) - 1) * var(--step-scroll));
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: clip;
  padding-inline: max(var(--margin), env(safe-area-inset-left, 0px)) max(var(--margin), env(safe-area-inset-right, 0px));
}

.hero__title {
  font-size: var(--step-head);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__half {
  display: block;
  white-space: nowrap;
}

.reel {
  height: var(--wh);
  overflow: clip;
  pointer-events: none;
}

.reel__track {
  display: grid;
  gap: var(--gap);
  transform: translateY(calc(var(--gap) + var(--sliver) - var(--step, 0) * (var(--fh) + var(--gap))));
  transition: transform 700ms var(--ease-in-out);
}

/* 每一格是一塊螢幕：深色外框裡放白色的介面，在淺灰底上一眼就看得到 */
.reel__frame {
  height: var(--fh);
  padding: clamp(6px, 0.7vw, 10px);
  border-radius: 16px;
  background: #1d1d1f;
  color: #1d1d1f;
  transition: opacity 500ms ease;
}

.reel__frame > div {
  height: 100%;
  border-radius: 9px;
  background: #ffffff;
  overflow: hidden;
}

.reel__frame > .ui-chat {
  background: #e9eef3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .reel__frame {
    background: #3a3a3c;
  }
}

:root[data-theme="dark"] .reel__frame {
  background: #3a3a3c;
}

.js .reel__frame:not(.is-current) {
  opacity: 0.7;
}

.hero__caption {
  display: grid;
  gap: 4px;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--soft);
}

.hero__caption [data-reel-caption] {
  color: var(--ink);
  font-size: var(--step-body);
}

.hero__lead {
  max-width: 30em;
  font-size: var(--step-body);
  line-height: 1.6;
}

/* 桌機：句子的前半在左上、後半在右下，畫面在中間；說明與步驟放在畫面左側 */
@media (min-width: 1180px) {
  .hero {
    --disp: min(var(--step-display), 11svh);
    --gap: 14px;
    --sliver: 36px;
    --top: calc(84px + var(--disp) * 1.08 + 12px);
    --fh: clamp(220px, calc(100svh - 84px - var(--disp) * 2.16 - 56px - 2 * (var(--gap) + var(--sliver)) - 24px), 480px);
    --fw: calc(var(--fh) * 16 / 9);
    --side: calc((100vw - var(--fw)) / 2 - var(--margin) - 40px);
  }

  .hero__stage .nav {
    position: absolute;
    top: 0;
    left: var(--margin);
    right: var(--margin);
  }

  .hero__title {
    position: absolute;
    top: 84px;
    bottom: 28px;
    left: var(--margin);
    right: var(--margin);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: var(--disp);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
  }

  .hero__half--b {
    align-self: flex-end;
  }

  .reel {
    position: absolute;
    top: var(--top);
    left: 50%;
    width: var(--fw);
    transform: translateX(-50%);
  }

  /* 說明在畫面左側、步驟在右側，兩邊都對齊畫面的垂直中線 */
  .hero__lead {
    position: absolute;
    top: calc(var(--top) + var(--wh) / 2);
    left: var(--margin);
    width: var(--side);
    max-width: 22em;
    transform: translateY(-50%);
  }

  .hero__caption {
    position: absolute;
    top: calc(var(--top) + var(--wh) / 2);
    right: var(--margin);
    width: var(--side);
    max-width: 22em;
    transform: translateY(-50%);
  }
}

@media (max-width: 1179px) {
  .hero {
    --fw: 100%;
    --fh: min(calc((100vw - 2 * var(--margin)) * 3 / 4), 34svh);
    --gap: 12px;
    --sliver: 28px;
  }

  .hero__stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero__title {
    margin-top: auto;
    font-size: var(--step-display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }

  .hero__half--b {
    text-align: right;
  }

  .reel {
    width: 100%;
  }

  .hero__lead {
    margin-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    font-size: var(--step-body);
  }

  .hero__caption [data-reel-caption] {
    font-size: var(--step-body);
  }
}

/* 太矮的畫面（手機橫放）：不黏住，只顯示第一格 */
@media (max-height: 599px) {
  .hero {
    height: auto;
  }

  .hero__stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding-bottom: 48px;
  }

  .hero__half,
  .reel,
  .hero__caption,
  .hero__lead,
  .hero__stage .nav {
    position: static;
    transform: none;
    width: auto;
  }

  .hero {
    --fw: min(calc(100vw - 2 * var(--margin)), 560px);
    --fh: calc(var(--fw) * 9 / 16);
    --sliver: 0px;
    --gap: 0px;
  }

  .hero__stage {
    display: grid;
    gap: 16px;
  }

  .hero__title {
    display: block;
  }

  .hero__half {
    display: inline;
  }

  .reel {
    width: min(100%, 560px);
  }

  .reel__track {
    transform: none;
  }

  .reel__frame:not(:first-child) {
    display: none;
  }

  .js .reel__frame:not(.is-current) {
    opacity: 1;
  }

  .hero__caption {
    display: none;
  }
}

html:not(.js) .hero {
  height: auto;
}

html:not(.js) .hero__stage {
  position: relative;
}

html:not(.js) .reel__frame:not(:first-child) {
  visibility: hidden;
}

/* 首頁畫面裡的介面片段（示意） */
.ui-chat,
.ui-draft,
.ui-confirm,
.ui-slip {
  height: 100%;
  padding: clamp(14px, 1.6vw, 24px);
  font-family: var(--font);
}

.ui-chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #e9eef3;
}

.ui-chat__head {
  font-size: 14px;
  font-weight: 600;
  color: #33404d;
}

.ui-chat__bubble {
  align-self: center;
  justify-self: start;
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 16px 16px 16px 4px;
  background: #ffffff;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.5;
}

.ui-chat__time {
  font-size: 13px;
  color: #5d6873;
}

.ui-draft__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #5a5254;
}

.ui-table {
  width: 100%;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.35;
}

.ui-table th {
  padding: 6px 8px 6px 0;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: #5a5254;
  border-bottom: 1px solid #ddd6d6;
}

.ui-table td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid #eee8e8;
  vertical-align: top;
}

.ui-table td:nth-child(2) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ui-flag {
  font-size: 0.92em;
  color: #2c6b3c;
}

.ui-flag--warn {
  color: #8a5a00;
  font-weight: 500;
}

.ui-flag--miss {
  color: #b0001a;
  font-weight: 600;
}

.ui-confirm {
  display: grid;
  align-content: center;
  gap: 8px;
}

.ui-confirm__head {
  font-size: 13px;
  font-weight: 600;
  color: #5a5254;
}

.ui-confirm__store {
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 600;
}

.ui-confirm__note {
  font-size: 14px;
  color: #8a5a00;
}

.ui-confirm__button {
  justify-self: start;
  margin-top: 8px;
  padding: 10px 20px;
  background: #0071e3;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.ui-slip {
  display: grid;
  align-content: start;
  gap: 10px;
  background: #fffdfd;
}

.ui-slip__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 2px solid #1d1d1f;
  color: #1d1d1f;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ui-slip__rows div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px dashed #d2d2d7; /* taste-skill-ignore：示意銷貨單（data-ui）內的表格線 */
  font-size: clamp(13px, 1vw, 15px);
}

.ui-slip__rows dd {
  font-variant-numeric: tabular-nums;
}

.ui-slip__done {
  font-size: 14px;
  font-weight: 600;
  color: #2c6b3c;
}

/* ---------- 運作方式：四段長條＋試試看 ---------- */
.how {
  padding-block: var(--section);
}

.how__title {
  margin-bottom: 64px;
}

.bar {
  display: flex;
  gap: 6px;
}

.bar__seg {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}

.bar__who {
  display: block;
  min-height: max(160px, 22vh);
  padding: 20px;
  font-size: var(--step-statement);
  font-weight: 600;
  line-height: 1.2;
}

.bar__what {
  display: block;
  max-width: 22ch;
  margin-top: 14px;
  font-size: var(--step-body);
  line-height: 1.5;
  color: var(--soft);
}

.bar__seg--store .bar__who {
  background: var(--blue);
  color: #fff;
}

.bar__seg--ai .bar__who {
  background: #f5f5f7;
  color: #1d1d1f;
}

.bar__seg--staff .bar__who {
  background: #ffffff;
  color: #1d1d1f;
}

.bar__seg--erp .bar__who {
  background: #424245;
  color: #f5f5f7;
}

@media (max-width: 639px) {
  .bar {
    flex-direction: column;
  }

  .bar__who {
    min-height: 88px;
    font-size: var(--step-statement);
    padding: 16px;
  }

  .bar__what {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: var(--step-body);
    max-width: none;
  }
}

.try {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px var(--gutter);
  margin-top: 120px;
}

.try__input {
  grid-column: 1 / span 5;
  display: grid;
  align-content: start;
  gap: 14px;
}

.try__title {
  font-size: var(--step-statement);
  line-height: 1.3;
}

.try__text {
  width: 100%;
  min-height: 132px;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step-body);
  line-height: 1.55;
  resize: vertical;
}

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

.try__help {
  font-size: var(--step-small);
  color: var(--soft);
}

.try__output {
  grid-column: 7 / -1;
  align-self: start;
  padding: clamp(16px, 2vw, 28px);
  border-radius: var(--radius);
  background: #ffffff;
  color: #1c1617;
}

.try__output .ui-table {
  font-size: 16px;
}

.try__output .ui-table th {
  font-size: 13px;
}

.ui-draft__sum {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: #1c1617;
}

.try__note {
  grid-column: 7 / -1;
  font-size: var(--step-small);
  color: var(--soft);
  max-width: 44em;
}

@media (max-width: 1023px) {
  .try__input,
  .try__output,
  .try__note {
    grid-column: 1 / -1;
  }

  .try {
    margin-top: 88px;
  }
}

/* ---------- 合作流程：表格推到右邊 ---------- */
.process {
  padding-block: var(--section);
}

.steps {
  width: 100%;
  font-size: var(--step-body);
  line-height: 1.55;
}

.steps thead th {
  padding: 0 16px 14px 0;
  font-size: var(--step-small);
  font-weight: 500;
  text-align: left;
  color: var(--soft);
}

.steps tbody th {
  padding: 13px 16px 13px 0;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
}

.steps td {
  padding: 13px 16px 13px 0;
  vertical-align: top;
}

.steps td:last-child {
  color: var(--soft);
}

.steps__group th,
.steps__group td {
  padding-top: 44px;
}

@media (max-width: 767px) {
  .steps thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .steps,
  .steps tbody,
  .steps tr,
  .steps th,
  .steps td {
    display: block;
  }

  .steps tr {
    padding: 18px 0;
  }

  .steps tbody th {
    padding: 0 0 6px;
    font-size: var(--step-body);
  }

  .steps td {
    padding: 2px 0;
  }

  .steps td::before {
    display: block;
    font-size: var(--step-small);
    color: var(--soft);
  }

  .steps td:nth-of-type(1)::before {
    content: "我們做什麼";
  }

  .steps td:nth-of-type(2)::before {
    content: "你會拿到";
    margin-top: 8px;
  }

  .steps td:nth-of-type(3)::before {
    content: "需要你提供";
    margin-top: 8px;
  }

  .steps__group th,
  .steps__group td {
    padding-top: 0;
  }

  .steps__group {
    margin-top: 24px;
  }
}

/* ---------- 收費：句子裡的金額是試算結果 ---------- */
.pricing {
  min-height: 80svh;
  padding-block: var(--section);
}

.pricing__sentence {
  max-width: 100%;
}

.pricing__figure {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0 0.15em;
  background: var(--accent);
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px var(--gutter);
  margin-top: 64px;
}

.calc__intro {
  grid-column: 1 / span 6;
  font-size: var(--step-body);
  line-height: 1.55;
}

.calc__fields {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px var(--gutter);
}

.calc__fields input {
  font-variant-numeric: tabular-nums;
}

.calc__sub {
  grid-column: 1 / span 8;
  max-width: 30em;
  display: block;
  color: var(--soft);
}

.fees {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px var(--gutter);
  margin-top: 112px;
  align-items: end;
}

.fees__title {
  grid-column: 1 / -1;
  font-size: var(--step-statement);
  line-height: 1.3;
}


.fees .button {
  grid-column: 10 / -1;
  justify-self: end;
}

@media (max-width: 899px) {
  .calc__intro,
  .calc__fields,
  .calc__sub,
  .fees .button {
    grid-column: 1 / -1;
  }

  .fees .button {
    justify-self: stretch;
  }
}

@media (max-width: 639px) {
  .calc__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .calc__intro {
    font-size: var(--step-body);
  }
}

/* ---------- 常見問題：寬標題、縮排的問題 ---------- */
.faq {
  padding-block: var(--section) 48px;
}

.faq__list {
  display: grid;
  gap: 12px;
  margin-top: 80px;
  margin-left: calc((100% + var(--gutter)) / 3);
}

.faq details {
  margin-inline: -24px;
  padding: 0 24px;
  transition: background-color var(--t-ui) ease;
}

.faq details[open] {
  background: var(--surface);
  padding-bottom: 24px;
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px 48px 12px 0;
  font-size: var(--step-statement);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-ui) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq details p {
  max-width: 48ch;
  font-size: var(--step-body);
  line-height: 1.75;
}

@media (max-width: 899px) {
  .faq__list {
    margin-left: 0;
    margin-top: 56px;
  }

  .faq details {
    margin-inline: calc(-1 * var(--margin));
    padding-inline: var(--margin);
  }
}

/* ---------- 預約健檢 ---------- */
.contact {
  padding-block: 72px var(--section);
}

.contact__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gutter);
  align-items: start;
}

.contact__sentence {
  grid-column: 1 / span 5;
  font-size: var(--step-statement);
  font-weight: 600;
  line-height: 1.3;
}

.contact__picture {
  grid-column: 8 / span 2;
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1;
  object-fit: cover;
}

.contact__direct {
  grid-column: 10 / -1;
  display: grid;
  gap: 8px;
  font-size: var(--step-body);
}

.contact__ask {
  font-weight: 600;
}

.contact__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.contact__small {
  font-size: var(--step-small);
  color: var(--soft);
}

.contact__form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gutter);
  margin-top: 112px;
}

.contact__intro {
  grid-column: 1 / span 4;
  max-width: 22em;
  color: var(--soft);
}

.form {
  grid-column: 5 / -1;
  display: grid;
  gap: 40px;
}

.form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px var(--gutter);
  min-width: 0;
  border: 0;
}

.form legend {
  grid-column: 1 / -1;
  margin-bottom: 20px;
  padding: 0;
  font-size: var(--step-statement);
  font-weight: 600;
  line-height: 1.3;
}

.form fieldset .field:has(textarea),
.form fieldset .field:has(#f-erp) {
  grid-column: 1 / -1;
}

.form__privacy {
  font-size: var(--step-small);
  color: var(--soft);
}

.form__result {
  display: grid;
  gap: 16px;
  padding: 28px;
  background: var(--surface);
}

.form__result:focus-visible {
  outline-offset: 4px;
}

.form__result-title {
  font-size: var(--step-statement);
  font-weight: 600;
}

.form__summary {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1023px) {
  .contact__sentence {
    grid-column: 1 / -1;
  }

  .contact__picture {
    grid-column: 1 / span 3;
    max-width: 140px;
  }

  .contact__direct {
    grid-column: 4 / -1;
  }

  .contact__intro,
  .form {
    grid-column: 1 / -1;
  }

  .contact__form-grid {
    margin-top: 80px;
  }
}

@media (max-width: 639px) {
  .contact__picture {
    grid-column: 1 / span 4;
    max-width: 96px;
  }

  .contact__direct {
    grid-column: 5 / -1;
    font-size: var(--step-body);
  }

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

/* ---------- 頁尾：邀請＋被裁切的大字 ---------- */
.footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--section);
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--gutter);
}

.footer__invite {
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: 36px;
}

.footer__nav {
  grid-column: 10 / -1;
  display: grid;
  align-content: start;
  gap: 4px;
}

.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: var(--step-body);
  text-decoration: none;
}

.footer__nav a:hover {
  text-decoration: underline;
}

.footer__legal {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px var(--gutter);
  margin-top: 120px;
  font-size: var(--step-small);
  color: var(--soft);
}

.footer__legal p:first-child {
  grid-column: 1 / span 5;
}

.footer__legal .credits {
  grid-column: 7 / -1;
  max-width: 46em;
}

.footer__legal a {
  color: var(--ink);
}

.footer__mark {
  margin: 48px 0 0;
  padding: 0 max(var(--margin), env(safe-area-inset-left, 0px)) clamp(24px, 3vw, 48px);
  font-size: 14.5vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--ink);
}

@media (max-width: 899px) {
  .footer__invite,
  .footer__nav,
  .footer__legal p:first-child,
  .footer__legal .credits {
    grid-column: 1 / -1;
  }

  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
  }

  .footer__invite .button {
    width: 100%;
  }

  .footer__mark {
    font-size: 15vw;
  }
}