/*
  v3 homepage — "Levende fotografi" direction. Approved by user from the
  standalone mockup (v3-mockup/index.html), ported into real Wagtail
  templates/content. All custom classes are v3-prefixed since this file
  loads alongside the shared general.css/redesign_2026.css (needed for
  default_footer.html) rather than in isolation.
*/

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/v3/hanken-grotesk.a6b899943e31.woff2") format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/v3/jetbrains-mono.570751c5f8b4.woff2") format('woff2');
}

:root {
  --v3-ink: #0B034C;
  --v3-ink-soft: #1A1B2E;
  --v3-muted: #5B5E82;
  --v3-surface: #FFFFFF;
  --v3-surface-raised: #F4F5FB;
  --v3-line: rgba(11,3,76,0.1);
  --v3-accent-1: #2543F2;
  --v3-accent-2: #7256FF;
  --v3-accent-grad: linear-gradient(120deg, var(--v3-accent-1), var(--v3-accent-2));
  --v3-radius: 14px;
  --v3-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.v3-body {
  margin: 0;
  background: var(--v3-surface);
  color: var(--v3-ink-soft);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.v3-body * { box-sizing: border-box; }
body.v3-body ::selection { background: var(--v3-accent-1); color: #fff; }
html:has(body.v3-body) { scroll-behavior: smooth; }

/* :where() zeroes this selector's own specificity (keeps the same match:
   every <a> in .v3-body defaults to inheriting its surrounding text color
   instead of browser-default blue) so it can never outrank a component's
   own color rule again. Plain `body.v3-body a { color: inherit }` has
   specificity (0,1,2) — higher than single-class rules like
   `.v3-btn-primary`/`.v3-links a`/`.v3-btn-login` (0,1,0)/(0,1,1) — so it
   was silently winning and making every nav link, hero CTA, and "Logg
   inn" render in the dark body text color instead of the white each of
   those rules actually declares. This is the same class of bug already
   fixed for headings twice today (color, then font-family), just on
   links: this was the real root cause of the nav-legibility issue, not
   the missing scrim gradient (which is still a good idea to keep, but
   wasn't the reason white text wasn't showing up). */
:where(body.v3-body) a { color: inherit; }
body.v3-body p { margin: 0; }
/* general.css's global `h1,h2,h3,h4,h5,h6{font-family:var(--secondary-font)}`
   (Montserrat) directly targets every heading and wins over body's inherited
   Hanken Grotesk, regardless of specificity elsewhere — inheritance always
   loses to any rule that matches the element itself. Without this, every
   heading sitewide on v3 — including hero/section titles — silently renders
   in v1/v2's font instead of v3's. */
body.v3-body h1, body.v3-body h2, body.v3-body h3,
body.v3-body h4, body.v3-body h5, body.v3-body h6 {
  font-family: 'Hanken Grotesk', sans-serif;
  margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.06;
}

body.v3-body :focus-visible { outline: 2px solid var(--v3-accent-1); outline-offset: 3px; border-radius: 4px; }

.v3-mono {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.v3-wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ---------- Reveal-on-scroll ---------- */
.v3-reveal {
  opacity: 0; filter: blur(6px); transform: translateY(22px);
  transition: opacity 0.9s var(--v3-ease), filter 0.9s var(--v3-ease), transform 0.9s var(--v3-ease);
}
.v3-reveal.v3-in { opacity: 1; filter: blur(0); transform: translateY(0); }
.v3-reveal-group.v3-in .v3-reveal-child { opacity: 1; filter: blur(0); transform: translateY(0); }
.v3-reveal-child {
  opacity: 0; filter: blur(6px); transform: translateY(22px);
  transition: opacity 0.8s var(--v3-ease), filter 0.8s var(--v3-ease), transform 0.8s var(--v3-ease);
}
.v3-reveal-child:nth-child(1) { transition-delay: 0s; }
.v3-reveal-child:nth-child(2) { transition-delay: 0.08s; }
.v3-reveal-child:nth-child(3) { transition-delay: 0.16s; }
.v3-reveal-child:nth-child(4) { transition-delay: 0.24s; }
.v3-reveal-child:nth-child(5) { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .v3-reveal, .v3-reveal-child { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
}

/* ---------- Nav ---------- */
nav.v3-topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* The hero photo's own scrim fades to near-transparent on the right
     (it exists to keep the LEFT-side hero text readable, not to back the
     nav), so nav items/logo on the right of a wide viewport can land on
     the photo's brightest, unshaded area with nothing behind them. This
     permanent (not scroll-triggered) top-down fade guarantees the nav row
     always has enough contrast for white text/logo, on every hero image,
     without touching the hero photo or its own scrim. */
  background: linear-gradient(to bottom, rgba(11,3,76,0.55) 0%, rgba(11,3,76,0.22) 65%, rgba(11,3,76,0) 100%);
  transition: background 0.35s var(--v3-ease), box-shadow 0.35s var(--v3-ease);
}
nav.v3-topnav.v3-scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--v3-line);
}
/* Pages with the hero disabled (no photo, no scrim) never get a dark
   backdrop behind the transparent un-scrolled nav — force the same
   solid/dark-on-light look .v3-scrolled gives, independently of scroll
   position, so the logo/links are never invisible-on-white. */
nav.v3-topnav-no-hero {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--v3-line);
}
.v3-topnav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px;
}
.v3-info-bar {
  background: var(--v3-accent-1); color: #fff; text-align: center;
  font-size: 13.5px; padding: 9px 32px; line-height: 1.4;
}
.v3-info-bar p { margin: 0; }
/* mobino_logo_white_with_text.svg is solid #fff shapes on transparent —
   shows correctly as-is over the dark nav gradient/photo; brightness(0)
   turns it solid black for the light backgrounds (scrolled / no-hero). */
