/* Site chrome: announcement bar, glass nav pill with mega menus (a drawer below 1100px), footer on the
   mirrored gradient, the bottom dock and the cookie card. Colours come from tokens.css.
   Behaviour lives in assets/site/site.js (menus, dock) and app.js (drawer toggle). */
html { scroll-padding-bottom: 96px; }

/* Announcement */
.announce { position: relative; z-index: 110; background: var(--ink); color: var(--on-ink); font-size: 14px; line-height: 1.44; }
.announce-link { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px var(--gutter); text-align: center; }
.announce-badge { flex: none; padding: 2px 10px; border: 1px solid var(--announce-line); border-radius: var(--r-pill); color: var(--grad-1); font-size: 12px; font-weight: 500; }
.announce-link .i { flex: none; transition: transform var(--base) var(--enter); }
.announce-link:hover .i { transform: translateX(3px); }
.announce-link:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 3px var(--line-accent); }
.announce-short { display: none; }
@media (max-width: 640px) {
  .announce-full { display: none; }
  .announce-short { display: inline; }
}

/* Header: a floating glass pill. It overlaps the top of the hero by its own height. */
.site-header { position: sticky; top: 12px; z-index: 100; height: 64px; margin: 12px 0 -76px; padding-inline: var(--gutter); pointer-events: none; }
.nav-shell {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px;
  max-width: var(--w-default); height: 64px; margin-inline: auto; padding: 0 10px 0 20px; pointer-events: auto;
}
/* The glass lives on a pseudo-element, so the menus inside can blur the page themselves. */
.nav-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--glass-border); border-radius: var(--r-nav);
  background: var(--glass-nav); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: var(--shadow-nav);
}
.brand { display: flex; align-items: center; flex: none; padding: 4px 0; border-radius: var(--r-small); }
.brand-logo img { width: 112px; }
/* Once per session (.brand-in, set in the head by render.mjs: the first page of a visit and a reload), the wordmark
   springs into the nav: it drops in from just above, overshoots a little and settles (under a second). With the
   homepage intro it lands right after the nav (home.css). Gone with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .brand-in .site-header .brand-logo { transform-origin: 18% 70%; animation: brand-in .9s .12s both; }
}
@keyframes brand-in {
  0% { opacity: 0; transform: translateY(-14px) scale(.8) rotate(-5deg); filter: blur(3px); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  55% { opacity: 1; transform: translateY(2px) scale(1.05) rotate(1deg); filter: blur(0); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
  80% { transform: translateY(0) scale(.985) rotate(0deg); }
  100% { opacity: 1; transform: none; filter: none; }
}

.nav-menu { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item > a, .nav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px;
  border-radius: var(--r-pill); color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background var(--fast);
}
.nav-item > a:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: var(--wash); }
.nav-trigger .i { color: var(--ink-muted); transition: transform var(--base) var(--enter); }
.nav-trigger[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav-item > a[aria-current]::after, .has-menu.is-current > .nav-trigger::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent);
}
.has-menu.is-current > .nav-trigger::after { margin-left: -10px; }

/* Mega menu: one column of parts, a short intro with the overview link beside it. */
.has-menu { position: static; }
.nav-panel {
  position: absolute; z-index: 1; top: calc(100% + 8px); left: 50%; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px;
  width: min(680px, 100%); padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--glass-solid); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--shadow-menu);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity var(--base) var(--enter), transform var(--base) var(--enter), visibility 0s linear var(--base);
}
.nav-trigger[aria-expanded="true"] + .nav-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav-panel-list { display: grid; gap: 2px; }
.menu-card { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--r-tile); transition: background var(--fast); }
.menu-card:hover, .menu-card[aria-current] { background: var(--panel); }
.menu-card-icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--hue-soft, var(--line)); border-radius: 12px;
  background: var(--hue-soft, var(--canvas)); color: var(--hue, var(--ink)); transition: color var(--fast), border-color var(--fast);
}
.menu-card:hover .menu-card-icon, .menu-card[aria-current] .menu-card-icon { border-color: var(--hue, var(--line-accent)); }
.menu-card-text { display: grid; gap: 1px; min-width: 0; }
.menu-card-text b { font-size: 15px; font-weight: 500; }
.menu-card-text span { font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); }
.nav-panel-intro { display: flex; flex-direction: column; align-self: start; gap: 6px; padding: 18px; border-radius: var(--r-tile); background: var(--panel); }
.nav-panel-intro b { font-size: 15px; font-weight: 500; }
.nav-panel-intro p { font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }
.nav-panel-all { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin-top: 6px; font-size: 14px; font-weight: 500; }
.nav-panel-all .i { color: var(--accent); transition: transform var(--base) var(--enter); }
.nav-panel-all:hover .i { transform: translateX(3px); }
.nav-drawer-foot { display: none; }

