/* bottom.css: FAQ, form, footer. Every selector must sit under the root class .s-bottom. */

/* 0. Section tokens --------------------------------------------------------------
 * --bottom-card-ease: the FAQ card height follows its own overdamped spring
 * (stiffness 550, damping 65, mass 1; roots -10/s and -55/s), measured on the original.
 * It lags behind the item heights (spring C), as the original card does.
 * --bottom-faq-c: spring C for the toggled item's visible height (the bottom clip in bottom.js).
 * Both end where the original layout animation stops: Framer animates 0 to 1000 and stops once
 * the rest is 0.5 or less, then shows the end (card 780ms, spring C 500ms after the start).
 * Sampled every 5ms, last point 1. The plus turn and answer fade keep the shared --spring-c.
 * bottom.js plays these motions with element.animate(); CSS has no height transition,
 * because a CSS transition would override the script animation in the cascade.
 */
.s-bottom {
  --bottom-card-ease: linear(0, 0.00618, 0.022299, 0.045409, 0.0733, 0.104319, 0.137233, 0.171131, 0.205343, 0.23938, 0.272891, 0.30563, 0.337426, 0.36817, 0.397791, 0.426255, 0.453548, 0.479676, 0.504656, 0.528512, 0.551278, 0.572988, 0.593682, 0.613397, 0.632176, 0.650057, 0.66708, 0.683283, 0.698704, 0.713379, 0.727343, 0.74063, 0.753271, 0.765298, 0.776739, 0.787624, 0.797979, 0.80783, 0.8172, 0.826114, 0.834594, 0.84266, 0.850333, 0.857632, 0.864575, 0.87118, 0.877462, 0.883438, 0.889123, 0.89453, 0.899674, 0.904567, 0.909221, 0.913649, 0.91786, 0.921866, 0.925677, 0.929301, 0.932749, 0.936029, 0.939149, 0.942117, 0.94494, 0.947625, 0.95018, 0.952609, 0.954921, 0.957119, 0.95921, 0.9612, 0.963092, 0.964892, 0.966604, 0.968233, 0.969782, 0.971256, 0.972658, 0.973991, 0.97526, 0.976466, 0.977614, 0.978706, 0.979745, 0.980732, 0.981672, 0.982566, 0.983416, 0.984225, 0.984994, 0.985726, 0.986422, 0.987085, 0.987714, 0.988314, 0.988884, 0.989426, 0.989941, 0.990432, 0.990899, 0.991343, 0.991765, 0.992166, 0.992548, 0.992912, 0.993258, 0.993586, 0.993899, 0.994197, 0.99448, 0.994749, 0.995005, 0.995249, 0.99548, 0.995701, 0.99591, 0.99611, 0.9963, 0.99648, 0.996652, 0.996815, 0.99697, 0.997118, 0.997259, 0.997392, 0.99752, 0.997641, 0.997756, 0.997865, 0.997969, 0.998068, 0.998162, 0.998252, 0.998337, 0.998418, 0.998496, 0.998569, 0.998639, 0.998705, 0.998768, 0.998828, 0.998885, 0.99894, 0.998992, 0.999041, 0.999088, 0.999132, 0.999174, 0.999215, 0.999253, 0.999289, 0.999324, 0.999357, 0.999388, 0.999418, 0.999447, 0.999474, 1);
  --bottom-card-ms: 780ms;
  --bottom-faq-c: linear(0, 0.004679, 0.017523, 0.036936, 0.061552, 0.090204, 0.121901, 0.155805, 0.191208, 0.227518, 0.264241, 0.300971, 0.337373, 0.373177, 0.408167, 0.442175, 0.475069, 0.506754, 0.537163, 0.566251, 0.593994, 0.620385, 0.64543, 0.669146, 0.691559, 0.712703, 0.732615, 0.75134, 0.768922, 0.785409, 0.800852, 0.815298, 0.828799, 0.841402, 0.853158, 0.864112, 0.874311, 0.883799, 0.89262, 0.900815, 0.908422, 0.915479, 0.922023, 0.928087, 0.933702, 0.938901, 0.94371, 0.948157, 0.952267, 0.956065, 0.959572, 0.96281, 0.965797, 0.968553, 0.971094, 0.973436, 0.975594, 0.977582, 0.979413, 0.981098, 0.982649, 0.984076, 0.985388, 0.986595, 0.987704, 0.988724, 0.989661, 0.990522, 0.991313, 0.992038, 0.992705, 0.993317, 0.993878, 0.994393, 0.994865, 0.995299, 0.995696, 0.99606, 0.996394, 0.9967, 0.996981, 0.997238, 0.997473, 0.997689, 0.997886, 0.998067, 0.998233, 0.998384, 0.998523, 0.99865, 0.998766, 0.998872, 0.998969, 0.999058, 0.99914, 0.999214, 0.999282, 0.999344, 0.999401, 0.999453, 1);
  --bottom-faq-c-ms: 500ms;
  --bottom-faq-closed-h: 64px;     /* closed item height (clips the 66.59px question row) */
  --bottom-input-bg: rgba(187, 187, 187, 0.15);
  --bottom-input-border: rgba(136, 136, 136, 0.1);
  --bottom-input-ease: 0.3s var(--ease-framer);
  --bottom-error: rgb(255, 34, 68);  /* the original button Error variant text color */
}