.v3-brand-mark { display: block; width: 148px; height: auto; }
.v3-brand-mark img { width: 100%; height: auto; display: block; filter: none; transition: filter 0.35s var(--v3-ease); }
/* Below ~400px the logo (fixed 148px) and "Bli kunde" pill button no
   longer both fit in .v3-topnav-row's space-between layout and overlap —
   .v3-btn-login already hides itself at 560px (see below) but the primary
   CTA button can't, so shrink the logo and tighten the row padding instead. */
@media (max-width: 400px) {
  .v3-topnav-row { padding-left: 18px; padding-right: 18px; }
  .v3-brand-mark { width: 112px; }
}
nav.v3-topnav.v3-scrolled .v3-brand-mark img,
nav.v3-topnav-no-hero .v3-brand-mark img { filter: brightness(0) saturate(100%); }

.v3-links { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.v3-nav-item { position: relative; display: flex; align-items: center; }
.v3-links a {
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: color 0.35s var(--v3-ease);
  white-space: nowrap;
}
nav.v3-topnav.v3-scrolled .v3-links a,
nav.v3-topnav-no-hero .v3-links a { color: var(--v3-ink-soft); text-shadow: none; }
.v3-links a:hover { color: var(--v3-accent-1); }

/* Sub-menu dropdown (mega-menu items configured on the "top" Menu snippet —
   same data source default_header.html's mobile mega-menu reads). */
.v3-sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 14px; padding: 10px; min-width: 200px;
  background: var(--v3-surface); border-radius: var(--v3-radius);
  box-shadow: 0 20px 40px -16px rgba(11,3,76,0.35);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s var(--v3-ease), transform 0.2s var(--v3-ease), visibility 0.2s;
}
.v3-nav-item:hover .v3-sub-menu,
.v3-nav-item:focus-within .v3-sub-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.v3-sub-menu a { color: var(--v3-ink-soft) !important; text-shadow: none !important; padding: 8px 12px; border-radius: 8px; }
.v3-sub-menu a:hover { background: var(--v3-surface-raised); color: var(--v3-accent-1) !important; }

@media (max-width: 1050px) { .v3-links { display: none; } }

.v3-nav-actions { display: flex; align-items: center; gap: 14px; }

/* Hamburger toggle — hidden by default, shown only where .v3-links is hidden */
.v3-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 0; border: none; background: none; cursor: pointer;
}
.v3-hamburger span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.9); transition: background 0.3s, transform 0.3s, opacity 0.3s;
}
nav.v3-topnav.v3-scrolled .v3-hamburger span,
nav.v3-topnav-no-hero .v3-hamburger span { background: var(--v3-ink-soft); }
.v3-hamburger.v3-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v3-hamburger.v3-active span:nth-child(2) { opacity: 0; }
.v3-hamburger.v3-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1050px) { .v3-hamburger { display: flex; } }

/* Mobile slide-down menu panel */
.v3-mobile-menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 49;
  max-height: 0; overflow: hidden; opacity: 0;
  background: var(--v3-surface);
  box-shadow: 0 20px 40px -16px rgba(11,3,76,0.35);
  transition: max-height 0.35s var(--v3-ease), opacity 0.3s var(--v3-ease);
  padding: 0 24px;
  display: none;
}
@media (max-width: 1050px) { .v3-mobile-menu { display: block; } }
.v3-mobile-menu.v3-menu-open { max-height: 100vh; opacity: 1; overflow-y: auto; padding-top: 88px; padding-bottom: 32px; }
.v3-mobile-menu-item { border-bottom: 1px solid var(--v3-line); }
.v3-mobile-menu-item > a {
  display: block; padding: 16px 4px; font-size: 17px; font-weight: 600;
  color: var(--v3-ink-soft); text-decoration: none;
}
.v3-mobile-sub-menu { display: flex; flex-direction: column; padding: 0 0 12px 12px; }
.v3-mobile-sub-menu a {
  padding: 10px 4px; font-size: 15px; color: var(--v3-muted); text-decoration: none;
}
.v3-mobile-menu-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.v3-mobile-menu-actions .v3-btn-login,
.v3-mobile-menu-actions .v3-btn-primary { justify-content: center; color: var(--v3-ink-soft); text-shadow: none; border-color: var(--v3-line); }
.v3-mobile-menu-actions .v3-btn-primary { color: #fff; }
body.v3-no-scroll { overflow: hidden; }
.v3-btn-login {
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.6);
  padding: 10px 18px; border-radius: 999px;
  transition: color 0.35s var(--v3-ease), border-color 0.35s var(--v3-ease), background 0.2s;
}
.v3-btn-login:hover { background: rgba(255,255,255,0.1); }
nav.v3-topnav.v3-scrolled .v3-btn-login { color: var(--v3-ink-soft); text-shadow: none; border-color: var(--v3-line); }
nav.v3-topnav.v3-scrolled .v3-btn-login:hover { background: var(--v3-surface-raised); }
@media (max-width: 560px) { .v3-btn-login { display: none; } }
/* In the persistent top bar (not .v3-mobile-menu-actions, where both stay
   visible), show "Logg inn" instead of "Bli kunde" once the hamburger
   takes over — "Bli kontaktet" (the floating popup) and "Få et tilbud"
   (hero CTA) already put a become-a-customer action on every page, so the
   cramped mobile header doesn't need to repeat it there too. Selector
   specificity (0,2,0) intentionally beats the plain .v3-btn-login rule
   above so this wins regardless of media-query source order. */