/* Header right */
.header-right { display: flex; align-items: center; gap: 8px; flex: none; }
.language-switch { display: flex; align-items: center; padding: 2px; border-radius: var(--r-pill); font-size: 13px; font-weight: 500; }
.language-current, .language-link { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-pill); }
.language-current { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-tab); }
.language-link { color: var(--ink-muted); transition: color var(--fast), background var(--fast); }
.language-link:hover { color: var(--ink); background: var(--wash); }
.header-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-button);
  background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background var(--fast), transform var(--fast) var(--enter);
}
.header-cta:hover { background: var(--ink-800); }
.header-cta:active { transform: scale(.98); }
.header-contact-short { display: none; }
.menu-toggle { display: none; align-items: center; gap: 6px; height: 44px; padding: 0 6px 0 16px; border: 1px solid var(--line-ink); border-radius: var(--r-pill); font-size: 15px; font-weight: 500; }
.menu-toggle-icon { position: relative; display: block; width: 28px; height: 28px; }
.menu-toggle-icon i { position: absolute; left: 7px; right: 7px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform var(--base) var(--enter), top var(--base) var(--enter); }
.menu-toggle-icon i:first-child { top: 10px; }
.menu-toggle-icon i:last-child { top: 17px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i { top: 13.5px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon i:last-child { transform: rotate(-45deg); }

/* Drawer below 1100px. site.js sets --drawer-top when it opens. */
@media (max-width: 1100px) {
  .menu-toggle { display: inline-flex; }
  .header-right { margin-left: auto; }
  .nav-menu {
    position: absolute; z-index: 1; top: calc(100% + 8px); left: 0; right: 0; display: block;
    max-height: calc(100dvh - var(--drawer-top, 96px) - 20px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card);
    background: var(--glass-solid); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); box-shadow: var(--shadow-menu);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--base) var(--enter), transform var(--base) var(--enter), visibility 0s linear var(--base);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 95; background: var(--scrim-soft); }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-item > a, .nav-trigger { width: 100%; height: 52px; justify-content: space-between; padding: 0 14px; border-radius: var(--r-tile); font-size: 17px; }
  .nav-item > a[aria-current] { background: var(--panel); }
  .nav-item > a[aria-current]::after, .has-menu.is-current > .nav-trigger::after { left: auto; right: 18px; bottom: auto; top: 50%; margin: -2px 0 0; }
  .has-menu.is-current > .nav-trigger::after { right: 44px; }
  .nav-panel {
    position: static; display: none; width: auto; padding: 0 0 8px; border: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav-trigger[aria-expanded="true"] + .nav-panel { display: block; transform: none; }
  .nav-panel-intro { display: block; padding: 0; background: none; }
  .nav-panel-intro b, .nav-panel-intro p { display: none; }
  .nav-panel-all { min-height: 44px; padding: 0 14px 0 68px; }
  .menu-card { padding: 8px 14px; }
  .nav-drawer-foot { display: grid; gap: 8px; margin-top: 8px; padding: 14px 6px 4px; border-top: 1px solid var(--line); }
  .nav-drawer-foot .btn { width: 100%; }
  .nav-drawer-mail { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--ink-muted); font-size: 15px; }
}
/* Tablets: Kantoor and Cases stay in the bar while the menu is closed; the rest sits in the menu. */
@media (min-width: 768px) and (max-width: 1100px) {
  body:not(.menu-open) .nav-menu {
    position: static; display: flex; justify-content: center; max-height: none; overflow: visible; padding: 0;
    border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none; transition: none;
  }
  body:not(.menu-open) .nav-list { flex-direction: row; align-items: center; }
  body:not(.menu-open) .nav-list > li:not(.nav-item--keep), body:not(.menu-open) .nav-drawer-foot { display: none; }
  body:not(.menu-open) .nav-item > a { width: auto; height: 40px; justify-content: center; padding: 0 12px; border-radius: var(--r-pill); font-size: 15px; }
  body:not(.menu-open) .nav-item > a[aria-current] { background: none; }
  body:not(.menu-open) .nav-item > a[aria-current]::after { left: 50%; right: auto; top: auto; bottom: 3px; margin: 0 0 0 -2px; }
}
/* Small tablets and large phones: the booking pill says "Afspraak", so the language switch and the menu still fit. */
@media (min-width: 480px) and (max-width: 559px) {
  .header-contact-full { display: none; }
  .header-contact-short { display: inline; }
}
@media (max-width: 479px) {
  .nav-shell { padding-left: 16px; padding-right: 8px; }
  .brand-logo img { width: 100px; }
  .header-cta { display: none; }
}
/* The smallest phones: the menu button keeps only its icon (the word stays for screen readers), so the nav fits. */
@media (max-width: 359px) {
  .menu-toggle { width: 44px; padding: 0; justify-content: center; }
  .menu-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Footer: the closing call to action on the mirrored gradient, the glass card, the wordmark. */
.site-footer { position: relative; overflow: hidden; background: var(--grad-bottom); }
.footer-cta { padding: calc(var(--section-y) + 32px) 0 72px; }
.footer-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center; }
.footer-cta-copy { display: grid; gap: 20px; justify-items: start; }
.footer-cta h2 { max-width: 560px; font-size: 48px; }
.footer-cta .lead { max-width: 520px; }
.footer-cta .actions { justify-content: flex-start; }

