/* Our own corrections to the designer's styles. This file lives in app/site/source, so a new import of the
   designer's package copies it over again instead of replacing it; every page loads it after its own styles. */

:root {
  --vg-mark-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1165 1126' fill='%23fff'%3E%3Cpath d='M884.085 576.903L1079.39 461.541L1165 125.794L1088.08 171.226C1015.75 213.951 962.779 284.104 940.635 366.496L884.085 576.903Z'/%3E%3Cpath d='M623.624 115.362L818.931 0L1145.94 92.0231L1069.03 137.455C996.694 180.18 910.823 192.038 830.007 170.462L623.624 115.362Z'/%3E%3Cpath d='M541.376 118.916L346.069 3.55382L19.0581 95.577L95.9731 141.009C168.306 183.734 254.177 195.592 334.993 174.016L541.376 118.916Z'/%3E%3Cpath d='M280.915 580.457L85.6087 465.094L0 129.348L76.915 174.78C149.248 217.505 202.221 287.658 224.365 370.05L280.915 580.457Z'/%3E%3Cpath d='M325.048 651.552L325.048 882.277L566.45 1126L566.45 1035.14C566.45 949.687 533.552 867.675 474.88 806.859L325.048 651.552Z'/%3E%3Cpath d='M845.969 651.552L845.969 882.277L604.566 1126L604.566 1035.14C604.566 949.687 637.464 867.675 696.136 806.859L845.969 651.552Z'/%3E%3C/svg%3E");
  --vg-mark-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1165 1126' fill='%230A1B56'%3E%3Cpath d='M884.085 576.903L1079.39 461.541L1165 125.794L1088.08 171.226C1015.75 213.951 962.779 284.104 940.635 366.496L884.085 576.903Z'/%3E%3Cpath d='M623.624 115.362L818.931 0L1145.94 92.0231L1069.03 137.455C996.694 180.18 910.823 192.038 830.007 170.462L623.624 115.362Z'/%3E%3Cpath d='M541.376 118.916L346.069 3.55382L19.0581 95.577L95.9731 141.009C168.306 183.734 254.177 195.592 334.993 174.016L541.376 118.916Z'/%3E%3Cpath d='M280.915 580.457L85.6087 465.094L0 129.348L76.915 174.78C149.248 217.505 202.221 287.658 224.365 370.05L280.915 580.457Z'/%3E%3Cpath d='M325.048 651.552L325.048 882.277L566.45 1126L566.45 1035.14C566.45 949.687 533.552 867.675 474.88 806.859L325.048 651.552Z'/%3E%3Cpath d='M845.969 651.552L845.969 882.277L604.566 1126L604.566 1035.14C604.566 949.687 637.464 867.675 696.136 806.859L845.969 651.552Z'/%3E%3C/svg%3E");
}

/* ---------- Buttons: the hover gradient reaches the rounded edges. It was drawn inside the 1px border and
   repeated under it, which left a sliver of its far end at each edge. The hover rules set the whole
   background, so the correction goes on the same rules. */
.btn--primary:hover, .btn--light:hover, .btn--white:hover, .btn--ghost-dark.to-grad:hover { background-origin: border-box; }
.btn--light:hover { border-color: transparent; }

/* ---------- Guides and legal pages: the contents list sits beside the text instead of at the far side */
.a-layout { grid-template-columns: 250px minmax(0, 820px); justify-content: start; gap: clamp(40px, 5vw, 80px); }
@media (max-width: 1000px) { .a-layout { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact: the icons in the navy circles are white, not the grey of the line beside them */
.way .way__icon { color: #fff; }

/* ---------- Product: the app screenshot hangs below the end of the hero's background. The designer moved it
   down with a transform, which the scroll-in animation resets to none once it has played, so the screenshot
   ended level with the background. Instead the background now stops short of the screenshot's bottom (a negative
   margin), which the animation leaves be and which keeps the space above the screenshot as it was. */
.p-hero { display: flow-root; }
.p-hero__shot { margin-bottom: calc(-1 * clamp(48px, 7vw, 110px)); }
.p-hero__shot:not(.is-in) { transform: translateY(24px); }
.no-js .p-hero__shot:not(.is-in) { transform: none; }
@media (prefers-reduced-motion: reduce) { .p-hero__shot:not(.is-in) { transform: none; } }
.p-hero-after { height: clamp(48px, 7vw, 110px); }

/* ---------- Product: the capability cards in rows of three, so no row ends with gaps */
.caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .caps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- How it works: the arrows between the two rounds' cards, 1px further left so they sit centred in the gap */
.rounds li:not(:last-child)::after { right: -12px; }

/* ---------- App screens: the Searches list keeps room for its longest status. Each row is a grid of its own,
   so the columns beside the flexible ones are fixed widths, the same in every row and in the heading, the last
   one each row's menu. Narrow screens keep the designer's two-column rows. */
@container hm (width > 600px) {
  .app-mock .hmx-shead, .app-mock .hmx-srow { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 112px 76px 52px 12px; }
  .app-mock .hmx-srow .hm-btn { justify-self: end; }
  .app-mock .hmx-srow .hm-chip { justify-self: start; }
}

/* ---------- Notices in Valigard's colours: the product disclaimer, guide callouts and legal draft notes.
   A soft sky-to-lime card with the brand gradient along its edge and the Valigard mark in a navy tile. */
.disclaimer, .a-body .admonition {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, #EAF6FE 0%, #F5FAFE 55%, #F6FCE4 100%);
  border: 1px solid #D3E8F8;
}
.disclaimer::before, .a-body .admonition::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--sky), var(--lime));
}
.disclaimer { padding: 28px 34px 28px 32px; gap: 22px; }
.disclaimer > svg { display: none; }
.disclaimer::after {
  content: ""; order: -1; flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--navy) var(--vg-mark-white) center / 24px no-repeat;
  box-shadow: 0 10px 24px rgba(10, 27, 86, .16);
}
.disclaimer h2 { color: var(--navy); }