@media (max-width: 1050px) {
  .v3-nav-actions .v3-btn-primary { display: none; }
  .v3-nav-actions .v3-btn-login { display: inline-block; }
}

.v3-btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--v3-accent-grad);
  color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
  padding: 13px 24px; border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(37,67,242,0.55);
  transition: transform 0.25s var(--v3-ease), box-shadow 0.25s var(--v3-ease), filter 0.2s;
}
.v3-btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 16px 30px -10px rgba(37,67,242,0.6); }
.v3-btn-primary svg { width: 15px; height: 15px; transition: transform 0.3s var(--v3-ease); }
.v3-btn-primary:hover svg { transform: translateX(3px); }

.v3-btn-ghost-light {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; text-decoration: none; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.6); padding-bottom: 2px;
  transition: border-color 0.2s;
}
.v3-btn-ghost-light:hover { border-color: #fff; }

/* ---------- Hero ---------- */
#v3-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; }
#v3-hero.v3-hero-interior { min-height: 62vh; }
#v3-hero.v3-hero-interior .v3-wrap { padding-top: 140px; padding-bottom: 70px; }
@media (max-width: 640px) { #v3-hero.v3-hero-interior { min-height: 50vh; } }

/* Pages with "Enable hero" on but no hero_image fall back to the legacy
   no-photo hero (.index_top, from default_hero.html/css) instead of the
   markup above. That fallback absolutely-positions and vertically centers
   its content, which assumed a nav that sits in normal flow above it — v3's
   nav is position:fixed and floats over the page instead, so the centered
   content had no reserved clearance and rendered partly underneath it (e.g.
   Abonnement page heading). Switch to normal flow with the same top/bottom
   offset the photo hero already uses above, so it clears the nav regardless
   of how much hero text a given page has, instead of relying on a fixed
   box height to happen to center it low enough. */
body.v3-body .index_top_content_wrapper {
  position: relative; height: auto; align-items: flex-start;
  padding: 140px 0 70px;
}
#v3-hero .v3-hero-media { position: absolute; inset: 0; z-index: 0; }
#v3-hero .v3-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%;
  transform: scale(1.12); filter: blur(14px); opacity: 0;
  transition: transform 1.4s var(--v3-ease), filter 1.3s var(--v3-ease), opacity 1s ease-out;
}
body.v3-loaded #v3-hero .v3-hero-media img { transform: scale(1); filter: blur(0); opacity: 1; }
#v3-hero .v3-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,3,76,0.94) 0%, rgba(11,3,76,0.72) 32%, rgba(11,3,76,0.32) 62%, rgba(11,3,76,0.12) 100%);
  z-index: 1;
}
#v3-hero .v3-wrap { position: relative; z-index: 2; width: 100%; padding-bottom: 100px; padding-top: 160px; }
#v3-hero .v3-content { max-width: 680px; }
#v3-hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem); color: #fff;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--v3-ease) 0.45s, transform 0.9s var(--v3-ease) 0.45s;
}
body.v3-loaded #v3-hero h1 { opacity: 1; transform: translateY(0); }
#v3-hero h1 span { color: #A9B8FF; font-size: inherit; font-weight: inherit; line-height: inherit; }
#v3-hero .v3-lede {
  margin-top: 24px; font-size: 19px; color: rgba(255,255,255,0.82);
  max-width: 46ch; line-height: 1.55;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--v3-ease) 0.58s, transform 0.9s var(--v3-ease) 0.58s;
}
body.v3-loaded #v3-hero .v3-lede { opacity: 1; transform: translateY(0); }
#v3-hero .v3-cta-row {
  margin-top: 36px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--v3-ease) 0.72s, transform 0.9s var(--v3-ease) 0.72s;
}
body.v3-loaded #v3-hero .v3-cta-row { opacity: 1; transform: translateY(0); }

.v3-scroll-cue {
  position: absolute; bottom: 28px; left: 32px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.65);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.06em;
  opacity: 0; transition: opacity 0.9s var(--v3-ease) 1.1s;
}
body.v3-loaded .v3-scroll-cue { opacity: 1; }
.v3-scroll-cue .v3-line { width: 28px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.v3-scroll-cue .v3-line::after {
  content: ''; position: absolute; left: -100%; top: 0; bottom: 0; width: 100%;
  background: #fff; animation: v3CueSlide 1.8s ease-in-out infinite;
}
@keyframes v3CueSlide { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } }

