/* ===================================
   QUESTION ANSWERS
   The section and its short questions in the style of the FAQ list below, but with every answer
   shown at once: one white panel, hairlines between the entries, each entry an icon on a mint
   badge with the bold question and the answer as plain text under it; two columns from 861 px.
   The accordion entries below the answers (refund rows, eligibility tiles, the overrides of the
   site-standard accordion) are styled by question-answers.css.
   Mobile first: the base rules are the 375 px layout, wider layouts come through min-width.
   Icons are inline SVG from the template, coloured through currentColor.
   The base --tp-* tokens, the campaign re-tint and the section title come from tariff-page-tokens.css.
   =================================== */

.tariff-questions {
  --tp-line-accent: color-mix(in srgb, var(--tp-accent) 32%, var(--tp-paper));
  --tp-shadow: 0 1px 2px rgba(37, 39, 33, 0.04), 0 12px 32px -20px rgba(37, 39, 33, 0.22);
  --tp-shadow-hover: 0 2px 4px rgba(37, 39, 33, 0.05), 0 18px 40px -20px rgba(14, 131, 119, 0.28);
  --tp-r-sm: 10px;
  --tp-r-md: 14px;
  --tp-r-lg: 18px;
  --tp-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tp-motion: 0.32s;

  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 16px 56px;
  font-family: var(--tp-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tp-ink);
}
.tariff-questions *,
.tariff-questions *::before,
.tariff-questions *::after {
  box-sizing: inherit;
}

.tariff-questions__inner {
  display: grid;
  gap: 24px;
}

/* Grid children never widen the page: long mail addresses and links in the FAQ answers wrap. */
.tariff-questions__inner > * {
  min-width: 0;
}

.tariff-num {
  font-variant-numeric: tabular-nums;
}

/* --- One white card: the answered questions, then the further questions --- */
.tariff-questions__card {
  display: grid;
  min-width: 0;
  padding: 4px 16px 12px;
  border: 1px solid var(--tp-line);
  border-radius: var(--tp-r-lg);
  background: var(--tp-paper);
  box-shadow: var(--tp-shadow);
}

.tariff-questions__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.tariff-questions__item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--tp-line);
}
.tariff-questions__item:last-child {
  border-bottom: 0;
}

/* Icons: one stroke style, sized by their holder, coloured through currentColor */
.tariff-questions__icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.tariff-questions__mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--tp-mint);
  color: var(--tp-accent);
}
.tariff-questions__mark .tariff-questions__icon {
  width: 18px;
  height: 18px;
}

/* Question line: icon badge + bold question */
.tariff-questions__question {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tp-ink);
  text-wrap: balance;
}

/* Answer: plain text under the question, aligned with the question text. */
.tariff-questions__answer {
  margin: 0 0 0 44px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tp-ink-2);
}

/* --- Focus --- */
.tariff-questions :is(button, a):focus-visible {
  outline: 3px solid var(--tp-accent-bright);
  outline-offset: 2px;
}

/* --- Wider layouts --- */
@media (min-width: 481px) {
  .tariff-questions {
    padding: 48px 24px 80px;
  }
  .tariff-questions__card {
    padding: 4px 24px 16px;
  }
}

/* Two columns: the hairline sits under every entry, so the last row of each column closes clean. */
@media (min-width: 861px) {
  .tariff-questions {
    padding-top: 56px;
  }
  .tariff-questions__card {
    padding: 8px 32px 20px;
  }
  .tariff-questions__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
  }
  .tariff-questions__item:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

/* Phones: the answer runs under the badge, using the full width. */
@media (max-width: 480px) {
  .tariff-questions__answer {
    margin-left: 0;
  }
}

/* --- Free advice before signing up: the last row of the card, under a hairline --- */
.tariff-questions__advice {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--tp-line);
}
.tariff-questions__advice-title {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  color: var(--tp-ink);
}
.tariff-questions__advice-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tp-ink-2);
}
.tariff-questions__advice-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tariff-questions__advice-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--tp-line);
  border-radius: 999px;
  background: var(--tp-paper);
  font-size: 15px;
  font-weight: 700;
  color: var(--tp-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tariff-questions__advice-link:hover {
  border-color: var(--tp-accent);
  background: var(--tp-mint);
}
.tariff-questions__advice-link .tariff-questions__icon {
  width: 18px;
  height: 18px;
}
@media (min-width: 861px) {
  .tariff-questions__advice {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 32px;
  }
}