/* The homepage's closing band: how a start goes, three numbered steps on a glass card. */
.start-card {
  display: grid; gap: 16px; justify-items: start; padding: 24px; border: 1px solid var(--glass-border); border-radius: var(--r-card);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-frame);
}
.start-card h3 { font-size: 18px; font-weight: 500; }
.start-card ol { display: grid; gap: 14px; width: 100%; }
.start-card li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
.start-card li b { display: block; font-size: 15px; font-weight: 500; }
.start-card li small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: 14px; line-height: 1.45; }
.start-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.start-card li:first-child .start-num { background: var(--accent); }
.footer-vignette { position: relative; }
.vignette-card {
  position: relative; padding: 18px; border: 1px solid var(--glass-border); border-radius: var(--r-card);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--shadow-frame);
}
.vignette-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.vignette-card header b { font-weight: 500; }
.vignette-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); }
.vignette-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.vignette-count { display: grid; place-items: center; min-width: 24px; height: 24px; margin-left: auto; padding: 0 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.vignette-card ul { display: grid; gap: 8px; }
.vignette-card li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--canvas); }
.vignette-card li b { display: block; font-size: 14px; font-weight: 500; }
.vignette-card li small { display: block; font-size: 12.5px; color: var(--ink-muted); }
.vignette-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-small); background: var(--hue-soft, var(--panel-solid)); color: var(--hue, var(--ink)); }
.vignette-ok { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-subtle); }
/* Without the script (or with reduced motion) the first item shows approved; while it plays (site.js), the black
   pointer approves them one by one. The Supervisor's two lines share one cell, so nothing shifts. */
.footer-vignette:not(.is-live) li:first-child .vignette-ok, .vignette-ok.is-clicked { border-color: var(--ok); background: var(--ok); color: var(--on-ink); }
.vignette-ok { transition: background-color .2s var(--enter), border-color .2s var(--enter), color .2s var(--enter); }
.vignette-card li { transition: opacity .3s var(--enter); }
.vignette-card li:has(.vignette-ok.is-clicked) b { color: var(--ink-muted); }
.vignette-bubble { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px; border-radius: var(--r-tile); background: var(--ink); color: var(--on-ink); font-size: 13.5px; line-height: 1.45; }
.vignette-av { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--on-ink); color: var(--ink); }
.vignette-say { display: grid; }
.vignette-say > span { grid-area: 1 / 1; }
.vignette-say b { display: block; font-weight: 600; }
.vignette-done, .footer-vignette.is-done .vignette-ask { visibility: hidden; }
.footer-vignette.is-done .vignette-done { visibility: visible; }
.footer-vignette .sim-caption { justify-content: flex-end; }