/* ---------- Section shells ---------- */
.v3-section { padding: 120px 0; }
.v3-section-head { max-width: 640px; margin-bottom: 64px; }
.v3-section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--v3-ink); }
.v3-section-head h2 span { color: var(--v3-accent-1); font-size: inherit; font-weight: inherit; line-height: inherit; }
.v3-section-head p { margin-top: 18px; font-size: 17px; color: var(--v3-muted); }

/* ---------- Product photo grid ---------- */
#v3-products { background: var(--v3-surface); }
.v3-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v3-photo-card {
  position: relative; border-radius: var(--v3-radius); overflow: hidden;
  aspect-ratio: 4 / 5; text-decoration: none; display: block;
  box-shadow: 0 1px 0 rgba(11,3,76,0.05), 0 20px 40px -24px rgba(11,3,76,0.35);
}
.v3-photo-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--v3-ease);
}
.v3-photo-card:hover img { transform: scale(1.06); }
/* Cards with no link_url render as a plain div (see home_page_v3.html) —
   no hover lift/zoom either, so nothing implies they're clickable. */
.v3-photo-card-static { cursor: default; }
.v3-photo-card-static:hover img { transform: none; }
.v3-photo-card .v3-card-scrim {
  position: absolute; inset: 0;
  /* Darkens earlier and harder than a plain fade so the card-body text
     zone (heading + description, ~bottom third) always sits on a fully
     dark ground regardless of what's behind it in the photo — a lighter
     fade left the heading legible against a dark jacket but washed out
     against a lighter garment/wall in the same spot on a different card. */
  background: linear-gradient(180deg, rgba(11,3,76,0) 38%, rgba(11,3,76,0.55) 58%, rgba(11,3,76,0.92) 78%, rgba(11,3,76,0.94) 100%);
}
.v3-photo-card .v3-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px; color: #fff; }
/* redesign_2026.css's "h1,h2,h3,h4,h5,h6 { color: var(--mobino-text-body) }"
   targets h3 directly, so it wins over this white text inherited from
   .v3-card-body above — inheritance only applies when nothing else
   matches the element itself. Every heading placed over a photo/dark
   scrim in this file needs its own explicit color for the same reason. */
