/* =====================================================================
   Visa Journey USA
   ---------------------------------------------------------------------
   Palette and component logic carried over from visa-application-form.js
   so the marketing site and the application read as one product:
   teal #0f766e accent, slate text, white cards, 6px radius, hairline
   borders instead of drop shadows.

   Added here for the site: a deep teal (#06302c) for the two full-bleed
   bands, and Source Serif 4 for headings only. Body copy stays on the
   same system stack the form uses, so nothing jumps between the site and
   the form.

   Everything is scoped under .vj-site so it cannot collide with theme CSS.
   ===================================================================== */

.vj-site {
  --ink: #0f172a;
  --body: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  --teal: #0f766e;
  --teal-dark: #115e59;
  --teal-soft: #f0fdfa;
  --teal-line: #99f6e4;
  --deep: #06302c;
  --deep-2: #0a3f39;

  --warn: #b45309;
  --warn-bg: #fffbeb;
  --warn-line: #fcd34d;
  --error: #b91c1c;

  --bg: #ffffff;
  --bg-soft: #f8fafc;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --radius: 6px;
  --radius-lg: 12px;

  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vj-site *,
.vj-site *::before,
.vj-site *::after { box-sizing: border-box; }

.vj-site img { max-width: 100%; height: auto; display: block; }
.vj-site a { color: var(--teal-dark); text-underline-offset: 2px; }
.vj-site a:hover { color: var(--teal); }
.vj-site :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- type */

.vj-site h1, .vj-site h2, .vj-site h3 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  margin: 0 0 .75rem;
  letter-spacing: -0.012em;
}

.vj-site h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.25rem); line-height: 1.1; }
.vj-site h2 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.375rem); line-height: 1.18; }
.vj-site h3 { font-size: 1.1875rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; }

.lede { font-size: 1.1875rem; line-height: 1.65; color: var(--muted); margin: 0 0 1.75rem; max-width: 34em; }
.p { margin: 0 0 1.1rem; max-width: 36em; }
.p:last-child { margin-bottom: 0; }
.meta { font-size: .9375rem; color: var(--muted); margin: 0; }

.list { margin: 0 0 1.25rem; padding-left: 1.15rem; max-width: 36em; }
.list li { margin-bottom: .6rem; }
.list li::marker { color: var(--teal); }
.list li:last-child { margin-bottom: 0; }

.pull {
  border-left: 3px solid var(--teal);
  background: var(--teal-soft);
  padding: 1.15rem 1.35rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.75rem 0;
  max-width: 36em;
}
.pull p { margin: 0; color: #134e4a; font-size: 1.0625rem; }

/* -------------------------------------------------------------- layout */

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.wrap.narrow { max-width: 720px; }

.section { padding: 4.5rem 0; }
.section.soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 36em; margin-bottom: 2.5rem; }
.section-head .lede { margin-bottom: 0; }

@media (min-width: 800px) { .section { padding: 5.5rem 0; } }

/* ------------------------------------------------------- notice bar */

/* Set at half the previous size at the client's request, September 2026.
   .9375rem (15px) became .46875rem (7.5px).

   Flagging it here rather than silently: this bar carries the "not a government
   agency" disclosure, and the June audit raised the original 8px white version
   as a readability problem. It is back in that territory. The same disclosure
   still appears at full size in the footer of every page and in the FAQ, so the
   information is not gone, but this bar is now decorative rather than read.

   To make it small but still legible, change .46875rem to .75rem. */
