/* Secondary reading and help sections. The shared .wrap and .button styles live in app.css. */
.vr-benefits,
.vr-faq,
.vr-contact {
  position: relative;
  scroll-margin-top: 96px;
}

.vr-benefits {
  padding: clamp(64px, 9vw, 128px) 0 clamp(64px, 8vw, 112px);
  color: #f5f9fa;
  background: var(--vr-blue);
  --sc-ink: #f5f9fa;
  --sc-ink-soft: #c1d5df;
}

.vr-benefits-lead {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  align-items: start;
  gap: clamp(32px, 8vw, 128px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.vr-benefits h2 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(36px, 4.9vw, 68px);
  line-height: 1.09;
  letter-spacing: -.045em;
  font-weight: 700;
  text-wrap: balance;
  color: #f5f9fa;
}

.vr-benefits-time-value {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: -12px 0 20px;
  font-size: clamp(76px, 8.5vw, 120px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  color: #f5f9fa;
}

.vr-benefits-time-value span {
  font-size: clamp(18px, 2vw, 27px);
  letter-spacing: -.02em;
  font-weight: 500;
}

.vr-benefits p {
  margin: 0 0 16px;
  max-width: 62ch;
  color: #f5f9fa;
  font-size: clamp(16px, 1.24vw, 18px);
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: .004em;
  text-wrap: pretty;
}

.vr-benefits p:last-child { margin-bottom: 0; }
.vr-benefits strong { color: #f5f9fa; font-weight: 750; }

.vr-benefits-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 8vw, 128px);
  border-top: 1px solid #497187;
  padding-top: clamp(36px, 4vw, 56px);
}

.vr-benefits-reason h3 {
  margin: 0 0 24px;
  max-width: 20ch;
  color: #f5f9fa;
  font-size: clamp(23px, 2.3vw, 32px);
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.vr-faq {
  padding: clamp(64px, 9vw, 128px) 0;
  background: var(--vr-surface);
  color: var(--vr-ink);
}

.vr-faq-layout {
  display: grid;
  grid-template-columns: .78fr 1.4fr;
  align-items: start;
  gap: clamp(40px, 9vw, 128px);
}

.vr-faq-intro { position: sticky; top: 128px; }

.vr-faq h2,
.vr-contact h2 {
  margin: 0;
  font-size: clamp(36px, 4.7vw, 64px);
  font-weight: 650;
  line-height: 1.09;
  letter-spacing: -.045em;
  text-wrap: balance;
  color: var(--vr-ink);
}

.vr-faq-intro > p {
  margin: 28px 0 16px;
  color: var(--vr-muted);
  font-size: 16px;
  font-weight: 650;
}

.vr-inline-link {
  display: inline;
  color: var(--vr-ink);
  font-size: 15px;
  line-height: 1.65;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.vr-inline-link span { margin-left: 4px; }

.vr-faq-questions { border-top: 1px solid #acbdc7; }
.vr-faq-item { border-bottom: 1px solid #acbdc7; }

.vr-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  color: var(--vr-ink);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.018em;
}

.vr-faq-item summary::-webkit-details-marker { display: none; }
.vr-faq-item summary::marker { content: ""; }

.vr-faq-sign {
  display: inline-grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.vr-faq-sign::before,
.vr-faq-sign::after {
  content: "";
  grid-area: 1 / 1;
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
}

.vr-faq-sign::after { transform: rotate(90deg); }
.vr-faq-item[open] .vr-faq-sign::after { transform: rotate(0deg); }

.vr-faq-answer {
  padding: 0 36px 28px 0;
  color: var(--vr-muted);
  font-size: 16px;
  line-height: 1.8;
  max-width: 68ch;
}

.vr-faq-answer p { margin: 0 0 14px; text-wrap: pretty; }
.vr-faq-answer p:last-child { margin-bottom: 0; }

.vr-contact {
  padding: clamp(64px, 8vw, 112px) 0 clamp(72px, 9vw, 128px);
  background: var(--vr-blue);
  color: var(--vr-paper);
}

.vr-contact h2 { color: var(--vr-paper); }

.vr-contact-heading {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: end;
  gap: clamp(36px, 8vw, 120px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.vr-contact-heading > p {
  margin: 0;
  max-width: 45ch;
  color: #d2e0e7;
  font-size: 18px;
  line-height: 1.75;
  text-wrap: pretty;
}

.vr-contact-desk {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
  gap: clamp(36px, 8vw, 120px);
  border-top: 1px solid #7797a6;
  padding-top: clamp(36px, 5vw, 64px);
}

.vr-contact-phone {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 100%;
  color: var(--vr-paper);
  font-size: clamp(24px, 3.1vw, 42px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.vr-contact-phone span { font-size: .72em; }
.vr-opening { margin-top: clamp(36px, 4vw, 56px); }

.vr-opening h3,
.vr-contact-message h3 {
  margin: 0 0 16px;
  color: var(--vr-paper);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.vr-opening-table {
  border-collapse: collapse;
  width: 100%;
  color: var(--vr-paper);
  font-size: 14px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.vr-opening-table caption {
  padding: 0 0 20px;
  color: #d2e0e7;
  text-align: left;
  font-size: 14px;
}

.vr-opening-table th,
.vr-opening-table td { text-align: left; padding: 10px 12px 10px 0; }
.vr-opening-table thead th { color: #d2e0e7; font-size: 12px; font-weight: 550; }
.vr-opening-table tbody th { font-weight: 550; }
.vr-opening-table tbody tr { border-top: 1px solid #7797a6; }
.vr-opening-table td:last-child,
.vr-opening-table th:last-child { text-align: right; padding-right: 0; }

.vr-noscript-note a {
  color: var(--vr-paper);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.vr-contact-form { display: grid; gap: 22px; }
.vr-contact-field { display: grid; gap: 9px; }

.vr-contact-field label {
  color: var(--vr-paper);
  font-size: 14px;
  font-weight: 650;
}

.vr-contact-field input,
.vr-contact-field textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid #688797;
  border-radius: 4px;
  padding: 13px 16px;
  background: var(--vr-paper);
  color: var(--vr-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  caret-color: var(--vr-ink);
}

.vr-contact-field textarea { resize: vertical; min-height: 160px; }

.vr-contact-send {
  display: flex;
  align-items: center;
  gap: 20px;
}

.vr-preview-submit { min-width: 108px; }
.vr-preview-submit:disabled { opacity: .58; cursor: not-allowed; }
.vr-required-note { margin: 0; color: #d2e0e7; font-size: 12px; line-height: 1.6; }

.vr-form-status {
  margin: 0;
  border-top: 1px solid #7797a6;
  padding: 18px 0 0;
  color: var(--vr-paper);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
}

.vr-form-status[hidden] { display: none; }
.vr-noscript-note { color: var(--vr-paper); font-size: 14px; line-height: 1.7; }

.vr-footer {
  padding: clamp(40px, 6vw, 80px) 0 28px;
  background: var(--vr-ink);
  color: var(--vr-paper);
}

.vr-footer a { color: var(--vr-paper); }

.vr-footer-home {
  display: inline-flex;
  align-items: center;
  width: 220px;
  max-width: 100%;
  min-width: 44px;
  min-height: 44px;
  margin-bottom: clamp(32px, 4vw, 56px);
  text-decoration: none;
}

.vr-footer-home img { display: block; width: 100%; height: auto; }

.vr-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-bottom: clamp(36px, 5vw, 64px);
}

.vr-footer-places { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.vr-footer-more { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 14px 28px; }
.vr-footer-links a { font-size: 15px; line-height: 1.6; text-decoration: none; }
.vr-footer-places a { font-size: 18px; font-weight: 500; }

.vr-footer-base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  border-top: 1px solid #637a89;
  padding-top: 24px;
  color: #c4d4dd;
}

.vr-footer-base p { margin: 0; font-size: 12px; }
.vr-footer-base a { color: #c4d4dd; font-size: 12px; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 800px), (pointer: coarse) {
  .vr-footer-links a,
  .vr-footer-home,
  .vr-footer-base a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .vr-footer-places { gap: 4px; }
  .vr-footer-more { gap: 4px 24px; }
}

.vr-faq a:focus-visible,
.vr-faq summary:focus-visible,
.vr-contact a:focus-visible,
.vr-contact button:focus-visible,
.vr-contact input:focus-visible,
.vr-contact textarea:focus-visible,
.vr-form-status:focus-visible,
.vr-footer a:focus-visible {
  outline: 3px solid #a85100;
  outline-offset: 5px;
}

.vr-footer a:focus-visible { outline-color: var(--vr-orange); }
.vr-contact a:focus-visible,
.vr-contact button:focus-visible,
.vr-form-status:focus-visible { outline-color: var(--vr-orange); }
.vr-contact input:focus-visible,
.vr-contact textarea:focus-visible { outline-offset: 2px; }
.vr-faq summary:active { transform: translateY(1px); }
.vr-contact button:not(:disabled):active { transform: translateY(1px); }
.vr-faq a:active,
.vr-contact a:active,
.vr-footer a:active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  .vr-faq-item summary:hover { color: #21657e; }
  .vr-contact-phone:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
  .vr-inline-link:hover,
  .vr-noscript-note a:hover { text-decoration-thickness: 2px; }
  .vr-contact-field input:hover,
  .vr-contact-field textarea:hover { border-color: var(--vr-ink); }
  .vr-footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .vr-footer-home:hover { transform: translateY(-1px); }
}

@media (max-width: 860px) {
  .vr-faq-layout { grid-template-columns: 1fr; gap: 36px; }
  .vr-faq-intro { position: static; }
  .vr-faq-intro > p { margin-top: 20px; }
  .vr-benefits-lead { gap: 32px; }
  .vr-benefits-time-value { font-size: 76px; margin-top: -5px; }
  .vr-benefits-reasons { gap: 32px; }
  .vr-contact-heading,
  .vr-contact-desk { gap: 40px; }
  .vr-contact-phone { font-size: 28px; }
  .vr-contact-send { align-items: flex-start; flex-direction: column; gap: 12px; }
  .vr-opening-table th,
  .vr-opening-table td { padding-right: 8px; font-size: 13px; }
  .vr-opening-table thead th { font-size: 11px; }
}

@media (max-width: 620px) {
  .vr-footer-home { width: 180px; }
  .vr-benefits,
  .vr-faq,
  .vr-contact { scroll-margin-top: 80px; }
  .vr-benefits-lead,
  .vr-benefits-reasons,
  .vr-contact-heading,
  .vr-contact-desk,
  .vr-footer-links { grid-template-columns: 1fr; }
  .vr-benefits-lead { padding-bottom: 40px; gap: 32px; }
  .vr-benefits h2 { font-size: 38px; }
  .vr-benefits-time-value { font-size: clamp(80px, 22vw, 106px); margin: 0 0 16px; }
  .vr-benefits-reasons { gap: 40px; }
  .vr-benefits-reason h3 { margin-bottom: 20px; }
  .vr-faq-item summary { gap: 20px; padding: 21px 0; }
  .vr-faq-answer { padding-right: 24px; }
  .vr-contact-heading { gap: 24px; }
  .vr-contact-heading > p { font-size: 16px; }
  .vr-contact-desk { gap: 48px; }
  .vr-contact-phone { font-size: clamp(26px, 7.2vw, 36px); gap: 12px; }
  .vr-opening-table { max-width: 500px; }
  .vr-opening-table th,
  .vr-opening-table td { font-size: 14px; }
  .vr-opening-table thead th { font-size: 12px; }
  .vr-contact-send { flex-direction: row; align-items: center; gap: 16px; }
  .vr-footer-links { gap: 32px; }
  .vr-footer-more { gap: 12px 24px; }
  .vr-footer-base { gap: 16px; }
}