.a-body .admonition { padding: 20px 24px 20px 78px; }
.a-body .admonition::after {
  content: ""; position: absolute; left: 24px; top: 20px; width: 38px; height: 38px; border-radius: 11px;
  background: var(--navy) var(--vg-mark-white) center / 20px no-repeat;
  box-shadow: 0 8px 20px rgba(10, 27, 86, .14);
}
.a-body .admonition .admonition-title { color: var(--navy); line-height: 1.4; min-height: 24px; }
.a-body .admonition.tip { background: linear-gradient(115deg, #F1FAD9 0%, #F8FCEE 60%, #F3F9FE 100%); border-color: #DCEFB0; }
.a-body .admonition.tip::after { background-color: var(--lime); background-image: var(--vg-mark-navy); box-shadow: none; }
.a-body .admonition.warning { background: linear-gradient(115deg, #EAF6FE 0%, #F5FAFE 50%, #F2FBD8 100%); border-color: #CFE5F6; }
.a-body .admonition.warning .admonition-title { color: var(--navy); }

@media (max-width: 640px) {
  .disclaimer { padding: 22px 22px 22px 24px; gap: 16px; }
  .disclaimer::after { width: 38px; height: 38px; border-radius: 11px; background-size: 20px; }
  .a-body .admonition { padding: 18px 18px 18px 64px; }
  .a-body .admonition::after { left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 9px; background-size: 17px; }
}

/* ---------- App screens: amounts are written in credits ("-164 credits", "+5,000 credits"), longer than the
   dollar figures their columns were sized for, so each stays on one line and its column fits it. */
.app-mock .hmx-bhead, .app-mock .hmx-brow { grid-template-columns: 78px minmax(0, 1fr) auto; }
.app-mock .hmx-brow b, .app-mock .hmx-trow > b { white-space: nowrap; }
@container hm (width<=480px) { .app-mock .hmx-brow { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- App screens drawn by hand (Home, Team activity, Billing, Searches; app/site/source/mocks), brought up
   to the platform in October 2026: the styles of what they gained. The help marks beside headings and lines are
   the app's small question marks. */
.app-mock .hm-i.hmx-help, .app-mock .hmx-h .hm-i.hmx-help { width: 10px; height: 10px; color: var(--hm-muted); }
/* In a line of text, the mark follows its last word. */
.app-mock .hm-top-purpose .hm-i.hmx-help, .app-mock .hmx-shead .hm-i.hmx-help { display: inline-block; margin-left: 2px; vertical-align: -1px; }

/* Home: Customize above the widgets, then Your products, a card for each with its four figures */
.app-mock .hmx-customize { display: flex; width: max-content; align-items: center; gap: 4px; color: var(--hm-blue); font-size: 10px; font-weight: 600; }
.app-mock .hmx-customize .hm-i { width: 11px; height: 11px; }
.app-mock .hmx-products { padding: 13px 16px 14px; }
.app-mock .hmx-products-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.app-mock .hmx-products-head .hmx-h { margin: 0; }
.app-mock .hmx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app-mock .hmx-card {
  container: hmx-card / inline-size; display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 10px; border: 1px solid var(--hm-line); border-radius: 10px; background: #fff;
}
.app-mock .hmx-card.is-attention { border-color: var(--hm-amber-line); }
.app-mock .hmx-card-head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.app-mock .hmx-card-thumb { width: 34px; height: 34px; border: 1px solid var(--hm-line); border-radius: 8px; background: #fff; box-sizing: border-box; }
.app-mock .hmx-card-name { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.app-mock .hmx-card-name b { max-width: 100%; overflow: hidden; color: var(--hm-ink); font-size: 10.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.app-mock .hmx-card-line { color: var(--hm-muted); font-size: 9px; line-height: 1.4; }
.app-mock .hmx-figures {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 6px 8px;
  padding-top: 7px; border-top: 1px solid var(--hm-line);
}
.app-mock .hmx-figures span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-mock .hmx-figures b { color: var(--hm-ink); font-size: 12.5px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app-mock .hmx-figures small { color: var(--hm-muted); font-size: 8.5px; line-height: 1.25; }
.app-mock .hmx-card .hm-btn { align-self: flex-start; margin-top: auto; }
@container hmx-card (width < 200px) { .app-mock .hmx-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container hm (width <= 760px) {
  .app-mock .hmx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-mock .hmx-card:nth-child(3) { display: none; }
}
@container hm (width <= 480px) {
  .app-mock .hmx-cards { grid-template-columns: minmax(0, 1fr); }
  .app-mock .hmx-card:nth-child(2) { display: none; }
}

/* Team activity: the AI check's accuracy on one line with its product filter; each person's credits and a link
   to their activity; the log's filters, a band for each day, and an icon for each kind of event */
.app-mock .hmx-accuracy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.app-mock .hmx-accuracy .hmx-h { margin: 0; }
.app-mock .hmx-accuracy p { display: inline-flex; align-items: center; gap: 4px; }
.app-mock .hmx-acc-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.app-mock .hmx-person > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.app-mock .hmx-thead, .app-mock .hmx-trow {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .9fr) minmax(0, .6fr) minmax(0, .6fr) minmax(0, 1fr) minmax(0, .95fr) auto;
}
.app-mock .hmx-thead > span { white-space: nowrap; }
.app-mock .hmx-thead > :not(:first-child), .app-mock .hmx-trow > :not(:first-child) { text-align: right; }
.app-mock .hmx-trow > .hm-link { justify-self: end; padding-left: 4px; }
.app-mock .hmx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.app-mock .hmx-day { margin: 0 -16px; padding: 5px 16px; background: var(--hm-wash); border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.app-mock .hmx-day + .hmx-log { padding-top: 7px; }
.app-mock .hmx-log:has(+ .hmx-day) { border-bottom: 0; }
.app-mock .hmx-log-text { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.app-mock .hmx-log-text > .hm-i { flex: none; width: 10px; height: 10px; color: var(--hm-muted); transform: translateY(1px); }
.app-mock .hmx-log .hm-chip .hm-i { width: 8px; height: 8px; }
@container hm (width <= 600px) {
  .app-mock .hmx-thead, .app-mock .hmx-trow { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .9fr); }
  .app-mock .hmx-thead > :is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8)),
  .app-mock .hmx-trow > :is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8)) { display: none; }
  .app-mock .hmx-acc-tools .hm-filter { display: none; }
}
@container hm (width <= 480px) {
  .app-mock .hmx-trow { grid-template-columns: minmax(0, 1fr) auto; }
  .app-mock .hmx-acc-tools { display: none; }
  .app-mock .hmx-log-text > .hm-i { display: none; }
}

/* Billing: a page of its own, as in the app: the balance in credits, the amounts to add in credits with their
   dollars, this month's spending, and the history in a table with its CSV */
.app-mock .hmx-billing { gap: 0; max-width: 600px; }
.app-mock .hmx-bsec { padding: 12px 0; border-bottom: 1px solid var(--hm-line); }
.app-mock .hmx-bsec:first-child { padding-top: 2px; }
.app-mock .hmx-bsec.hmx-hist { border-bottom: 0; }
.app-mock .hmx-bal .hmx-amount { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.app-mock .hmx-bal .hmx-amount b { margin: 0; }
.app-mock .hmx-blabel { margin-bottom: 5px; color: var(--hm-ink); font-size: 9.5px; font-weight: 600; }
.app-mock .hmx-amounts { flex-wrap: wrap; margin-bottom: 6px; }
.app-mock .hmx-amounts span { padding: 5px 10px; border-radius: 999px; background: #fff; font-weight: 500; white-space: nowrap; }
.app-mock .hmx-amounts b { font-weight: 600; }
.app-mock .hmx-amounts .is-on { border-color: var(--hm-navy); background: var(--hm-navy); box-shadow: none; color: #fff; }
.app-mock .hmx-fine + .hmx-pay { margin-top: 8px; }
.app-mock .hmx-spent { margin: 0 0 8px; color: var(--hm-ink); font-size: 10.5px; font-weight: 600; }
.app-mock .hmx-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.app-mock .hmx-usage > div { display: grid; align-content: start; gap: 3px; }
.app-mock .hmx-usage-h { margin-bottom: 1px; color: var(--hm-muted); font-size: 9px; font-weight: 600; }
.app-mock .hmx-fact { display: flex; justify-content: space-between; gap: 8px; color: var(--hm-body); font-size: 10px; }
.app-mock .hmx-fact b { color: var(--hm-ink); font-weight: 600; white-space: nowrap; }
.app-mock .hmx-hist-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.app-mock .hmx-hist-head .hmx-h { margin: 0; }
.app-mock .hmx-btable { overflow: hidden; border: 1px solid var(--hm-line); border-radius: 10px; background: #fff; }
.app-mock .hmx-btable .hmx-bhead { border-radius: 0; }
.app-mock .hmx-btable .hmx-brow:last-child { border-bottom: 0; }
.app-mock .hmx-blink { display: block; margin-top: 2px; color: var(--hm-blue); font-size: 9px; font-weight: 600; }
.app-mock .hmx-bchip { margin-top: 3px; }
@container hm (width <= 480px) {
  .app-mock .hmx-usage { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .app-mock .hmx-hist-head .hm-link { display: none; }
}

/* Searches: the product filter beside the tabs, each row's menu, and the review bar in the app's colours
   (blue, and green once every listing is reviewed) */
.app-mock .hmx-stools { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.app-mock .hmx-stools .hm-filter { margin-bottom: 4px; }
/* Where a search looked and what it read wraps, as in the app, rather than stopping at the first country. */
.app-mock .hmx-sname small, .app-mock .hmx-sprod { white-space: normal; }
.app-mock .hmx-shead > span { white-space: nowrap; }
.app-mock .hmx-smenu { display: inline-flex; justify-content: center; color: var(--hm-muted); }
.app-mock .hmx-smenu .hm-i { width: 12px; height: 12px; }
.app-mock .hmx-row-prog i { background: linear-gradient(90deg, var(--hm-blue) var(--p), var(--hm-line) var(--p)); }
.app-mock .hmx-row-prog.is-full i { background: #8DB828; }
@container hm (width <= 600px) {
  .app-mock .hmx-smenu, .app-mock .hmx-stools .hm-filter { display: none; }
}

/* ---------- Footer: Cookie settings, a button among the legal links (static/js/consent.js opens it), drawn as one */
.footer__legal .footer__cookie-settings { padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
.footer__legal .footer__cookie-settings:hover { color: var(--sky); }
.footer__legal .footer__cookie-settings:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 2px; }

/* ---------- The cookie policy's button to the settings, in the legal pages' text */
.a-body .vg-cookie-page-settings { margin-top: 4px; }

/* ---------- The boxes in the sidebar of guides and legal pages
   The table of contents' link rule (.a-toc a, article.css: grey, a block set 16px in) reached the links in these boxes
   too: the guides' "Run your first search free" had grey words, set left and high in the button, and the legal pages'
   contact address stood 16px in from the rest of its box. */
.a-toc__cta .btn { display: inline-flex; margin: 0; padding: 0 14px; border: 1px solid transparent; color: #fff; line-height: 1.2; }
.a-toc__cta .btn:hover { color: var(--navy); }
.a-toc .lg-contact a { display: inline; margin: 0; padding: 0; border: 0; }

/* ---------- The header's switch to the page in the other language (globe and EN/FR), as on the homepage (.vg-lang).
   On a phone it gives way to the menu's own link to the other language. */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  color: var(--navy); font-size: 15px; font-weight: 600; letter-spacing: .02em; text-decoration: none; }
.lang-switch:hover { background: rgba(10, 27, 86, .06); }
.lang-switch:focus-visible { outline: 2px solid var(--sky, #77C7FA); outline-offset: 2px; }
.lang-switch svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 420px) { .site-header__actions .lang-switch { display: none; } }

/* ---------- The header's menu in French: its longer labels ("Places de marché") stay on one line, with less room
   between them where the line is short, rather than wrapping under their chevron. */
.nav__link { white-space: nowrap; }
@media (max-width: 1360px) { html[lang="fr"] .nav { gap: 14px 22px; } }
@media (max-width: 1200px) { html[lang="fr"] .nav { gap: 14px 16px; font-size: 17px; } html[lang="fr"] .nav__link { font-size: 17px; } }