.v3-photo-card .v3-card-body h3 { font-size: 20px; margin-bottom: 8px; color: #fff; }
.v3-photo-card .v3-card-body p { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.45; max-width: 30ch; }
.v3-photo-card .v3-card-arrow {
  position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.25s var(--v3-ease);
}
.v3-photo-card:hover .v3-card-arrow { background: var(--v3-accent-1); transform: rotate(45deg); }
.v3-photo-card .v3-card-arrow svg { width: 15px; height: 15px; color: #fff; }
@media (max-width: 980px) { .v3-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .v3-photo-grid { grid-template-columns: 1fr; } }

/* ---------- Coverage / trust split ---------- */
#v3-coverage { background: var(--v3-surface-raised); border-top: 1px solid var(--v3-line); border-bottom: 1px solid var(--v3-line); }
#v3-coverage .v3-split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
#v3-coverage .v3-media { border-radius: var(--v3-radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 24px 48px -28px rgba(11,3,76,0.4); }
#v3-coverage .v3-media img { width: 100%; height: 100%; object-fit: cover; }
#v3-coverage h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); color: var(--v3-ink); }
#v3-coverage h2 span { color: var(--v3-accent-1); font-size: inherit; font-weight: inherit; line-height: inherit; }
#v3-coverage p.v3-desc { margin-top: 20px; font-size: 17px; color: var(--v3-muted); line-height: 1.6; }
.v3-check-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; padding: 0; }
.v3-check-list li { list-style: none; display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 500; color: var(--v3-ink-soft); }
.v3-check-list .v3-tick {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--v3-accent-grad);
  display: flex; align-items: center; justify-content: center;
}
.v3-check-list .v3-tick svg { width: 11px; height: 11px; color: #fff; }
@media (max-width: 860px) { #v3-coverage .v3-split { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Reference wall ---------- */
/* Real ReferenceCustomer logos are white PNGs (made for a dark ground —
   same assets v1/v2 use), so this section needs a dark background or
   they're simply invisible. Matches the dark "featured" bands already
   used elsewhere on the real site (footer, plan grid) rather than
   inventing a new dark motif just for this strip. */
#v3-wall { padding: 90px 0; text-align: center; background: var(--v3-ink); }
/* margin-bottom restores the gap the removed subtitle paragraph used to
   provide (see home_page_v3.html) — without it h2 sits flush against
   .v3-logo-rail with zero space between them. */
#v3-wall h2 { font-size: 22px; color: rgba(255,255,255,0.75); font-weight: 600; margin-bottom: 48px; }
.v3-logo-rail { display: flex; justify-content: center; align-items: center; gap: 40px; row-gap: 28px; flex-wrap: wrap; }
/* Fixed-size slot per logo so every customer takes up the same footprint
   regardless of the source file's own aspect ratio (some are near-square
   marks, others are wide wordmarks) — object-fit: contain scales each logo
   down to fit without cropping or stretching it. */
.v3-logo-item { display: flex; align-items: center; justify-content: center; width: 130px; height: 34px; }
.v3-logo-rail img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 0.75; transition: opacity 0.25s; }
.v3-logo-rail img:hover { opacity: 1; }

/* ---------- Plans ---------- */
#v3-plans { background: var(--v3-ink); color: #fff; }
#v3-plans .v3-section-head h2 { color: #fff; }
#v3-plans .v3-section-head p { color: rgba(255,255,255,0.65); }
.v3-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.v3-plan-card {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--v3-radius);
  padding: 30px 24px; position: relative;
  transition: transform 0.3s var(--v3-ease), background 0.3s;
}
.v3-plan-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.08); }
.v3-plan-card.v3-featured { background: var(--v3-accent-grad); border-color: transparent; }
.v3-plan-card .v3-tag {
  position: absolute; top: -12px; left: 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  background: #fff; color: var(--v3-ink); padding: 4px 10px; border-radius: 20px;
}
.v3-plan-card h3 { font-size: 19px; margin-bottom: 18px; color: #fff; }
.v3-plan-card .v3-data-amount { font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.v3-plan-card .v3-data-unit { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.v3-plan-card.v3-featured .v3-data-unit { color: rgba(255,255,255,0.85); }
.v3-plan-card .v3-plan-extra { margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.v3-plan-card.v3-featured .v3-plan-extra { color: rgba(255,255,255,0.9); }
@media (max-width: 980px) { .v3-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v3-plan-grid { grid-template-columns: 1fr; } }

/* ---------- Closing CTA ---------- */
#v3-close { position: relative; padding: 140px 0; overflow: hidden; text-align: center; }
#v3-close .v3-media { position: absolute; inset: 0; }
#v3-close .v3-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
#v3-close .v3-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,3,76,0.88), rgba(37,67,242,0.82)); }
#v3-close .v3-content { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
#v3-close h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; }
#v3-close p { margin-top: 18px; font-size: 17px; color: rgba(255,255,255,0.85); }
#v3-close .v3-cta-row { margin-top: 36px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.v3-btn-white {
  display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--v3-ink);
  font-weight: 600; font-size: 15px; text-decoration: none; padding: 13px 26px; border-radius: 999px;
  transition: transform 0.25s var(--v3-ease);
}
.v3-btn-white:hover { transform: translateY(-2px); }

@media (max-width: 640px) {
  .v3-wrap { padding: 0 22px; }
  .v3-section { padding: 80px 0; }
}

/* ---------- Guide sidebar (step-by-step pages, e.g. Kom i gang) ---------- */
/* Injected by v3_guide.js only on pages whose body content is actually
   shaped like a numbered step-by-step guide — see that file for detection. */
.v3-guide-shell {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start;
  max-width: 1180px; margin: 0 auto; padding: 64px 32px 110px;
}
/* Grid items default to min-width:auto, which refuses to shrink below the
   intrinsic width of their content (e.g. the pricing table further down
   the guide) — without this, a wide table blows out the whole grid track
   (and the page) instead of using its own overflow-x:auto. */
.v3-guide-sidebar, .v3-guide-content { min-width: 0; }
.v3-guide-sidebar {
  position: sticky; top: 110px;
  background: var(--v3-surface-raised); border: 1px solid var(--v3-line);
  border-radius: var(--v3-radius); padding: 22px;
}
.v3-guide-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v3-muted); }
.v3-guide-progress-count { margin-top: 8px; font-size: 14px; color: var(--v3-ink-soft); }
.v3-guide-progress-count strong { font-family: 'JetBrains Mono', monospace; color: var(--v3-ink); font-weight: 600; }
.v3-guide-progress-bar { margin-top: 10px; height: 6px; border-radius: 6px; background: var(--v3-line); overflow: hidden; }
.v3-guide-progress-fill { height: 100%; background: var(--v3-accent-grad); width: 0%; transition: width 0.3s var(--v3-ease); }
.v3-guide-steps { margin-top: 18px; display: flex; flex-direction: column; }
.v3-guide-step { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--v3-line); }
.v3-guide-step:first-child { border-top: none; }
.v3-guide-check { position: relative; display: flex; flex: none; cursor: pointer; }
.v3-guide-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.v3-guide-check-box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--v3-line);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.v3-guide-check input:checked + .v3-guide-check-box { background: var(--v3-accent-grad); border-color: transparent; }
.v3-guide-check input:checked + .v3-guide-check-box::after {
  content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px);
}
.v3-guide-check input:focus-visible + .v3-guide-check-box { outline: 2px solid var(--v3-accent-1); outline-offset: 2px; }
.v3-guide-step-link {
  flex: 1; display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  padding: 10px 4px; border-radius: 8px; min-width: 0;
}
.v3-guide-step-link:hover { background: rgba(11,3,76,0.04); }
.v3-guide-step-num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--v3-muted); flex: none; }
.v3-guide-step-title { font-size: 13.5px; font-weight: 500; color: var(--v3-ink-soft); line-height: 1.3; }
.v3-guide-step-link.v3-guide-active { background: rgba(37,67,242,0.08); }
.v3-guide-step-link.v3-guide-active .v3-guide-step-title { color: var(--v3-accent-1); font-weight: 600; }
.v3-guide-step-link.v3-guide-active .v3-guide-step-num { color: var(--v3-accent-1); }
.v3-guide-reset {
  margin-top: 14px; width: 100%; background: none; border: none; cursor: pointer;
  font-size: 12.5px; color: var(--v3-muted); text-align: left; padding: 6px 4px;
  font-family: inherit;
}
.v3-guide-reset:hover { color: var(--v3-accent-1); }