.notice-bar { background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); }
.notice-bar .wrap { padding-top: .55rem; padding-bottom: .55rem; }
.notice-bar p { margin: 0; font-size: .46875rem; line-height: 1.6; color: #713f12; max-width: 78em; }
.notice-bar strong { color: #78350f; }
.notice-bar a { color: var(--warn); }

/* ----------------------------------------------------------- header */

.site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: .9rem; padding-bottom: .9rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand .mark { width: 30px; height: 30px; flex: none; border-radius: 9px; }
.brand-name { font-family: var(--serif); font-size: 1.1875rem; color: var(--ink); letter-spacing: -0.015em; }
.brand-name em { font-style: normal; color: var(--teal); }
.brand-light .brand-name { color: #fff; }
.brand-light .brand-name em { color: var(--teal-line); }

.nav { display: none; align-items: center; gap: 1.25rem; }
.nav a { font-size: .9375rem; color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav .btn { color: #fff; }
@media (min-width: 1040px) { .nav { display: flex; } .menu-btn { display: none; } }

.menu-btn { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .55rem .7rem; cursor: pointer; line-height: 0; }
.menu-bars, .menu-bars::before, .menu-bars::after { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; }
.menu-bars { position: relative; }
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -5.5px; }
.menu-bars::after { top: 5.5px; }

.mobile-nav { display: none; padding: .25rem 1.5rem 1.25rem; border-top: 1px solid var(--line); }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: .8rem 0; font-size: 1.0625rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav a.btn { margin-top: 1rem; text-align: center; color: #fff; border-bottom: 0; }
@media (min-width: 1040px) { .mobile-nav, .mobile-nav.is-open { display: none; } }

/* ---------------------------------------------------------- buttons */

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: var(--radius);
  padding: .8rem 1.5rem; font-family: var(--sans); font-size: 1rem; font-weight: 500;
  line-height: 1.3; text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { padding: .55rem 1.05rem; font-size: .9375rem; }
.btn-block { width: 100%; }

/* These carry the .vj-site prefix on purpose. Most buttons on this site are
   anchors, and `.vj-site a` above sets a link colour at a higher specificity
   than a bare .btn-primary would have. Without the prefix the filled buttons
   render with dark teal text on a teal background. Do not strip it. */
.vj-site .btn-primary { background: var(--teal); color: #fff; font-weight: 700; }
.vj-site .btn-primary:hover { background: var(--teal-dark); color: #fff; }
.vj-site .btn-quiet { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.vj-site .btn-quiet:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); }
.vj-site .btn-light { background: #fff; color: var(--teal-dark); font-weight: 700; }
.vj-site .btn-light:hover { background: var(--teal-soft); color: var(--teal-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ------------------------------------------------------------- hero */

.hero { background: #fff; padding: 3.5rem 0 4rem; border-bottom: 1px solid var(--line); }
.hero-in { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) {
  .hero { padding: 5rem 0 5.5rem; }
  .hero-in { grid-template-columns: 1.05fr .95fr; gap: 4rem; }
}

.eyebrow { font-family: var(--sans); font-size: .8125rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--teal-dark); margin: 0 0 .875rem; }
.hero-copy h1 { max-width: 20ch; margin-bottom: 1.25rem; }
.hero-copy .lede { font-size: 1.25rem; }

.hero-facts { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 32em; }
.hero-facts li {
  font-size: .9375rem; color: var(--muted);
  padding: .7rem 0 .7rem 1.65rem; border-top: 1px solid var(--line); position: relative;
}
.hero-facts li:last-child { border-bottom: 1px solid var(--line); }
.hero-facts li::before {
  content: ""; position: absolute; left: .25rem; top: 1.22rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal);
}

.hero-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.hero-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ------------------------------------------------------------ cards */

.card-grid { display: grid; gap: 1.25rem; }
@media (min-width: 620px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; }
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--teal-soft); color: var(--teal-dark);
  border: 1px solid var(--teal-line); margin-bottom: 1.1rem;
}
.card-icon .icon { width: 20px; height: 20px; }
.card h3 { margin-bottom: .45rem; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--teal-dark); text-decoration: underline; }
.card p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--muted); }

/* ------------------------------------------------------- steps band */

.band { background: var(--deep); color: #cbd5e1; border: 0; }
.band h2, .band h3 { color: #fff; }
.band .lede { color: #9dd7cf; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 2rem 3.5rem;
  border-left: 1px solid rgba(153, 246, 228, .22);
  margin-left: 1.25rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
@media (min-width: 900px) {
  .steps li { padding: 3.5rem 0 0 0; border-left: 0; margin-left: 0; border-top: 1px solid rgba(153, 246, 228, .22); }
  .steps li:last-child { border-top-color: rgba(153, 246, 228, .22); }
}

.steps li::before {
  content: counter(step);
  position: absolute; left: -1.25rem; top: -.2rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--deep-2); border: 1px solid var(--teal-line);
  color: var(--teal-line);
  font-family: var(--serif); font-size: 1.0625rem;
  display: flex; align-items: center; justify-content: center;
}
@media (min-width: 900px) { .steps li::before { left: 0; top: -1.25rem; } }

.steps h3 { margin-bottom: .5rem; }
.steps p { margin: 0; font-size: .9375rem; line-height: 1.65; color: #a8c5c0; }

/* -------------------------------------------------------------- FAQ */

.faq-in { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .faq-in { grid-template-columns: .85fr 1.15fr; gap: 4rem; } .faq-in .section-head { margin-bottom: 0; } }

.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: .45rem;
  border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: .8rem; }
.faq-item summary:hover { color: var(--teal-dark); }
.faq-body { padding: 0 3rem 1.4rem 0; }
.faq-body p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--muted); }

/* -------------------------------------------------------------- CTA */

.cta { background: var(--teal); color: #fff; padding: 4rem 0; text-align: center; }
.cta h2 { color: #fff; margin-bottom: .75rem; }
.cta p { max-width: 34em; margin: 0 auto 2rem; color: #ccfbf1; font-size: 1.0625rem; }

/* -------------------------------------------------- interior pages */

.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 3.5rem 0; }
.page-head h1 { margin-bottom: 1rem; }
.page-head .lede { margin-bottom: 0; }

.mini-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 620px) { .mini-grid { grid-template-columns: repeat(2, 1fr); } }
.mini { border-top: 2px solid var(--teal); padding-top: 1rem; }
.mini h3 { margin-bottom: .35rem; }
.mini p { margin: 0; font-size: .9375rem; color: var(--muted); line-height: 1.65; }

/* ---------------------------------------------------------- contact */

.contact-in { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .contact-in { grid-template-columns: 1.25fr .75fr; gap: 3rem; } }

.form-card { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 1.75rem; }
@media (min-width: 620px) { .form-card { padding: 2.25rem; } }

.field { margin-bottom: 1.35rem; }
.field label { display: block; font-size: .9375rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
.req { color: var(--teal); margin-left: .2rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: .7rem .8rem; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: #fff;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
}
.field input.invalid, .field select.invalid, .field textarea.invalid { border-color: var(--error); }
.hint { font-size: .875rem; color: var(--muted); margin: .4rem 0 0; }
.err { font-size: .875rem; color: var(--error); margin: .4rem 0 0; }
.form-foot { font-size: .875rem; color: var(--muted); margin: 1.25rem 0 0; padding-top: 1.15rem; border-top: 1px solid var(--line); }

.form-success { text-align: center; padding: 1.5rem 0; }
.success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--teal-soft); border: 1px solid var(--teal-line); color: var(--teal-dark);
  margin-bottom: 1.25rem;
}
.success-mark svg { width: 24px; height: 24px; }
.form-success h2 { font-size: 1.5rem; margin-bottom: .5rem; }
.form-success p { max-width: 32em; margin: 0 auto 1.75rem; color: var(--muted); }

.contact-aside { display: grid; gap: 1.25rem; }
.info-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem 1.5rem; }
.info-card h2 { font-family: var(--sans); font-size: .8125rem; font-weight: 600; color: var(--muted); margin: 0 0 .35rem; letter-spacing: .01em; }
.info-card h2 + p { margin: 0 0 1.4rem; font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.info-card p:last-child { margin-bottom: 0; }

.warn-card { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-lg); padding: 1.5rem; }
.warn-card h2 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: #78350f; margin: 0 0 .5rem; }
.warn-card p { margin: 0; font-size: .9375rem; line-height: 1.6; color: #713f12; }

/* ------------------------------------------------------ application */

.app-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 3rem 0 2.5rem; }
.app-section { padding: 2.5rem 0 4rem; background: #f1f5f9; }
.pay-appno { margin: .75rem 0 0; font-size: 1.0625rem; color: var(--muted); }
.pay-appno[hidden] { display: none; }
.pay-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--ink); letter-spacing: .04em; overflow-wrap: anywhere; }
.app-fallback { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 2rem; max-width: 44rem; margin: 0 auto; }
.app-fallback pre {
  background: var(--deep); color: #c8e9e4; padding: 1.1rem 1.25rem; border-radius: var(--radius);
  overflow-x: auto; font-size: .8125rem; line-height: 1.6; margin: 0;
}
.app-fallback code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.app-fallback p code { background: var(--bg-soft); border: 1px solid var(--line); padding: .1rem .35rem; border-radius: 4px; font-size: .875rem; }

/* ------------------------------------------------------------ footer */

.site-footer { background: var(--deep); color: #a8c5c0; padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; } }

.footer-blurb { font-size: .9375rem; line-height: 1.65; color: #8fb2ad; margin: 1rem 0 0; max-width: 26em; }
.site-footer h2 { font-family: var(--sans); font-size: .8125rem; font-weight: 600; color: #fff; margin: 0 0 .9rem; letter-spacing: .02em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .5rem; }
.site-footer a { color: #a8c5c0; text-decoration: none; font-size: .9375rem; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; font-size: .9375rem; line-height: 1.75; color: #a8c5c0; }

.footer-legal { border-top: 1px solid rgba(153, 246, 228, .18); margin-top: 3rem; padding-top: 1.75rem; }
.footer-legal p { font-size: .8125rem; line-height: 1.7; color: #8fb2ad; margin: 0 0 .75rem; max-width: 74em; }
.footer-legal a { font-size: inherit; text-decoration: underline; }
.footer-legal .copyright { margin: 1.25rem 0 0; color: #6f948f; }

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
  .vj-site *, .vj-site *::before, .vj-site *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Sticky header offset for in-page anchors */
.vj-site [id] { scroll-margin-top: 5rem; }

@media print {
  .site-header, .notice-bar, .cta, .menu-btn { display: none; }
  .vj-site { font-size: 12pt; color: #000; }
}

/* ---------------------------------------------------------------------
   Compatibility with the mounted widgets
   ---------------------------------------------------------------------
   visa-application-form.js styles itself under .vj-root, payment-step.js
   under .vjp. Both use plain <h1> elements, and the site's heading rules
   reach inside and would blow them up to display size in the serif face.

   So: neutralise headings inside either widget, then restore each widget's
   own heading rule at a specificity the site cannot beat. Do not delete
   this block, and if you restyle the site headings, check the form again.
   --------------------------------------------------------------------- */

.vj-site .vj-root h1, .vj-site .vj-root h2, .vj-site .vj-root h3,
.vj-site .vjp h1, .vj-site .vjp h2, .vj-site .vjp h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
}

.vj-site .vj-root .vj-h1 {
  font-size: 1.25rem; font-weight: 600; color: #0f172a; margin: 0 0 .25rem;
}

/* v5 order panel headings (payment-step.js .vjp-order) */
.vj-site .vjp .vjp-ohead h2 {
  font-size: 1.1875rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3;
}
.vj-site .vjp .vjp-prod h3 {
  font-size: 1rem; font-weight: 700; color: #0f172a; margin: .125rem 0 .25rem; line-height: 1.35;
}

.vj-site .vjp .vjp-title {
  font-size: 1.5rem; font-weight: 400; text-align: center; margin: 0 0 1.5rem;
}

.vj-site .vj-root p, .vj-site .vjp p { max-width: none; }
.vj-site .vj-root a, .vj-site .vjp a { color: inherit; }

/* The widgets set their own page background. Let them own the band they sit in. */
.widget-band { background: #f1f5f9; padding: 2rem 0 4rem; }
.widget-band .wrap { padding: 0 1rem; }
@media (min-width: 640px) { .widget-band .wrap { padding: 0 1.5rem; } }

/* ---------------------------------------------------------------------
   Thank-you screen on /payment, shown in place of the card form once the
   server has the card (payment.html, showThanks). October 2026, laid out
   as the approved mockup: centred title and teal subhead, then the text.
   --------------------------------------------------------------------- */
.vj-site .vj-thanks {
  max-width: 50rem;
  margin: 1rem auto 3rem;
  padding: 2.5rem 2.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--body);
}
.vj-site .vj-thanks h1 {
  margin: 0 0 .5rem;
  font-family: var(--sans);
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  line-height: 1.25;
  font-weight: 400;
  color: var(--ink);
  text-align: center;
  letter-spacing: -0.01em;
}
.vj-site .vj-thanks .vj-thanks-sub {
  margin: 0 0 1.75rem;
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--teal);
  text-align: center;
}
.vj-site .vj-thanks p { margin: 0 0 1rem; }
.vj-site .vj-thanks h2 {
  margin: 1.75rem 0 .75rem;
  font-family: var(--sans);
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: normal;
}
.vj-site .vj-thanks ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.vj-site .vj-thanks li { margin: 0 0 .875rem; }
.vj-site .vj-thanks strong { color: var(--ink); }
.vj-site .vj-thanks a { color: var(--teal); font-weight: 600; }
.vj-site .vj-thanks .vj-thanks-end { margin: 1.75rem 0 0; }
@media (max-width: 560px) {
  .vj-site .vj-thanks { padding: 1.75rem 1.25rem; margin-top: .5rem; }
}