/*
 * Tax Guides section.
 *
 * Loaded on /tax-guides/ and every country guide beneath it. This lived in a <style> block
 * inside the page content until it was lifted out: the guide half was duplicated into all 88
 * generated pages, and an mu-plugin existed only to stop LPagery stripping it on each sync.
 *
 * Unlike the page-content version, this file may contain < and > freely.
 */

/* ---------------------------------------------------------------------------
 * Map page (3052) - #tax-map-widget
 * ------------------------------------------------------------------------- */

  /* Palette, type and spacing all defer to the theme's :root tokens. The literal
     fallbacks are the same values, for previewing this block without the theme. */
  #tax-map-widget {
    --brand: var(--color-primary, #355cde);
    --brand-hover: #1f3a8c;
    --ink: var(--color-gray-700, #272d35);
    --ink-strong: var(--color-primary-darker, #101828);
    --muted: var(--color-gray-500, #6a7282);
    --field-line: #cad5e2;
    --line: var(--color-gray-200, #e5e7eb);
    --surface-muted: var(--color-gray-100, #f3f4f6);
    width: 100%;
    font-family: inherit;
    color: var(--ink);
  }

  #tax-map-widget * { box-sizing: border-box; }

  /* The site header is fixed, 102px tall, and its template part takes up no space in the
     document, so page content starts underneath it. The site's own index pages clear it
     with 150px on their first section - see .resources-hero, `padding: 150px 0 96px` -
     so this page matches that. It has to be the page container that moves, not the
     widget, hence the reach up the tree. The :has() rule repeats it without the page id,
     so the clearance survives the page being duplicated; it is a separate rule because
     one unsupported selector would invalidate a whole comma-separated list.

     The gutter is here for the same reason. As a constrained block group the container
     was capped at the global 1280px content size with the theme's 24px global padding
     inside it, which left the widget 1232px wide and inset from the header and footer
     columns. The theme's own sections put the gutter on the full-width section and the
     1280px on an inner container, so that is what this does: the container spans the
     viewport and carries --container-padding, and .entry-content and the widget keep the
     1280px WordPress gives them, centred inside it. */
  body.page-id-3052 .content-container.page-content {
    max-width: none;
    padding-top: 150px;
    padding-left: var(--container-padding, 116px);
    padding-right: var(--container-padding, 116px);
  }

  body.page-id-3052 .entry-content {
    margin-top: 0;
  }

  body:has(#tax-map-widget) .content-container.page-content {
    max-width: none;
    padding-top: 150px;
    padding-left: var(--container-padding, 116px);
    padding-right: var(--container-padding, 116px);
  }

  body:has(#tax-map-widget) .entry-content {
    margin-top: 0;
  }

  #tax-map-widget .tax-guides-header {
    max-width: 900px;
    margin: 0 0 var(--spacing-xl, 32px);
  }

  #tax-map-widget .tax-guides-header h1 {
    margin: 0 0 12px;
    color: var(--ink-strong);
    font-size: var(--font-size-5xl, 42px);
    font-weight: 600;
    line-height: 1.15;
  }

  #tax-map-widget .tax-guides-lede {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-lg, 18px);
    line-height: 1.55;
  }

  /* Grouped onto a band so the three controls read as one toolbar instead of loose
     fields above the map. The theme's Resources filter row does this with a dark band;
     gray-50 is the equivalent on a white page. */
  #tax-map-widget .tax-map-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
    gap: 12px;
    margin-bottom: var(--spacing-lg, 24px);
    padding: var(--spacing-md, 16px);
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--line);
  }

  /* The small uppercase caption the theme uses for its stat and step labels. */
  #tax-map-widget label span,
  #tax-map-widget .tax-map-field-label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
  }

  #tax-map-widget .resources-filter-dropdown {
    min-width: 0;
    width: 100%;
  }

  #tax-map-widget .resources-filter-dropdown.is-enhanced .resources-filter-dropdown__inner {
    min-width: 0;
    width: 100%;
  }

  /* Metrics taken from the theme's filter controls: 51px tall, 16px text, gray-300
     hairline, square corners. */
  #tax-map-widget select,
  #tax-map-widget input {
    width: 100%;
    height: 51px;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-300, #d1d5dc);
    border-radius: var(--radius-sm, 0);
    background: #fff;
    color: var(--ink-strong);
    font-family: inherit;
    font-size: var(--font-size-base, 16px);
    line-height: 1.25;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  /* The native arrow is what gave these away as unstyled selects. This is the theme's
     own down-arrow.svg, inlined so the block does not depend on theme asset paths. */
  #tax-map-widget select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.833374 0.833008L5.83337 5.83301L10.8334 0.833008' stroke='%234A5565' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 7px;
    cursor: pointer;
  }

  #tax-map-widget input::placeholder {
    color: rgba(10, 10, 10, 0.5);
  }

  #tax-map-widget select:hover,
  #tax-map-widget input:hover {
    border-color: var(--color-gray-400, #99a1af);
  }

  /* Focus treatment copied from the theme's filter controls, which do use a ring. */
  #tax-map-widget select:focus,
  #tax-map-widget input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(53, 92, 222, 0.2);
  }

  /* The theme's filter row on the Resources archive ends with a primary Reset button -
     .resources-reset, 51px tall, 20px of padding, 16px text and a white cross - so this
     is that button. It sits on the bottom edge of the row because the three fields
     beside it carry captions above them. */
  #tax-map-widget .tax-filters-reset {
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 51px;
    padding: 0 20px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm, 0);
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: var(--font-size-base, 16px);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }

  #tax-map-widget .tax-filters-reset:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
  }

  #tax-map-widget .tax-filters-reset:disabled,
  #tax-map-widget .tax-filters-reset:disabled:hover {
    background: var(--color-gray-200, #e5e7eb);
    border-color: var(--color-gray-200, #e5e7eb);
    color: var(--muted);
    cursor: not-allowed;
  }

  #tax-map-widget .tax-filters-reset:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(53, 92, 222, 0.2);
  }

  #tax-map-widget .tax-filters-reset svg {
    display: block;
    flex-shrink: 0;
  }

  #tax-map-widget .country-search-wrap {
    position: relative;
  }

  #tax-map-widget .country-search-wrap label {
    display: block;
  }

  /* Mirrors the theme's .resources-filter-dropdown__listbox. */
  #tax-map-widget .country-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    margin: 2px 0 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-gray-300, #d1d5dc);
    border-radius: var(--radius-sm, 0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  #tax-map-widget .country-suggestions.is-open {
    display: block;
  }

  #tax-map-widget .country-suggestions li {
    margin: 0;
    padding: 10px 16px;
    color: var(--ink-strong);
    font-size: var(--font-size-base, 16px);
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
  }

  #tax-map-widget .country-suggestions li.is-active {
    background: var(--surface-muted);
    font-weight: 500;
  }

  #tax-map-widget .country-suggestions li strong {
    color: var(--brand);
    font-weight: 700;
  }

  #tax-map-widget .country-suggestions li.is-empty,
  #tax-map-widget .country-suggestions li.is-empty.is-active {
    background: none;
    color: var(--muted);
    font-weight: 400;
    cursor: default;
  }


  #tax-map-widget .tax-map-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--spacing-lg, 24px);
    align-items: start;
    min-height: 430px;
    background: #fff;
  }

  #tax-map {
    width: 100%;
    height: 520px;
    overflow: hidden;
  }

  #tax-map-widget .tax-map-panel {
    padding: var(--spacing-lg, 24px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 0);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, .05));
    color: var(--ink);
  }

  #tax-map-widget .tax-map-panel h3 {
    font-weight: 500;
  }

  /* What the fills mean. Blue is not a selection - it marks the countries that have a
     guide - and until now nothing on the page said so. The swatch colours repeat the
     literals in getCountryFill(), which amCharts needs as numbers; keep them in step. */
  #tax-map-widget .tax-map-count {
    margin: var(--spacing-md, 16px) 0 0;
    color: var(--ink);
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    line-height: 1.4;
  }

  #tax-map-widget .tax-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  #tax-map-widget .tax-map-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-sm, 14px);
    line-height: 1.4;
    list-style: none;
  }

  #tax-map-widget .tax-map-swatch {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .08);
  }

  #tax-map-widget .tax-map-swatch.is-available {
    background: #8eb0ec;
  }

  #tax-map-widget .tax-map-swatch.is-none {
    background: #e5e7eb;
  }

  #tax-map-widget .eyebrow {
    margin: 0 0 var(--spacing-sm, 8px);
    color: var(--brand);
    font-size: var(--font-size-xs, 12px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #tax-map-widget h3 {
    margin: 0 0 var(--spacing-sm, 8px);
    color: var(--ink-strong);
    font-size: var(--font-size-2xl, 24px);
    font-weight: 700;
    line-height: 1.25;
  }

  #tax-map-widget p {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-base, 16px);
    line-height: 1.5;
  }

  #tax-map-widget .tax-map-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 8px);
    margin: var(--spacing-md, 16px) 0 0;
  }

  #tax-map-widget .tax-map-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: var(--surface-muted);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 0);
    color: var(--ink-strong);
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    text-decoration: none;
  }

  #tax-map-widget a.tax-map-tag:hover {
    border-color: var(--brand);
    color: var(--brand);
  }

  #tax-map-widget .tax-map-ctas {
    display: grid;
    gap: var(--spacing-sm, 8px);
    margin-top: var(--spacing-md, 16px);
  }

  /* Same shape as the theme's .btn: square, 1px border, colour-only hover. */
  #tax-map-widget .tax-map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    border-radius: var(--radius-sm, 0);
    font-size: var(--font-size-base, 16px);
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition: all .2s;
  }

  #tax-map-widget .tax-map-link.primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff !important;
  }

  #tax-map-widget .tax-map-link.primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
  }

  #tax-map-widget .tax-map-link.secondary {
    background: transparent;
    border: 1px solid var(--color-primary-dark, #182537);
    color: var(--color-primary-dark, #182537);
  }

  #tax-map-widget .tax-map-link.secondary:hover {
    background: var(--color-primary-dark, #182537);
    color: #fff;
  }

  /* Follows the theme's own dialog, .taxpay-payment-options-overlay / -dialog:
     a neutral half-black scrim with no tint and no blur, and a square 560px panel. */
  /* This block sits inside the post content, where WordPress's constrained layout puts
     a max-width and "margin-left/right: auto !important" on every direct child, plus a
     24px block-gap margin on top. Those cap and centre a fixed element the same as any
     other, so inset: 0 was resolving to a 1280px column 24px down the page instead of
     the viewport, leaving the page visible down both sides. The !important is needed to
     outrank WordPress's own. */
  .tax-contact-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    max-width: none !important;
    margin: 0 !important;
    padding: var(--spacing-lg, 24px);
    font-family: var(--font-family, inherit);
  }

  .tax-contact-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tax-contact-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .tax-contact-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px 28px 28px;
    background: var(--color-white, #fff);
    border-radius: var(--radius-sm, 0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    color: var(--color-primary-darker, #101828);
    animation: taxModalIn .2s ease;
  }

  /* The theme's dialog fades; it does not slide or scale. */
  @keyframes taxModalIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .tax-contact-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 24px;
    top: 24px;
    width: 40px;
    height: 40px;
    background: var(--color-gray-100, #f3f4f6);
    border: none;
    border-radius: var(--radius-sm, 0);
    color: var(--color-gray-800, #364153);
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }

  .tax-contact-close:hover {
    background: var(--color-gray-200, #e5e7eb);
    color: var(--color-primary-darker, #101828);
  }

  .tax-contact-eyebrow {
    margin: 0 0 var(--spacing-sm, 8px);
    color: var(--color-primary, #355cde);
    font-size: var(--font-size-xs, 12px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #tax-contact-title {
    margin: 0 52px 4px 0;
    color: var(--color-primary-darker, #101828);
    font-size: var(--font-size-xl, 20px);
    font-weight: 600;
    line-height: 1.3;
  }

  #tax-contact-message {
    margin: 0;
    color: var(--color-gray-500, #6a7282);
    font-size: var(--font-size-base, 16px);
    line-height: 1.5;
  }

  .tax-contact-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 8px);
    width: 100%;
    min-height: 52px;
    margin-top: var(--spacing-lg, 24px);
    padding: 14px 20px;
    background: var(--color-primary, #355cde);
    border: 1px solid var(--color-primary, #355cde);
    border-radius: var(--radius-sm, 0);
    color: #fff !important;
    font-size: var(--font-size-base, 16px);
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none;
    transition: all .2s;
  }

  .tax-contact-cta:hover {
    background: #1f3a8c;
    border-color: #1f3a8c;
  }

  .tax-contact-cta span {
    font-size: 18px;
    line-height: 1;
  }


  @media (max-width: 800px) {
    /* The fixed header collapses to 69px here, so it needs less clearance. The
       heading needs no override: the theme already steps --font-size-5xl down to
       36px below 1200px and 28px below 768px. */
    body.page-id-3052 .content-container.page-content { padding-top: 100px; }
    body:has(#tax-map-widget) .content-container.page-content { padding-top: 100px; }
    #tax-map-widget .tax-map-controls { grid-template-columns: 1fr; }
    #tax-map-widget .tax-filters-reset { width: 100%; margin-top: 4px; }
    #tax-map { height: 420px; }
    #tax-map-widget .tax-map-shell {
      grid-template-columns: minmax(0, 1fr);
    }
  }

/* ---------------------------------------------------------------------------
 * Country guide template (3145) and the 88 pages generated from it - .vat-*
 * ------------------------------------------------------------------------- */

/* Tokens come from the theme's :root, with fallbacks so the block still renders on its own.
   Declared here rather than on :root: a page's stylesheet should not name variables for the
   whole document. */
.vat-guide {
  --vat-brand: var(--color-primary, #355cde);
  --vat-brand-hover: #1f3a8c;
  --vat-ink: var(--color-primary-darker, #101828);
  --vat-navy: var(--color-primary-dark, #182537);
  --vat-body: var(--color-gray-700, #272d35);
  --vat-muted: var(--color-gray-500, #6a7282);
  --vat-line: var(--color-gray-200, #e5e7eb);
  --vat-line-strong: var(--color-gray-300, #d1d5dc);
  --vat-surface: var(--color-gray-50, #f9fafb);
  --vat-teal: var(--color-success, #00bba7);
  --vat-teal-ink: var(--color-success-dark, #00786f);
  --vat-radius: var(--radius-sm, 0);
  --vat-gutter: var(--container-padding, 116px);

  font-family: inherit;
  color: var(--vat-body);
  background: var(--vat-surface);
  line-height: 1.5;

  /* The block editor's constrained layout caps children at the content width. The guide
     supplies its own containers, so it opts out and runs edge to edge like every other
     hero on the site. */
  max-width: none;
  margin: 0;
}

/* The theme prints the post title above the content, which on these pages duplicates the
   hero heading and lands behind the fixed header. The hero heading is the one to keep. */
body:has(.vat-guide) .wp-block-post-title {
  display: none;
}

body:has(.vat-guide) .content-container.page-content {
  max-width: none;
  padding: 0;
}

body:has(.vat-guide) .entry-content {
  max-width: none;
  margin-top: 0;
}

/* The theme's pattern, measured off .resources-hero: the section carries the gutter as a
   minimum, and the container inside it is a plain 1280px column. Putting the gutter on the
   container instead would inset the guide 116px further than every other page. */
.vat-container {
  max-width: var(--container-max-width, 1280px);
  margin: 0 auto;
}

.vat-hero {
  background: linear-gradient(180deg, var(--vat-navy) 0%, #324d71 100%);
  color: #fff;
  /* Top padding clears the fixed header, as the theme's own heroes do. */
  padding: 150px var(--vat-gutter) 96px;
}

.vat-breadcrumbs {
  font-size: var(--font-size-sm, 14px);
  color: rgba(255, 255, 255, .7);
  padding: 0 0 32px;
}

.vat-breadcrumbs a {
  color: #fff;
  text-decoration: none;
}

.vat-breadcrumbs a:hover {
  text-decoration: underline;
}

.vat-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--spacing-2xl, 48px);
  align-items: start;
}

.vat-eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs, 12px);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-gray-300, #d1d5dc);
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: var(--spacing-sm, 8px);
  margin-bottom: var(--spacing-md, 16px);
}

.vat-hero h1 {
  color: #fff;
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-weight: 400;
  max-width: 720px;
  margin: 0 0 var(--spacing-lg, 24px);
}

.vat-hero p {
  max-width: 680px;
  font-size: var(--font-size-xl, 20px);
  line-height: 1.625;
  color: #fff;
  margin: 0 0 var(--spacing-xl, 32px);
}

.vat-buttons {
  display: flex;
  gap: var(--spacing-lg, 24px);
  flex-wrap: wrap;
}

/* .btn.btn-large, as the homepage banner uses: 18px text held in 18px by 24px of padding. */
.vat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 8px);
  height: 65px;
  padding: 18px var(--spacing-lg, 24px);
  border-radius: var(--vat-radius);
  font-size: var(--font-size-lg, 18px);
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  transition: all .2s;
}

/* The theme places this as an img in the markup. As a background it needs no change to the
   template's HTML, and the path stays root-relative so it holds on any host. */
.vat-btn::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("/wp-content/themes/desucla/assets/images/button-arrow.svg") center / contain no-repeat;
}

/* The arrow is drawn white. On hover the outline button fills with white, so it has to darken
   with the label - the same filter the theme uses on .btn-outline-white:hover .btn-arrow. */
.vat-btn-secondary:hover::after {
  filter: brightness(0) saturate(100%) invert(14%) sepia(13%) saturate(1026%) hue-rotate(178deg) brightness(94%) contrast(90%);
}

.vat-btn-primary {
  background: var(--vat-brand);
  color: #fff;
  border: 1px solid var(--vat-brand);
}

.vat-btn-primary:hover {
  background: var(--vat-brand-hover);
  border-color: var(--vat-brand-hover);
}

.vat-btn-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.vat-btn-secondary:hover {
  background: #fff;
  color: var(--vat-ink);
}

.vat-help-card {
  align-self: start;
  background: #fff;
  border-radius: var(--vat-radius);
  padding: 28px 33px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  color: var(--vat-body);
}

.vat-help-card h3 {
  margin: 0 0 var(--spacing-sm, 8px);
  color: var(--vat-ink);
  font-size: var(--font-size-2xl, 24px);
  line-height: 1.2;
  font-weight: 500;
}

.vat-help-card p {
  font-size: var(--font-size-base, 16px);
  color: var(--vat-body);
  margin: 0 0 var(--spacing-md, 16px);
}

.vat-help-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg, 24px);
}

.vat-help-card li {
  margin-bottom: var(--spacing-sm, 8px);
  font-size: var(--font-size-base, 16px);
}

.vat-help-card li::before {
  content: "✓";
  color: var(--vat-teal);
  font-weight: 700;
  margin-right: var(--spacing-sm, 8px);
}

.vat-help-card .vat-btn {
  width: 100%;
}

.vat-help-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.vat-help-services:empty {
  display: none;
}

.vat-help-service {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--vat-surface);
  border: 1px solid var(--vat-line-strong);
  color: var(--vat-ink);
  font-size: var(--font-size-sm, 14px);
  text-decoration: none;
}

.vat-help-service:hover {
  border-color: var(--vat-brand);
  color: var(--vat-brand);
}

/* The review bar rides up over the join between the hero and the page. */
.vat-trust {
  margin-top: -48px;
  padding: 0 var(--vat-gutter);
  position: relative;
  z-index: 5;
}

.vat-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  border: 1px solid var(--vat-line-strong);
  border-radius: var(--vat-radius);
  overflow: hidden;
}

.vat-trust-item {
  padding: var(--spacing-lg, 24px);
  border-right: 1px solid var(--vat-line);
}

.vat-trust-item:last-child {
  border-right: 0;
}

.vat-label {
  display: block;
  font-size: var(--font-size-xs, 12px);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--vat-muted);
  margin-bottom: var(--spacing-xs, 4px);
}

.vat-value {
  display: block;
  font-size: var(--font-size-sm, 14px);
  color: var(--vat-ink);
  font-weight: 500;
}

.vat-disclaimer {
  background: #fff;
  border: 1px solid var(--vat-line);
  border-left: 4px solid var(--vat-brand);
  border-radius: var(--vat-radius);
  padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
  font-size: var(--font-size-sm, 14px);
  color: var(--vat-body);
  margin-top: var(--spacing-md, 16px);
}

.vat-disclaimer strong {
  color: var(--vat-ink);
}

/* Half a section above, a full one below. .vat-trust has no bottom padding, so the
   disclaimer ends on the boundary and the cards either side of it sit in one continuous
   white flow - a full 96px there read as a hole rather than as a new section. 48px is the
   same step the trust bar uses to overlap the hero. */
.vat-main {
  padding: var(--spacing-2xl, 48px) var(--vat-gutter) var(--section-padding, 96px);
}

/* stretch, so the two cards share the height of the taller one and square off along the
   bottom. Recent changes is the taller on every two-column guide, so At a glance is the
   one that grows, and the height it gains shows as space under its last row. */
.vat-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--spacing-lg, 24px);
  align-items: stretch;
}

.vat-card {
  background: #fff;
  border: 1px solid var(--vat-line-strong);
  border-radius: var(--vat-radius);
  padding: var(--spacing-xl, 32px);
}

.vat-card h2 {
  color: var(--vat-ink);
  font-size: var(--font-size-2xl, 24px);
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 var(--spacing-lg, 24px);
}

.vat-glance-table {
  width: 100%;
  border-collapse: collapse;
}

.vat-glance-table tr:nth-child(even) {
  background: var(--vat-surface);
}

.vat-glance-table td {
  padding: var(--spacing-md, 16px);
  vertical-align: top;
  font-size: var(--font-size-base, 16px);
  border-bottom: 1px solid var(--vat-line);
}

.vat-glance-table tr:last-child td {
  border-bottom: 0;
}

/* As wide as the longest label and no wider, so each value sits beside its label rather than
   across a 100px channel from it. A collapsed table gives a cell at least its content's width,
   so a nominal 1px plus nowrap resolves to exactly that. */
.vat-glance-table td:first-child {
  width: 1px;
  white-space: nowrap;
  color: var(--vat-ink);
  font-weight: 500;
}

.vat-change {
  border-bottom: 1px solid var(--vat-line);
  padding: 0 0 var(--spacing-lg, 24px);
  margin-bottom: var(--spacing-lg, 24px);
}

.vat-change:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.vat-badge {
  display: inline-block;
  background: rgba(0, 187, 167, .12);
  color: var(--vat-teal-ink);
  font-size: var(--font-size-xs, 12px);
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: var(--spacing-xs, 4px) 12px;
  border-radius: var(--vat-radius);
  margin-bottom: var(--spacing-sm, 8px);
}

.vat-badge.updated {
  background: rgba(53, 92, 222, .1);
  color: var(--vat-brand);
}

.vat-change h3 {
  color: var(--vat-ink);
  font-size: var(--font-size-lg, 18px);
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 var(--spacing-sm, 8px);
}

.vat-change p {
  font-size: var(--font-size-base, 16px);
  color: var(--vat-body);
  margin: 0;
}

/* A change entry needs a summary to be shown. That hides the entries which are nothing but a
   badge, and the "No recent change" placeholder that 28 of the guides carry in place of one. */
.vat-change:has(p:empty) {
  display: none;
}

/* With no entry left to show, the panel goes and At a glance takes the whole width. */
.vat-content-grid aside.vat-card:not(:has(.vat-change p:not(:empty))) {
  display: none;
}

.vat-content-grid:not(:has(.vat-change p:not(:empty))) {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1024px) {
  .vat-hero {
    padding: 120px var(--vat-gutter) 72px;
  }

  .vat-hero-grid,
  .vat-content-grid,
  .vat-trust-grid {
    grid-template-columns: 1fr;
  }

  .vat-help-card {
    margin-top: var(--spacing-lg, 24px);
  }

  .vat-trust-item {
    border-right: 0;
    border-bottom: 1px solid var(--vat-line);
  }

  .vat-trust-item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 768px) {
  .vat-hero {
    padding: 104px var(--vat-gutter) 64px;
  }

  .vat-hero h1 {
    font-size: 44px;
    letter-spacing: -1px;
  }

  .vat-buttons {
    gap: 12px;
  }

  .vat-btn {
    width: 100%;
    font-size: var(--font-size-base, 16px);
  }

  .vat-glance-table td {
    display: block;
    width: 100%;
  }

  .vat-glance-table td:first-child {
    /* Stacked above its value the label has the whole card, and needs to be free to wrap: the
       nowrap that sizes the column on wider screens would run a long label off the edge. */
    width: auto;
    white-space: normal;
    padding-bottom: 0;
    border-bottom: 0;
  }
}