/* Each step becomes its own bordered, left-accented card rather than
   plain flowing typography — content itself (headings/paragraphs/tables)
   is untouched, only wrapped. .richtext_content already caps at
   --text-max-width (600px, inline style from the block template), which
   is also a comfortable card width, so the card border goes there rather
   than on the wider outer .stream_block. */
.v3-guide-content { display: flex; flex-direction: column; gap: 18px; }
.v3-guide-content > .stream_block { margin-top: 0; margin-bottom: 0; }
.v3-guide-content .richtext_content {
  border: 1px solid var(--v3-line); border-left: 3px solid var(--v3-accent-1);
  border-radius: var(--v3-radius); background: var(--v3-surface);
  padding: 26px 30px;
}
.v3-guide-card-heading { display: flex; align-items: center; gap: 14px; scroll-margin-top: 110px; }
.v3-guide-card-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--v3-accent-grad); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 900px) {
  .v3-guide-content .richtext_content { padding: 20px 20px; }
}

/* ---------- Long-document table of contents (v3_doc_toc.js) ---------- */
/* A long rich_text block (Vilkår, Personvern, ...) with several internal
   headings gets a sticky left-hand table of contents instead of reading as
   one undifferentiated wall of text. The wrapped .stream_block keeps its
   own vert-m-full/half/none and default_width/default_padding classes for when it's NOT
   inside this shell, so those are neutralized here rather than removed.
   Named "toc" rather than after the page type on purpose — an earlier
   attempt at this class name was silently stripped in transit before the
   browser ever parsed it (a network-level content filter, going by the
   symptom), so this generic name sidesteps whatever pattern that matched. */
.v3-toc-shell {
  display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start;
  max-width: 1180px; margin: 0 auto; padding: 20px 32px 110px;
}
.v3-toc-sidebar, .v3-toc-content { min-width: 0; }
.v3-toc-sidebar {
  position: sticky; top: 110px;
  border-right: 1px solid var(--v3-line); padding-right: 24px;
}
.v3-toc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v3-muted); }
.v3-toc-nav {
  margin-top: 16px; display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 170px); overflow-y: auto;
}
.v3-toc-link {
  font-size: 13.5px; color: var(--v3-ink-soft); text-decoration: none;
  padding: 8px 10px; border-radius: 8px; line-height: 1.35; transition: background 0.2s;
}
.v3-toc-link:hover { background: rgba(11,3,76,0.04); }
.v3-toc-link.v3-toc-link-active { background: rgba(37,67,242,0.08); color: var(--v3-accent-1); font-weight: 600; }
.v3-toc-content .stream_block { margin: 0; padding: 0; max-width: none; width: 100%; }
.v3-toc-heading { scroll-margin-top: 110px; }

/* Sitewide body.v3-body p { margin: 0; } (further up this file) zeroes out
   the natural paragraph gap prose relies on for rhythm, which is fine for
   card copy but leaves a long document reading as one undifferentiated
   block. Restore spacing, and give section headings real breathing room,
   scoped to this wrapper only so nothing else on the site is affected. */
.v3-toc-content .richtext_content > * + * { margin-top: 16px; }
.v3-toc-content .richtext_content h2,
.v3-toc-content .richtext_content h3 {
  margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--v3-line);
}
.v3-toc-content .richtext_content > h2:first-child,
.v3-toc-content .richtext_content > h3:first-child {
  margin-top: 0; padding-top: 0; border-top: none;
}

/* Defined-term paragraph: "<strong>Avtalen</strong> — ...". The term reads
   as its own short line, the definition as normal body text below it. */
.v3-toc-term > strong {
  display: block; font-size: 15px; font-weight: 700; color: var(--v3-ink); margin-bottom: 4px;
}

/* Numbered clause paragraph: "<strong>2.1</strong> ...". The number becomes
   a small fixed-width label so clause text lines up in a column instead of
   the number running into the sentence. */
.v3-toc-clause { display: flex; gap: 14px; align-items: baseline; }
.v3-toc-clause > strong {
  flex: none; min-width: 34px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 700;
  color: var(--v3-accent-1); background: rgba(37,67,242,0.08);
  padding: 3px 8px; border-radius: 6px;
}