/* 1. Title group (FAQ and form) ---------------------------------------------------- */
.s-bottom .bottom-head {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 10px; width: 1000px; flex: none; position: relative; overflow: hidden; padding: 0;
}
.s-bottom .bottom-head-text {
  display: flex; flex-direction: column; justify-content: flex-start;
  flex: none; width: 100%; position: relative;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.s-bottom .bottom-kicker,
.s-bottom .bottom-title {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  font-weight: 400; letter-spacing: 0;
}
.s-bottom .bottom-kicker {
  font-family: var(--font-semibold); font-size: 19px; line-height: 1.4em; color: var(--c-brand);
}
.s-bottom .bottom-title {
  font-family: var(--font-bold); font-size: 36px; line-height: 1.4em; color: var(--c-text);
}

/* 2. FAQ ------------------------------------------------------------------------------ */
.s-bottom[data-section="faq"] {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 40px; padding: 100px; width: 100%; flex: none; position: relative;
  overflow: hidden; background-color: var(--c-surface-soft);
}
.s-bottom .bottom-faq-column {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  gap: 10px; width: 100%; max-width: 100%; flex: none; position: relative;
}
.s-bottom .bottom-faq-list { position: relative; flex: none; width: 1000px; }
.s-bottom .bottom-faq-card {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 0; padding: 0 20px; width: 100%; position: relative;
  background-color: #fff; border-radius: 20px; overflow: hidden;
}
.s-bottom .bottom-faq-item {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 0; width: 100%; height: var(--bottom-faq-closed-h); flex: none; position: relative;
  overflow: hidden;
}
.s-bottom .bottom-faq-item.is-open { height: auto; }
/* While bottom.js clips a toggled item (a closing one still shows its answer past the new 64px box),
   the clip does the cutting instead of overflow. It ends at the box edge, so the end look is the same. */
.s-bottom .bottom-faq-item.bottom-faq-clipping { overflow: visible; }
.s-bottom .bottom-faq-line {
  flex: none; width: 100%; height: 1px; position: relative; overflow: hidden;
  background-color: rgba(0, 0, 0, 0.05);
}
.s-bottom .bottom-faq-qh { flex: none; width: 100%; font-weight: 400; }
.s-bottom .bottom-faq-q {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 24px; padding: 20px 0; width: 100%; position: relative;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}
.s-bottom .bottom-faq-plus {
  display: block; flex: none; width: 16px; height: 16px; position: relative;
  overflow: hidden; opacity: 0.3;
  transition: transform var(--spring-c-ms) var(--spring-c);
}
.s-bottom .bottom-faq-item.is-open .bottom-faq-plus { transform: rotate(45deg); }
/* The original icon gets will-change transform at its first move and keeps it (own layer, so its
   edges come out a little different). bottom.js adds .bottom-faq-moved at the first toggle. */
.s-bottom .bottom-faq-moved .bottom-faq-plus { will-change: transform; }
.s-bottom .bottom-faq-bar {
  display: block; position: absolute; background-color: #000; border-radius: 10px;
}
.s-bottom .bottom-faq-bar-h { top: 7px; bottom: 7px; left: 0; right: 0; }
.s-bottom .bottom-faq-bar-v { top: 0; bottom: 0; left: 7px; right: 7px; }
.s-bottom .bottom-faq-qtext {
  display: block; flex: none; white-space: pre;
  font-family: var(--font-semibold); font-weight: 400; font-size: 19px; line-height: 1.4em;
  letter-spacing: 0; color: var(--c-text);
}
.s-bottom .bottom-faq-a {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 10px; padding: 0 20px 20px 40px; width: 100%; flex: none; position: relative;
  opacity: 0;
  transition: opacity var(--spring-c-ms) var(--spring-c);
}
.s-bottom .bottom-faq-item.is-open .bottom-faq-a { opacity: 1; }
.s-bottom .bottom-faq-a-inner {
  display: flex; flex-direction: column; justify-content: flex-start;
  width: 100%; flex: none; position: relative; opacity: 0.6;
  -webkit-user-select: none; user-select: none;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  transition: opacity var(--spring-c-ms) var(--spring-c);
}
.s-bottom .bottom-faq-item.is-open .bottom-faq-a-inner { opacity: 1; }
/* Closed answer text: the original closed variant style (seen only while it fades out). */
.s-bottom .bottom-faq-a-text {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
  font-family: Manrope, "Manrope Placeholder", sans-serif; font-weight: 600;
  font-size: 16px; line-height: 24px; letter-spacing: 0; text-align: left;
  color: rgb(102, 102, 102);
}
.s-bottom .bottom-faq-item.is-open .bottom-faq-a-text {
  font-family: var(--font-regular); font-weight: 400;
  font-size: 18px; line-height: 1.5em; text-align: start; color: var(--c-text);
}

/* 3. Form ------------------------------------------------------------------------------ */
.s-bottom[data-section="form"] {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 40px; padding: 100px; width: 1200px; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-form {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 32px; width: 1000px; flex: none; position: relative; margin: 0; padding: 0;
}
.s-bottom .bottom-field {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 10px; width: 100%; flex: none; position: relative; cursor: default;
}
.s-bottom .bottom-field-label,
.s-bottom .bottom-consent-text,
.s-bottom .bottom-form-error {
  display: block; flex: none; position: relative;
  font-family: var(--font-medium); font-weight: 400;
  font-size: var(--text-body-size); line-height: var(--text-body-line);
  letter-spacing: var(--text-body-spacing);
}
.s-bottom .bottom-field-label { white-space: pre; color: #545454; cursor: default; }
.s-bottom .bottom-field-label-dark { color: var(--c-text); }

.s-bottom .bottom-input-wrap {
  display: block; flex: none; position: relative; width: 100%; height: 52px;
  overflow: hidden; border-radius: 10px; background: var(--bottom-input-bg); cursor: default;
  transition: background var(--bottom-input-ease), box-shadow var(--bottom-input-ease);
}
.s-bottom .bottom-input-wrap::after {
  content: ""; pointer-events: none; box-sizing: border-box;
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 1px solid var(--bottom-input-border); border-radius: 10px;
  transition: border-color var(--bottom-input-ease), border-width var(--bottom-input-ease),
    border-style var(--bottom-input-ease), border-top-left-radius var(--bottom-input-ease),
    border-top-right-radius var(--bottom-input-ease), border-bottom-right-radius var(--bottom-input-ease),
    border-bottom-left-radius var(--bottom-input-ease);
}
.s-bottom .bottom-input-wrap:focus-within {
  background: #fff; box-shadow: 2px 1px 8px 0px rgba(98, 211, 119, 0.1);
}
.s-bottom .bottom-input-wrap:focus-within::after { border-color: var(--c-brand); }

.s-bottom .bottom-input {
  display: block; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 12px;
  border: none; border-radius: 0; background: transparent; outline: none;
  font-family: "Pretendard Regular"; font-weight: 400; font-style: normal;
  font-size: 14px; line-height: 1.2em; letter-spacing: 0; color: var(--c-text);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: text;
}
.s-bottom .bottom-input::placeholder { color: #919191; opacity: 1; }

.s-bottom .bottom-select-wrap { padding-right: 12px; }
.s-bottom .bottom-select-wrap::before {
  content: ""; display: block; position: absolute; right: 0; top: 0; bottom: 0;
  width: 16px; box-sizing: content-box; padding: 12px 12px 12px 10px; border: none;
  pointer-events: none; background-color: var(--c-gray-999);
  -webkit-mask-image: url("../img/form-select-chevron.svg"); mask-image: url("../img/form-select-chevron.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 16px; mask-size: 16px;
  -webkit-mask-position: 10px center; mask-position: 10px center;
}
.s-bottom .bottom-select {
  -webkit-appearance: none; appearance: none; color: var(--c-gray-999); cursor: default;
}
.s-bottom .bottom-select option { color: #000; }
.s-bottom .bottom-select option:disabled { color: #0006; }

.s-bottom .bottom-textarea-wrap { height: auto; min-height: 120px; }
.s-bottom .bottom-textarea {
  display: flex; height: auto; min-height: inherit; max-height: inherit;
  resize: vertical; overflow-x: hidden; overflow-y: auto; white-space: break-spaces;
}
.s-bottom .bottom-textarea::-webkit-resizer { background: no-repeat url("../img/form-textarea-resizer.svg"); }
.s-bottom .bottom-textarea::-webkit-scrollbar { cursor: pointer; background: transparent; }
.s-bottom .bottom-textarea::-webkit-scrollbar-thumb:window-inactive { opacity: 0; }
.s-bottom .bottom-textarea::-webkit-scrollbar-corner { background: none; background-color: transparent; outline: none; }

.s-bottom .bottom-consent {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 10px; width: 100%; flex: none; position: relative; cursor: default;
}
.s-bottom .bottom-check {
  -webkit-appearance: none; appearance: none;
  display: flex; justify-content: center; align-items: center; flex: none;
  width: 20px; height: 20px; margin: 0; position: relative; overflow: hidden;
  border-radius: 4px; background: rgba(187, 187, 187, 0.2); outline: none; cursor: default;
}
.s-bottom .bottom-check::after {
  content: ""; display: block; position: absolute; inset: 0; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(136, 136, 136, 0.2); border-radius: 4px;
}
.s-bottom .bottom-check::before {
  content: ""; display: block; position: absolute; right: 0; top: 0; bottom: 0;
  width: 100%; height: 100%; box-sizing: content-box; padding: 0; border: none;
  pointer-events: none; background-color: #fff; opacity: 0;
  -webkit-mask-image: url("../img/form-checkbox-check.svg"); mask-image: url("../img/form-checkbox-check.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.s-bottom .bottom-check:checked { background-color: var(--c-brand); }
.s-bottom .bottom-check:checked::before { opacity: 1; }
.s-bottom .bottom-check:focus::after { border-color: var(--c-brand); }
.s-bottom .bottom-consent-text {
  white-space: pre; color: #808080; cursor: default; -webkit-user-select: none; user-select: none;
}
/* 개인정보 수집 안내 (M468-05 · 원본에 없는 줄 · 법 제15조 제2항). 체크박스 바로 아래에 붙인다.
   폼의 32px 간격을 줄여 동의 줄에 붙이고 글머리는 동의 글과 맞춘다(체크박스 20px + 간격 10px).
   줄 높이는 정수 픽셀로 둔다. 소수 높이면 아래 푸터가 소수 픽셀만큼 밀려 글자 래스터가 바뀐다. */
.s-bottom .bottom-consent-note {
  display: block; flex: none; position: relative; width: 100%; box-sizing: border-box;
  margin: -22px 0 0; padding: 0 0 0 30px;
  font-family: var(--font-regular); font-weight: 400; font-size: 13px; line-height: 21px; letter-spacing: 0;
  color: #808080; white-space: normal; word-break: keep-all; overflow-wrap: break-word;
}
.s-bottom .bottom-consent-line { display: block; }

.s-bottom .bottom-submit {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  gap: 0; flex: none; position: relative; width: 100%; height: 52px;
  border-radius: 10px; background-color: var(--c-brand); text-align: center; cursor: pointer;
  transition: background-color 0.2s var(--ease-framer);
}
@media (hover: hover) {
  .s-bottom .bottom-submit:not(.is-success):hover { background-color: rgb(123, 227, 142); }
}
.s-bottom .bottom-submit:not(.is-success):active { background-color: rgb(72, 176, 91); }
.s-bottom .bottom-submit.is-success { cursor: auto; }
.s-bottom .bottom-submit-label,
.s-bottom .bottom-submit-done {
  display: block; flex: none; position: relative; white-space: pre; color: #fff;
  -webkit-user-select: none; user-select: none;
}
.s-bottom .bottom-submit-label {
  font-family: var(--font-regular); font-weight: 400; font-size: 18px; line-height: 1.5em; letter-spacing: 0;
}
.s-bottom .bottom-submit-done {
  font-family: Inter, "Inter Placeholder", sans-serif; font-weight: 600;
  font-size: 14px; line-height: 1.2em; letter-spacing: normal;
}
.s-bottom .bottom-form-error {
  width: 100%; margin-top: -20px; white-space: pre-wrap; word-break: break-word;
  overflow-wrap: break-word; color: var(--bottom-error);
}

/* 4. Footer ------------------------------------------------------------------------------ */
.s-bottom[data-section="footer"] {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 0; padding: 100px; width: 100%; max-width: 100%; flex: none; position: relative;
  background-color: rgb(34, 34, 34);
}
.s-bottom .bottom-foot-inner {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 32px; width: 1000px; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-top {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;
  gap: 0; width: 100%; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-brand {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 4px; flex: 1 0 0px; width: 1px; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-logo { display: block; flex: none; width: 82px; height: 16px; }
.s-bottom .bottom-foot-mid {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  gap: 10px; flex: 1 0 0px; width: 1px; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-col {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: 12px; width: 180px; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-row,
.s-bottom .bottom-foot-info {
  display: block; flex: none; position: relative;
  font-family: var(--font-medium); font-weight: 400;
  font-size: var(--text-body-size); line-height: var(--text-body-line);
  letter-spacing: var(--text-body-spacing); color: #fff;
}
.s-bottom .bottom-foot-row { white-space: pre; }
.s-bottom .bottom-foot-row strong { font-weight: 700; }
.s-bottom .bottom-foot-dim { opacity: 0.8; }
.s-bottom .bottom-foot-link {
  display: block; color: var(--c-link-white); text-decoration: none; cursor: pointer;
}
.s-bottom .bottom-foot-link[aria-current="page"] { color: var(--c-link-white-current); }
.s-bottom .bottom-foot-link:hover { color: var(--c-link-white-hover); }
.s-bottom .bottom-foot-icon-row {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 2px; width: 100%; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-icon {
  display: block; flex: none; width: 16px; height: 16px; color: #fff; overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.s-bottom .bottom-foot-sep {
  flex: none; width: 100%; height: 1px; position: relative; overflow: hidden;
  background-color: #fff; opacity: 0.2;
}
.s-bottom .bottom-foot-bottom {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 12px; width: 100%; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-info {
  width: 100%; opacity: 0.5; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.s-bottom .bottom-foot-terms {
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
  gap: 10px; width: 100%; flex: none; position: relative; overflow: hidden;
}
.s-bottom .bottom-foot-term {
  display: block; color: var(--c-link-gray); text-decoration: none; cursor: pointer;
  transition: color var(--dur-link) var(--ease-framer);
}
.s-bottom .bottom-foot-term:hover { color: var(--c-link-gray-hover); }
/* Keyboard focus ring. The link box is a block so the whole line is clickable, but the ring stays
 * around the text as in the original, where the link was an inline box (Chrome UA link offset 1px). */
.s-bottom .bottom-foot-link:focus-visible,
.s-bottom .bottom-foot-term:focus-visible { outline: none; }
.s-bottom .bottom-foot-link:focus-visible > .bottom-foot-link-text,
.s-bottom .bottom-foot-term:focus-visible > .bottom-foot-link-text {
  outline: auto 1px; outline: auto 1px -webkit-focus-ring-color; outline-offset: 1px;
}

/* 5. Tablet ------------------------------------------------------------------------------ */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .s-bottom .bottom-head { width: 100%; }
  .s-bottom[data-section="faq"] { padding: 80px 40px; }
  .s-bottom .bottom-faq-kicker { font-size: 15px; }
  .s-bottom .bottom-faq-title { font-size: 28px; }
  .s-bottom .bottom-faq-list { flex: 1 0 0px; width: 1px; }
  .s-bottom .bottom-faq-qtext { font-size: 15px; }
  .s-bottom .bottom-faq-item.is-open .bottom-faq-a-text { font-size: 16px; }
  .s-bottom[data-section="form"] { width: 100%; }
  .s-bottom .bottom-form { width: 100%; }
  .s-bottom .bottom-submit-label { font-size: 16px; }
  .s-bottom[data-section="footer"] { padding: 40px; }
  .s-bottom .bottom-foot-inner { width: 100%; }
  .s-bottom .bottom-foot-mid {
    flex: none; width: min-content; align-self: stretch; align-items: flex-start; gap: 0;
  }
}

/* 6. Mobile ------------------------------------------------------------------------------ */
@media (max-width: 809.98px) {
  .s-bottom .bottom-head { width: 100%; gap: 4px; }
  .s-bottom .bottom-kicker { font-size: 14px; text-align: center; }
  .s-bottom .bottom-title { font-size: 22px; text-align: center; }
  .s-bottom[data-section="faq"] { padding: 60px 16px; }
  .s-bottom .bottom-faq-list { flex: 1 0 0px; width: 1px; }
  .s-bottom .bottom-faq-qtext { font-size: 14px; }
  .s-bottom .bottom-faq-item.is-open .bottom-faq-a-text { font-size: 14px; }
  .s-bottom[data-section="form"] { width: 100%; padding: 60px 16px; gap: 16px; }
  .s-bottom .bottom-form { width: 100%; }
  .s-bottom .bottom-submit-label { font-size: 14px; }
  .s-bottom[data-section="footer"] { padding: 30px; gap: 24px; }
  .s-bottom .bottom-foot-inner { width: 100%; }
  .s-bottom .bottom-foot-top { flex-direction: column; gap: 24px; }
  .s-bottom .bottom-foot-brand { flex: none; width: 100%; }
  .s-bottom .bottom-foot-mid { flex: none; width: 100%; gap: 0; }
  .s-bottom .bottom-foot-mid .bottom-foot-col { flex: 1 0 0px; width: 1px; }
  .s-bottom .bottom-foot-contact { width: 100%; }
}

/* 7. Reduced motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .s-bottom .bottom-faq-plus,
  .s-bottom .bottom-faq-a,
  .s-bottom .bottom-faq-a-inner { transition: none; }
}