/*
 * Homepage canvas: one continuous blue page instead of stacked colour bands.
 *
 * Every section is transparent on one calm gradient pinned to the viewport, with one grain layer,
 * so there are no seams between sections. Former white sections keep their content on cream sticker cards.
 * The night in "Milos rejse" fades in and out instead of starting at a hard edge.
 *
 * Loaded last on the homepage. The prefix counts as two ids, because older layers use !important
 * with high specificity.
 */
html:has(body.site-ui.homepage) {
  background: #1d4dd0;
}

html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) {
  --hc-ink: #14213d;
  --hc-cream: #fff8ec;
  --hc-text: #4a556b;
  --hc-on-blue: rgba(255, 255, 255, 0.88);
  --hc-card-shadow: 6px 7px 0 #14213d;
  --hc-section-y: clamp(3.5rem, 7vw, 6.5rem);
  position: relative;
  isolation: isolate;
  background: #1f4fd6 !important;
}

/* The canvas: one calm diagonal gradient pinned to the viewport, so every screen shows the full
   light-to-deep run (cobalt top left, ultramarine bottom right), with slightly darker edges.
   No colour blobs. A fixed layer also stays smooth on iOS, where background-attachment: fixed
   does not work. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(150% 110% at 50% 45%, rgba(9, 20, 66, 0) 55%, rgba(9, 20, 66, 0.28) 100%),
    linear-gradient(160deg, #2e69ee 0%, #2459e0 30%, #1e4bd0 62%, #1a3fb9 85%, #15369f 100%);
}

/* Fine paper grain, pinned with the canvas so it reads as the surface, not as a moving pattern. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- 1. No more bands: every homepage section sits on the canvas ---- */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(
  main, .conversion-shell, .homepage-blue-stack, .stage-chooser, .milo-money, #institution-search, #map-root,
  .milo-agent, .milo-waitlist-band, #startklar-cta, #guides, #trust, #faq, #alle-sider,
  .outcome-band, .section-band-light, .section-band-blue
) {
  background: transparent !important;
  background-image: none !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(.hero-premium.hero-premium, .milo-money) {
  background: transparent !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-money__stage::after {
  display: none;
}

/* Night in "Milos rejse": fades in from the canvas and back out again. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-journey {
  background: linear-gradient(180deg,
    rgba(10, 22, 66, 0) 0%,
    rgba(10, 22, 66, 0.92) 12%,
    rgba(12, 26, 78, 0.9) 58%,
    rgba(16, 38, 110, 0.55) 82%,
    rgba(16, 38, 110, 0) 100%) !important;
}
/* The sticky canvas paints the night itself from its first pixel, so a dusk band in front of the
   section leads into exactly the sky's top colour. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-journey {
  --hc-dusk: clamp(160px, 20vw, 280px);
  position: relative;
  margin-top: var(--hc-dusk) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-journey::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--hc-dusk));
  height: calc(var(--hc-dusk) + 2px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 24, 61, 0) 0%, rgba(12, 24, 61, 0.35) 40%, rgba(12, 24, 61, 0.82) 75%, rgb(12, 24, 61) 100%);
}

/* The journey's canvas landscape stopped at a hard line where the story ends. Its lower edge now
   fades into the page; only the drawing is masked, the HTML controls on top stay crisp. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-journey :is(.milo-journey__canvas, .milo-journey__fallback) {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.55) 90%, transparent 100%);
}

/* ---- 2. Even rhythm between sections ---- */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(#startklar-cta, #guides, #trust, #faq, #alle-sider).conversion-section {
  padding-top: var(--hc-section-y) !important;
  padding-bottom: var(--hc-section-y) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root {
  padding-top: 0 !important;
  padding-bottom: var(--hc-section-y) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- 3. Type on blue ---- */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(#map-root, #startklar-cta, #trust, #faq, #alle-sider) :is(.section-heading, .text-center) > h2,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-section > div > h2,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(#startklar-cta, #trust, #faq, #alle-sider) h2 {
  color: #fff !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(#map-root, #startklar-cta, #trust, #faq, #alle-sider) :is(.section-heading, .text-center) > p,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(#startklar-cta, #trust, #faq, #alle-sider) .conversion-section-inner > p,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .seo-crawl-hub__lead {
  color: var(--hc-on-blue) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .seo-crawl-hub__lead a {
  color: #fff !important;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* ---- 4. Former white surfaces become cream sticker cards ---- */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(
  .home-search-card, .institution-offering-filters--premium, .map-results-toolbar, .startklar-card,
  #guides .guide-card, .homepage-trust-callout, #trust .trust-list > div, .faq-card, .seo-crawl-panel
) {
  background: var(--hc-cream) !important;
  background-image: none !important;
  border: 2.5px solid var(--hc-ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--hc-card-shadow) !important;
  color: var(--hc-ink) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .institution-offering-filters__glow { display: none !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .institution-offering-filters--premium { overflow: hidden; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .institution-offering-filters__foot {
  background: rgba(20, 33, 61, 0.05) !important;
  border-top: 1.5px dashed rgba(20, 33, 61, 0.25) !important;
}

/* Map: the map itself gets the same sticker frame */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-canvas-wrap {
  border: 2.5px solid var(--hc-ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--hc-card-shadow) !important;
  overflow: hidden !important;
}

/* Card text: room to breathe and no text against the edges */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .faq-card {
  padding: clamp(1.15rem, 2.4vw, 1.6rem) clamp(1.15rem, 2.6vw, 1.75rem) !important;
  overflow-wrap: anywhere;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .faq-card h3 {
  margin: 0 0 0.5rem !important;
  color: var(--hc-ink) !important;
  line-height: 1.25 !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .faq-card p {
  margin: 0 !important;
  color: var(--hc-text) !important;
  line-height: 1.55 !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #trust .trust-list > div {
  padding: clamp(1.1rem, 2.2vw, 1.5rem) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #trust .trust-list > div :is(h3, strong) { color: var(--hc-ink) !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #trust .trust-list > div p { color: var(--hc-text) !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .startklar-card {
  padding: clamp(1.25rem, 3vw, 1.85rem) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .seo-crawl-panel {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(.homepage-trust-callout__link, .startklar-need-link, .popular-cities__chip) {
  border: 1.5px solid rgba(20, 33, 61, 0.22) !important;
  background: #fff !important;
}

/* Closing invitation: a night-blue sticker card instead of its own band */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .outcome-band__content {
  background: #13296b !important;
  border: 2.5px solid var(--hc-ink) !important;
  box-shadow: var(--hc-card-shadow) !important;
  border-radius: 24px !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .outcome-band {
  padding-bottom: var(--hc-section-y) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .outcome-band__trust {
  margin-top: 0.9rem !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .startklar-card__note {
  background: transparent !important;
  border-top: 1.5px dashed rgba(20, 33, 61, 0.2) !important;
  border-radius: 0 !important;
  padding: 0.85rem 0 0 !important;
  color: var(--hc-text) !important;
}

/* Footer: fades from the canvas into navy, no hard edge */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-footer {
  background: linear-gradient(180deg, rgba(14, 31, 80, 0) 0, #0f2257 9rem, #0c1b45 100%) !important;
  border-top: 0 !important;
  padding-top: max(6rem, var(--hc-section-y)) !important;
}

/* ---- 5. Bleed: the map filter row wraps instead of running off the screen ---- */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root :is(.map-filter-panel, .map-filter-bar) {
  flex-wrap: wrap !important;
  justify-content: center !important;
  row-gap: 0.5rem !important;
  max-width: 100%;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-filter-bar > * { flex-shrink: 0; }

/* The agent stage carried its own dot pattern and a second grain layer, which showed as a lighter
   band with a straight edge on the canvas. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-agent__stage::before,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-agent__stage::after {
  display: none !important;
}

/* ---- 6. Arrows: one sticker button instead of loose "→" characters ----
   A round cream sticker with an ink outline and a drawn arrow; it turns gold and nudges forward
   when the card is hovered or focused. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) {
  --hc-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6.5 18.5 12 13 17.5'/%3E%3C/svg%3E");
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .stage-card__title::after {
  content: none !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(.stage-card, #guides .guide-card) {
  position: relative !important;
  padding-right: 4.25rem !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(.stage-card, #guides .guide-card)::after {
  content: "" !important;
  position: absolute !important;
  right: 1.1rem !important;
  top: 50% !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border: 2px solid var(--hc-ink) !important;
  border-radius: 50% !important;
  background: #fff var(--hc-arrow) center / 1.05rem no-repeat !important;
  box-shadow: 2px 3px 0 var(--hc-ink) !important;
  opacity: 1 !important;
  color: transparent !important;
  transform: translateY(-50%) !important;
  transition: background-color 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(.stage-card, #guides .guide-card):is(:hover, :focus-visible)::after {
  background-color: #fbbf24 !important;
  transform: translate(3px, -50%) !important;
  box-shadow: 3px 4px 0 var(--hc-ink) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) :is(.stage-card, #guides .guide-card):is(:hover, :focus-visible)::after {
    transform: translateY(-50%) !important;
  }
}

/* ---- Header on the homepage: blue glass over the canvas, white type, white and gold logo ---- */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-header {
  background: rgba(30, 72, 205, 0.55) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-brand-name { color: #fff !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-brand .mb-stripe-mark__blue { fill: #fff !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-brand .mb-stripe-mark__ink { fill: #fbbf24 !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-nav .nav-btn { color: rgba(255, 255, 255, 0.86) !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-nav .nav-btn:hover,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-nav .nav-btn:is(.active, [aria-current="page"]) {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .nav-login-link {
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .nav-login-link:hover { background: #fbbf24 !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #mobile-menu-btn {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #mobile-menu {
  background: rgba(24, 58, 176, 0.94) !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #mobile-menu .mobile-nav-link { color: #fff !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #mobile-menu :is(.mobile-nav-group, .mobile-nav-link__desc) { color: rgba(255, 255, 255, 0.7) !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #mobile-menu .mobile-nav-link__tag { background: #fbbf24 !important; color: #14213d !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #mobile-menu .mobile-nav-link:is(:hover, .active, [aria-current="page"]) {
  background: rgba(255, 255, 255, 0.12) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .site-header :is(a, button):focus-visible { outline-color: #fbbf24 !important; }

/* ---- 7. Map: a calm paper map in a sticker frame ---- */
/* Tiles stay OpenStreetMap; a muted, warm treatment makes them read as paper instead of a busy atlas. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map {
  background: #f3ead6 !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .leaflet-tile-pane {
  filter: saturate(0.42) sepia(0.2) hue-rotate(-4deg) brightness(1.04) contrast(0.93);
}
/* Soft inner edge so the map sits inside the frame like a print */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-canvas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(20, 33, 61, 0.08), inset 0 0 38px rgba(20, 33, 61, 0.14);
}

/* Clusters: cream stickers with ink outline; busier areas turn butter, then gold */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map :is(.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large) {
  background: transparent !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .marker-cluster div {
  width: 34px !important;
  height: 34px !important;
  margin: 3px !important;
  border: 2.5px solid var(--hc-ink) !important;
  border-radius: 50% !important;
  background: var(--hc-cream) !important;
  box-shadow: 2px 3px 0 var(--hc-ink) !important;
  color: var(--hc-ink) !important;
  font: 800 12.5px/29px "DM Sans", system-ui, sans-serif !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .marker-cluster div span { line-height: 29px !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .marker-cluster-medium div { background: #ffe7b0 !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .marker-cluster-large div {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  background: #fbbf24 !important;
  line-height: 35px !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .marker-cluster-large div span { line-height: 35px !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .marker-cluster:hover div { transform: scale(1.1); }
/* Single institutions keep their type colour, with the same ink outline */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map path.leaflet-interactive {
  stroke: var(--hc-ink) !important;
  stroke-width: 2px !important;
  stroke-opacity: 1 !important;
}

/* Zoom buttons as one sticker */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .leaflet-control-zoom {
  border: 2.5px solid var(--hc-ink) !important;
  border-radius: 14px !important;
  box-shadow: 3px 4px 0 var(--hc-ink) !important;
  overflow: hidden !important;
  background: var(--hc-cream) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .leaflet-control-zoom a {
  width: 38px !important;
  height: 38px !important;
  line-height: 36px !important;
  border: 0 !important;
  background: var(--hc-cream) !important;
  color: var(--hc-ink) !important;
  font: 800 20px/36px "DM Sans", system-ui, sans-serif !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .leaflet-control-zoom a + a { border-top: 2px solid var(--hc-ink) !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .leaflet-control-zoom a:hover { background: #ffe7b0 !important; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #daycare-map .leaflet-control-attribution {
  border-radius: 10px 0 0 0;
  background: rgba(255, 248, 236, 0.86) !important;
  color: #4a556b !important;
  font-size: 10px !important;
}

/* Legend as a small sticker card */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-legend {
  border: 2px solid var(--hc-ink) !important;
  border-radius: 16px !important;
  background: var(--hc-cream) !important;
  box-shadow: 3px 4px 0 var(--hc-ink) !important;
  color: var(--hc-ink) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-legend-dot {
  border: 2px solid var(--hc-ink) !important;
  box-shadow: none !important;
}

/* Filter row: sticker chips; the active one turns gold */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-filter-btn,
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-counter {
  border: 2px solid var(--hc-ink) !important;
  border-radius: 999px !important;
  background: var(--hc-cream) !important;
  box-shadow: 2px 3px 0 var(--hc-ink) !important;
  color: var(--hc-ink) !important;
  font-weight: 700 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 3px 4px 0 var(--hc-ink) !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-filter-btn:is(.active, [aria-pressed="true"]) {
  background: #fbbf24 !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-counter {
  background: rgba(255, 248, 236, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
  color: #fff !important;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-filter-btn .filter-dot {
  box-shadow: 0 0 0 2px var(--hc-ink) !important;
}

/* Milo on the map (Rive). Sits in the free lower-left corner and never blocks the map. */
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-milo {
  position: absolute;
  left: 10px;
  bottom: 4px;
  z-index: 998;
  width: clamp(140px, 17vw, 210px);
  aspect-ratio: 360 / 320;
  pointer-events: none;
  background: url("/assets/img/milo-search-transparent-20261013-256.webp") 34% 78% / 47% auto no-repeat;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-milo canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-milo.is-live { background: none; }
html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-milo.is-live canvas { opacity: 1; }
@media (max-width: 640px) {
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-milo { width: 118px; left: 4px; }
  /* Compact legend so it does not cover the map on phones */
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-legend {
    padding: 6px 9px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    max-width: 46% !important;
  }
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-legend :is(.map-legend-attribution, p, small) { display: none !important; }
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #map-root .map-legend-dot { width: 10px !important; height: 10px !important; }
}

/* Phones: guide cards one per row, so titles are not squeezed next to the arrow button */
@media (max-width: 600px) {
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) #guides .guide-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Narrow phones: the "Forskel før skat" row stays on one line inside the money card */
@media (max-width: 360px) {
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-money .mm-diff {
    gap: 0.5rem;
    padding: 0.5rem 0.65rem !important;
  }
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-money .mm-diff span {
    font-size: 0.72rem !important;
    white-space: nowrap;
  }
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b) .milo-money .mm-diff__n {
    font-size: 1.02rem !important;
    white-space: nowrap;
  }
}

@media (prefers-reduced-transparency: reduce) {
  html body.site-ui.homepage:is(.homepage, #hc-a):is(.homepage, #hc-b)::after { display: none; }
}