@media (max-width: 900px) {
  .v3-toc-shell { grid-template-columns: 1fr; padding: 0 22px 80px; }
  .v3-toc-sidebar {
    position: static; border-right: none; border-bottom: 1px solid var(--v3-line);
    padding: 0 0 20px; margin-bottom: 8px;
  }
  .v3-toc-nav { max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .v3-toc-link { padding: 7px 12px; border: 1px solid var(--v3-line); }
}

/* Device (iPhone/Android) tabs — injected by v3_device_tabs.js */
.v3-device-tabs { margin: 26px 0; }
.v3-device-tab-buttons {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: var(--v3-surface-raised); border: 1px solid var(--v3-line); border-radius: 999px;
}
.v3-device-tab-btn {
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 999px;
  border: none; background: transparent; color: var(--v3-muted); cursor: pointer;
  transition: background 0.2s var(--v3-ease), color 0.2s, box-shadow 0.2s;
}
.v3-device-tab-btn.v3-device-tab-active { background: var(--v3-surface); color: var(--v3-ink); box-shadow: 0 2px 8px rgba(11,3,76,0.12); }
.v3-device-panel-hidden { display: none; }

@media (max-width: 900px) {
  .v3-guide-shell { grid-template-columns: 1fr; padding: 40px 22px 70px; gap: 24px; }
  .v3-guide-sidebar { position: static; }
}

/* ---------- FAQ search-first (injected by v3_faq.js) ---------- */
/* No sidebar: a centered search hero is the primary entry point, with
   category pills as filters and results flowing full-width below —
   deliberately different information architecture from the guide sidebar
   above, since an FAQ is looked up, not read start to finish. */
.v3-faq-search-shell { max-width: 1180px; margin: 0 auto; padding: 64px 32px 110px; }
.v3-faq-hero {
  max-width: 640px; margin: 0 auto 20px; position: relative;
  display: flex; align-items: center;
}
.v3-faq-hero-icon {
  position: absolute; left: 22px; width: 20px; height: 20px; color: var(--v3-muted); pointer-events: none;
}
.v3-faq-hero input {
  width: 100%; font: inherit; font-size: 17px; padding: 18px 22px 18px 54px;
  border: 1px solid var(--v3-line); border-radius: 999px; background: var(--v3-surface);
  color: var(--v3-ink); box-shadow: 0 12px 30px -18px rgba(11,3,76,0.25);
}
.v3-faq-hero input:focus { outline: 2px solid var(--v3-accent-1); outline-offset: 2px; }
.v3-faq-hero input::placeholder { color: var(--v3-muted); }
.v3-faq-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 780px; margin: 0 auto 48px;
}
.v3-faq-pill {
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--v3-line); background: var(--v3-surface);
  color: var(--v3-ink-soft); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.v3-faq-pill:hover { border-color: var(--v3-accent-1); }
.v3-faq-pill-active { background: var(--v3-accent-grad); border-color: transparent; color: #fff; }
.v3-faq-results { max-width: 820px; margin: 0 auto; }
.v3-faq-no-results { padding: 40px 0; text-align: center; color: var(--v3-muted); font-size: 15px; }

/* Result cards: same underlying .faq_item/.faq_body accordion markup and
   toggle JS as v1/v2 (streams/static/streams/js/faq_block.js) — only the
   visual treatment changes here, scoped to v3. */
.v3-body .faq_block > h2 {
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--v3-accent-1); margin-bottom: 16px;
}
.v3-faq-results .faq_block { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 900px) {
  .v3-faq-search-shell { padding: 40px 22px 70px; }
  .v3-faq-hero input { font-size: 15px; padding: 15px 18px 15px 48px; }
}

/* ---------- StreamField block content restyled for v3 ---------- */
/* subscription_cards_block.css / horizontal_cards_block.css /
   feature_showcase_block.css / faq_block.css are shared with v1/v2 pages
   and stay untouched — everything below is scoped under .v3-body so v1/v2
   rendering is completely unaffected. Colors mostly already match (the
   --mobino-* tokens resolve to the same brand palette v3 uses directly),
   this mainly ports typography, radius, motion and hover treatment to
   match the rest of v3. */
.v3-body .block_eyebrow {
  font-family: 'JetBrains Mono', monospace; color: var(--v3-accent-1);
  font-size: 12px; letter-spacing: 0.08em;
}
.v3-body .block_section_head h2 { color: var(--v3-ink); letter-spacing: -0.02em; }
.v3-body .block_intro { color: var(--v3-muted); }

/* Subscription cards */
.v3-body .subscription_cards_block__card {
  border-radius: var(--v3-radius); border-color: var(--v3-line);
  transition: transform 0.25s var(--v3-ease), box-shadow 0.25s var(--v3-ease);
}
.v3-body .subscription_cards_block__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(11,3,76,0.25); }
.v3-body .subscription_cards_block__card--featured { background: var(--v3-accent-grad); }
.v3-body .subscription_cards_block__card_badge { background: var(--v3-ink); font-family: 'JetBrains Mono', monospace; }
.v3-body .subscription_cards_block__card_title { color: var(--v3-ink); }
.v3-body .subscription_cards_block__card_points li { color: var(--v3-ink-soft); }
.v3-body .subscription_cards_block__card_points svg { stroke: var(--v3-accent-1); }
.v3-body .subscription_cards_block__card_price { color: var(--v3-ink); font-family: 'JetBrains Mono', monospace; }
/* The featured card's background above became the (light-ish) accent
   gradient, but only its icon stroke got a matching white override below —
   title/points/price kept the sitewide dark-ink color, rendering near-black
   text on a colored card. */