.footer-card {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px;
  padding: 32px; border: 1px solid var(--glass-border); border-radius: var(--r-nav);
  background: var(--glass-footer); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.site-footer--plain .footer-card { margin-top: var(--section-y); }
.footer-brand { display: grid; align-content: start; justify-items: start; gap: 14px; }
.footer-brand .brand-logo img { width: 128px; margin-left: -8px; }
.footer-brand p { max-width: 300px; font-size: 14px; color: var(--ink-muted); }
.footer-brand p b { display: block; color: var(--ink); font-weight: 500; }
.footer-mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 500; }
.footer-mail:hover { color: var(--accent); }
.footer-col h2 { margin-bottom: 10px; font-size: 13px; line-height: 1.4; letter-spacing: 0; font-weight: 500; color: var(--ink-muted); }
.footer-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14.5px; transition: color var(--fast); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--line-ink); color: var(--ink-muted); font-size: 13px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 32px; transition: color var(--fast); }
.footer-legal a:hover { color: var(--ink); }
/* Fingers need 44px: the small header and footer links grow on touch screens. */
@media (pointer: coarse) {
  .brand { min-height: 44px; }
  .language-current, .language-link { min-width: 44px; height: 44px; }
  .footer-col a, .footer-legal a { min-width: 44px; min-height: 44px; }
}
.footer-wordmark { padding: 40px var(--gutter) 0; }
.footer-wordmark span {
  display: block; max-width: var(--w-wide); aspect-ratio: 2172 / 724; margin: 0 auto -9%; background: var(--wordmark-fill);
  -webkit-mask: url('/assets/site/wordmark.webp') center top / 100% auto no-repeat; mask: url('/assets/site/wordmark.webp') center top / 100% auto no-repeat;
}
@media (max-width: 960px) {
  .footer-cta-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-vignette { max-width: 440px; }
  .footer-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-cta h2 { font-size: 34px; }
  .footer-cta-copy { justify-items: center; text-align: center; }
  .footer-cta .actions { justify-content: center; width: 100%; }
  .footer-cta .actions .btn { width: 100%; max-width: 360px; }
  .footer-cta .proof-row--left { justify-content: center; }
  .footer-vignette { margin-inline: auto; width: 100%; }
  .footer-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding: 24px 20px; border-radius: var(--r-card); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Dock: graphite glass at the bottom, shown after the hero (site.js). */
.dock {
  position: fixed; z-index: 90; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 18px;
  padding: 7px 7px 7px 22px; border-radius: var(--r-pill); background: var(--glass-ink); color: var(--on-ink);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: var(--shadow-dock);
  opacity: 0; visibility: hidden; transform: translate(-50%, 140%);
  transition: transform .45s var(--enter), opacity .3s ease, visibility 0s linear .45s;
}
.dock.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
/* The dock is the phone's way to book. Wherever the nav shows its own "Plan een kennismaking", the dock stays away, so the
   same button is never on screen twice. */
@media (min-width: 480px) { .dock { display: none; } }
.dock-text { display: grid; line-height: 1.3; }
.dock-text b { font-size: 14px; font-weight: 500; }
.dock-text small { font-size: 12.5px; color: var(--on-glass-ink); }
.dock-btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--canvas); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-tab);
  transition: background var(--fast), transform var(--fast) var(--enter);
}
.dock-btn:hover { background: var(--paper); }
.dock-btn:active { transform: scale(.98); }
body.menu-open .dock, body.demo-expanded .dock { visibility: hidden; opacity: 0; }
@media (max-width: 640px) {
  .dock { left: 12px; right: 12px; justify-content: space-between; padding-left: 18px; transform: translateY(140%); }
  .dock.is-visible { transform: none; }
  .dock-text small { display: none; }
  .dock-text b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .dock { transform: translate(-50%, 0); transition: opacity .01s, visibility 0s; }
  .nav-panel, .nav-menu { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) { .dock { transform: none; } }

/* Cookie card in the same language. */
.v2 .cookie-notice {
  border-color: var(--line); border-radius: var(--r-card); background: var(--glass-solid); color: var(--ink); box-shadow: var(--shadow-menu);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-family: var(--font);
}
.v2 .cookie-notice { width: min(360px, calc(100% - 40px)); padding: 16px 18px; }
.v2 .cookie-notice .cookie-notice-title { margin-bottom: 4px; color: var(--ink); font-size: 15px; font-weight: 600; }
.v2 .cookie-notice .cookie-notice-copy { color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }
.v2 .cookie-notice-actions { margin-top: 10px; }
.v2 .cookie-notice-actions button { padding: 10px 22px; border-color: var(--ink); border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-weight: 500; }
.v2 .cookie-notice-actions button:hover { background: var(--ink-800); }
.v2 .cookie-notice-actions a { color: var(--ink-muted); }
.v2 .cookie-notice-actions a:hover { color: var(--ink); }
.v2 .cookie-notice :focus-visible { outline: none; box-shadow: var(--focus); }
/* On a phone the card stays small: the title remains its accessible name but is not shown. */
@media (max-width: 640px) {
  .v2 .cookie-notice { width: calc(100% - 24px); padding: 14px 16px; }
  .v2 .cookie-notice .cookie-notice-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v2 .cookie-notice-actions { margin-top: 8px; }
}