.v3-body .subscription_cards_block__card--featured .subscription_cards_block__card_title,
.v3-body .subscription_cards_block__card--featured .subscription_cards_block__card_points li,
.v3-body .subscription_cards_block__card--featured .subscription_cards_block__card_price { color: #fff; }
.v3-body .subscription_cards_block__card--featured .subscription_cards_block__card_points svg { stroke: #fff; }
.v3-body .subscription_cards_block__cta {
  border-radius: 999px; border-color: var(--v3-line); color: var(--v3-ink-soft);
  font-weight: 600; transition: transform 0.2s var(--v3-ease), background 0.2s;
}
.v3-body .subscription_cards_block__cta:hover { filter: none; transform: translateY(-2px); background: var(--v3-surface-raised); }

/* Horizontal / value cards */
.v3-body .horizontal_cards_heading { color: var(--v3-ink); }
.v3-body .horizontal_card {
  border-radius: var(--v3-radius); border-color: var(--v3-line);
  transition: transform 0.25s var(--v3-ease), box-shadow 0.25s var(--v3-ease);
}
.v3-body .horizontal_card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(11,3,76,0.25); }
.v3-body .horizontal_card_icon { background: var(--v3-accent-grad); border-radius: 12px; }
.v3-body .horizontal_card_title { color: var(--v3-ink); }
.v3-body .horizontal_card_body { color: var(--v3-muted); }

/* Coverage tabs (v3_coverage.js) — replaces a horizontal_cards_block whose
   cards are comma-list country bodies (Mobino Verden "Fire kontinenter")
   with a tab switcher + chip grid. */
.v3-coverage-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.v3-coverage-tab {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--v3-line);
  background: var(--v3-surface); color: var(--v3-muted); cursor: pointer;
  transition: all 0.2s var(--v3-ease);
}
.v3-coverage-tab:hover { border-color: var(--v3-accent-1); color: var(--v3-ink); }
.v3-coverage-tab-active { background: var(--v3-accent-grad); border-color: transparent; color: #fff; }
.v3-coverage-count { font-size: 14px; color: var(--v3-muted); margin-bottom: 18px; }
.v3-coverage-count strong { color: var(--v3-ink); font-family: 'JetBrains Mono', monospace; font-size: 15px; }
.v3-coverage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-coverage-chip {
  font-size: 14px; padding: 7px 14px; border-radius: 9px;
  background: var(--v3-surface-raised); color: var(--v3-ink-soft);
  border: 1px solid var(--v3-line);
  animation: v3CoverageChipIn 0.35s var(--v3-ease) backwards;
}
@keyframes v3CoverageChipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v3-coverage-chip { animation: none; } }

/* Feature showcase (click-cards + modal) */
.v3-body .feature_showcase_block__badge { color: var(--v3-accent-1); font-family: 'JetBrains Mono', monospace; }
.v3-body .feature_showcase_block__group_heading { color: var(--v3-ink); }
.v3-body .feature_showcase_block__group_intro { color: var(--v3-muted); }
.v3-body .feature_showcase_block__card {
  border-radius: var(--v3-radius); border-color: var(--v3-line); background: var(--v3-surface-raised);
  transition: transform 0.2s var(--v3-ease), border-color 0.2s;
}
.v3-body .feature_showcase_block__card:hover { border-color: var(--v3-accent-1); transform: translateY(-3px); }
.v3-body .feature_showcase_block__card_icon { background: var(--v3-accent-grad); border-radius: 10px; }
.v3-body .feature_showcase_block__card_title { color: var(--v3-ink); }
.v3-body .feature_showcase_block__card_teaser { color: var(--v3-muted); }
.v3-body .feature_showcase_block__card_more,
.v3-body .feature_showcase_block__cta { color: var(--v3-accent-1); }
.v3-body .feature_showcase_block__modal_box { border-radius: var(--v3-radius); background: var(--v3-surface); border-color: var(--v3-line); }
.v3-body .feature_showcase_block__modal_cat { color: var(--v3-accent-1); font-family: 'JetBrains Mono', monospace; }
.v3-body .feature_showcase_block__modal_title { color: var(--v3-ink); }
.v3-body .feature_showcase_block__modal_teaser { color: var(--v3-muted); }
.v3-body .feature_showcase_block__modal_features li { color: var(--v3-ink-soft); }
.v3-body .feature_showcase_block__modal_features li::before { background: var(--v3-accent-grad); }
.v3-body .feature_showcase_block__modal_cta { background: var(--v3-accent-grad); border-radius: 999px; }
.v3-body .feature_showcase_block__modal_close { border-color: var(--v3-line); color: var(--v3-muted); }
.v3-body .feature_showcase_block__modal_close:hover { border-color: var(--v3-accent-1); color: var(--v3-ink); }

/* FAQ result cards (search-first chrome comes from v3_faq.js/.v3-faq-*;
   category eyebrow styling for .faq_block > h2 lives with that block above) */
.v3-body .faq_block .faq_item {
  border: 1px solid var(--v3-line); border-left: 3px solid var(--v3-line);
  border-radius: var(--v3-radius); background: var(--v3-surface);
  transition: border-color 0.2s;
}
.v3-body .faq_block .faq_item:has(.show) { border-left-color: var(--v3-accent-1); }
.v3-body .faq_block .faq_item h3 {
  background: none; border: none;
  color: var(--v3-ink); font-size: 15.5px; font-weight: 600; padding: 18px 22px;
  cursor: pointer;
}
.v3-body .faq_block .faq_item .faq_body {
  background: none; color: var(--v3-muted);
  padding: 0 22px 20px;
}

/* Generelle priser country search — smaller gap already (no font mismatch),
   just round it to match v3's radius scale. */
.v3-body .prices-abroad__search,
.v3-body .prices-abroad__dropdown,
.v3-body .prices-abroad__tab { border-radius: var(--v3-radius); }