/* ── Designsystem: skala ét sted ────────────────────────────────────────────
   Tallene er ikke opfundet. De er den skala Webflow-exporten faktisk bruger,
   maalt i browseren paa tvaers af sider og bredder, og skrevet ned saa der er
   eet sted at slaa dem op i stedet for et tal i hver komponent.

   Reglen herfra: en ny stoerrelse skal vaere et af de her trin. Passer den
   ikke, er det skalaen der skal aendres, ikke komponenten.

   Typografien foelger exportens egne trin: 10, 12, 13, 14, 16, 18, 20, 24,
   28 og 36px. Afstande og radier gaar i spring af 4px fra 2 og op. */
:root {
  --type-3xs: 0.625rem;   /* 10 */
  --type-2xs: 0.75rem;    /* 12 */
  --type-xs: 0.8125rem;   /* 13 */
  --type-sm: 0.875rem;    /* 14 */
  --type-md: 1rem;        /* 16 */
  --type-lg: 1.125rem;    /* 18 */
  --type-xl: 1.25rem;     /* 20 */
  --type-2xl: 1.5rem;     /* 24 */
  --type-3xl: 1.75rem;    /* 28 */
  --type-4xl: 2.25rem;    /* 36 */

  --space-3xs: 0.125rem;  /* 2  */
  --space-2xs: 0.25rem;   /* 4  */
  --space-xs: 0.375rem;   /* 6  */
  --space-sm: 0.5rem;     /* 8  */
  --space-md: 0.75rem;    /* 12 */
  --space-lg: 1rem;       /* 16 */
  --space-xl: 1.25rem;    /* 20 */
  --space-2xl: 1.5rem;    /* 24 */
  --space-3xl: 1.75rem;   /* 28 */
  --space-4xl: 2rem;      /* 32 */
  --space-5xl: 2.5rem;    /* 40 */
  --space-6xl: 3rem;      /* 48 */

  --radius-xs: 0.125rem;  /* 2  */
  --radius-sm: 0.25rem;   /* 4  */
  --radius-md: 0.375rem;  /* 6  */
  --radius-lg: 0.5rem;    /* 8  */
  --radius-xl: 0.75rem;   /* 12 */
}

/* Project overrides on top of the exported Webflow CSS. Add custom tweaks here;
   do not edit the generated webflow css files. */
main {
  display: block;
}

/* Mobile/tablet language switcher: flow the chevron right after the label (the
   exported CSS absolute-positions it to the far edge, leaving a huge gap) and
   keep the label readable at small breakpoints. */
.language_switcher-wrapper.is-tablet {
  text-align: center;
}
.language_switcher-wrapper.is-tablet .dropdown-toggle {
  width: auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding-right: 0;
}
.language_switcher-wrapper.is-tablet .local-text {
  order: 1;
  font-size: var(--type-lg);
  line-height: 100%;
}
.language_switcher-wrapper.is-tablet .icon {
  order: 2;
  position: static;
  inset: auto;
  margin: 0;
  transform: none;
}

/* Topbar language switcher: it's a <div> (needs to be, for the dropdown
   widget), so it misses the browser-default `a { font-weight: 500 }` rule
   its sibling nav links (real <a> tags) get for free — match it explicitly.
   Also drop the default focus ring; the dropdown already shows its open
   state visually (white panel), so a browser outline is just noise here. */
.language_switcher-wrapper .dropdown-toggle {
  font-weight: 500;
}
/* The wrapper is a plain block box taller than its content (24px toggle
   inside a ~37.5px line box), so normal text-flow placement sat the toggle
   near the bottom instead of centered — unlike sibling nav links, which are
   centered by the parent .button-group's flexbox directly. Flexing the
   wrapper itself (and its one unstyled inner div) centers it the same way. */
.language_switcher-wrapper:not(.is-tablet) {
  display: flex;
  align-items: center;
  height: 100%;
}
.language_switcher-wrapper:not(.is-tablet) > div {
  display: flex;
  align-items: center;
}
/* The dropdown chevron is absolutely positioned and bottom-aligned by a
   shared `.icon` rule elsewhere on the site (`inset: auto -1rem 0% auto`),
   which sits it 6px lower than the globe icon/text. Same fix as the tablet
   variant above: let it flow as a normal flex child instead, so the
   toggle's own `align-items: center` centers all three pieces together. */
.language_switcher-wrapper:not(.is-tablet) .dropdown-toggle .icon.w-icon-dropdown-toggle {
  position: static;
  inset: auto;
  margin: 0;
}
.language_switcher-wrapper .dropdown-toggle:focus,
.language_switcher-wrapper .dropdown-toggle:focus-visible {
  outline: none;
}
/* The dropdown list only got `min-width: 100%` (of the ~90px toggle) from
   Webflow's base .w-dropdown-list rule, so "Dansk (DK)" / "English (EN)"
   wrapped to two lines. Size it to its content instead. */
.language_switcher-wrapper .dropdown-local {
  min-width: max-content;
}
.language_switcher-wrapper .locales-list a {
  white-space: nowrap;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-md);
  display: block;
}
.language_switcher-wrapper .locales-list a:hover {
  background-color: var(--_primitives---frankly-warm-beige--limestone-20);
}
.language_switcher-wrapper .locales-list a.w--current {
  color: var(--_primitives---base--40-black);
}
/* Footer variant: same component as the topbar, but it sits on a light
   background, so the trigger (icon + label, via `currentColor`) needs to be
   dark instead of the `.button.is-link.is-icon` default light text color.
   Matches `.footer6_credit-text` right next to it. */
.language_switcher-wrapper.is-light .dropdown-toggle {
  color: var(--_primitives---base--black);
}

/* Blog body images (PortableText `richImage` → figure.post-image).
   The class was emitted but never styled, so images rendered narrow. Two causes:
   the UA <figure> side margins, and webflow.css's `.w-richtext figure` capping
   figures at max-width:60%. The selector below is scoped to .w-richtext so it
   outranks that rule (0,2,1 vs 0,1,1) rather than relying on !important. */
.w-richtext figure.post-image,
.post-image {
  max-width: 100%;
  margin: 2.5rem 0;
}
.post-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--_ui-styles---radius--medium);
}
.post-image figcaption {
  margin-top: 0.75rem;
  font-size: var(--type-sm);
  color: var(--_primitives---base--40-black);
}

/* ---------------------------------------------------------------------------
   Stats row icons (support, priser, anmeld-skade, forsiden, partnere)

   The exported SVGs carry width="100%" height="100%" with a 30x30 viewBox, and
   .contact17_icon-wrapper sets no size of its own. Everywhere else on the site
   that flex row sits inside a width-constrained container, so the icon resolves
   to 24-30px and looks right. Inside .about_numbers-wrapper it is a grid cell
   with nothing to constrain it, so the same icon stretched to ~150px — a row of
   giant beige squares above each number.

   Measured on /support before the fix: 13 icon rows, 9 correct at 24-30px, and
   exactly the 4 in the stats block blown up to 130-148px.

   Scoped to the stats cell on purpose. The pattern is used 86 times across the
   site and only fails here; a global rule would risk shrinking the ones that
   are already correct.
   --------------------------------------------------------------------------- */
.about_content_numbers-wrapper .tab_icon_text-wrapper > .contact17_icon-wrapper {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
}
.about_content_numbers-wrapper .tab_icon_text-wrapper > .contact17_icon-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Heading line-height at tablet and laptop widths

   The Figma scale sets one ratio per size (4XL 82/88, 2XL 62/68, Large 50/56 —
   about 1.07 to 1.12). The exported Webflow CSS honours that in the desktop
   base rules but not in the responsive overrides, where the font shrinks and the
   line-height does not follow:

     display-2xl   992-1439px  54/72  = 1.33
     display-2xl    768-991px  36/44  = 1.22
     display-2xl    480-767px  32/40  = 1.25
     display-large  768-991px  28/40  = 1.43
     display-4xl    768-991px  56/64  = 1.14
     display-4xl   under 768px 48/56  = 1.17

   So on an ordinary laptop the headlines opened up to 1.33 while the design says
   1.10. Font sizes are left alone — the responsive scaling is deliberate. Only
   the line-height is brought back to the Figma ratio.

   Overridden here rather than in the exported stylesheet: that file is vendored
   and gets replaced wholesale if the export is ever re-run. app.css loads last,
   so these win at equal specificity.
   --------------------------------------------------------------------------- */
/* Scoped to the range where Webflow's base rule actually applies. Unscoped it
   would also beat the min-width:1440px rule, since app.css loads last. */
@media screen and (min-width: 992px) and (max-width: 1439px) {
  .display-2xl { line-height: 3.75rem; } /* 54/60 = 1.11 */
}

@media screen and (max-width: 991px) {
  .display-4xl { line-height: 3.75rem; }  /* 56/60 = 1.07 */
  .display-2xl { line-height: 2.5rem; }   /* 36/40 = 1.11 */
  .display-large { line-height: 2rem; }   /* 28/32 = 1.14 */
}

@media screen and (max-width: 767px) {
  .display-4xl { line-height: 3.25rem; }    /* 48/52 = 1.08 */
  .display-2xl { line-height: 2.25rem; }    /* 32/36 = 1.13 */
  /* Webflow drops this to 20px here and leaves the line at 40px — a ratio of 2.0,
     so a two-line heading reads as two separate lines. */
  .display-medium { line-height: 1.375rem; } /* 20/22 = 1.10 */
}

@media screen and (max-width: 479px) {
  .display-4xl { line-height: 3.25rem; }  /* 48/52 = 1.08 */
  /* Webflow bumps these back up to 36px here and already had the ratio right at
     36/40. The 991px and 767px overrides above would otherwise leak down and
     leave display-large at 36/32 — lines close enough to touch. */
  .display-2xl { line-height: 2.5rem; }   /* 36/40 = 1.11 */
  .display-large { line-height: 2.5rem; } /* 36/40 = 1.11 */
  /* Same story: font drops to 26px, line stays at 32px. */
  .display-small { line-height: 1.875rem; } /* 26/30 = 1.15 */
}

/* ── Hero-follow-on band: one phrase per line, design's rhythm ─────────────
   The "Vi passer på det, du er øm over. / Lad cyklen 🚲 stå på gaden. / …"
   block under the hero.

   It exists TWICE in the markup, with different copy, and only one is ever
   visible:

     .show-mobile-landscape   ≤767px   "We take care of your things."
     .hide-mobile-landscape   ≥768px   "We take care of the things you love."

   Both are handled here. Fixing one is the easy mistake — the copy differs, so
   searching for the mobile wording never surfaces the desktop block.

   FAULT 1 — wrapping. The design puts each phrase on a single line. Two things
   broke that: English runs ~28% wider than Danish ("Just drink red wine on your
   couch." wants 427px at 24px against 338px of usable width at 375px), and
   above 991px the heading jumped to 54.4px at a 1000px viewport where the
   longest line needs 1049px and only 900px exists. That band, roughly
   992–1350px, is what a laptop shows, and it was the worst of it.

   `nowrap` guarantees the single line; the fluid size makes it fit. Both vw
   figures are measured: the widest line needs ~17.8px (mobile) and ~19.3px
   (desktop) of width per 1px of font, against a column about 0.9 of the
   viewport. 5.0vw fits exactly at the 320px floor with nothing spare, so mobile
   takes 4.8; 4.5vw still overflows at 1000px and 4.3vw is the first that fits,
   so desktop takes 4.2. Caps are the sizes the design already used.

   FAULT 2 — the rows drifted apart. Each phrase is its own flex row, and the
   row took its height from whatever was tallest inside it. The pink chip is
   taller than the text, so a row holding one was taller than a row without:
   gaps came out 33 / 40 / 33 / 37 / 40px.

   A fixed line-height evens that out but leaves the block far too airy — at
   18px text a 40px line is a ratio of 2.2, where the design is about 1.7. The
   fix is instead to pin the row to `height: font × 1.7` so a chip cannot expand
   it, and let the chip overhang into its neighbours. That is what the design
   does: at 1.7 the chips meet exactly edge to edge and the artwork overlaps by
   ~14px, which Frankly confirmed is intended.

   The artwork is `position: absolute` and contributes nothing to layout, so it
   is free to overhang — but it was pinned to a fixed negative `top`, which left
   it hanging above its chip rather than sitting on it. Centring it keeps the
   overhang symmetrical at every size.

   Desktop keeps its own rhythm: its chip scales with the row, so it already sat
   at ~1.64 and only needed the wrap fix and the centring.

   Verified in both languages at 320, 375, 386, 645, 767, 768, 1000 and 1440px:
   no overflow, every gap between lines identical, artwork centred on its chip. */
/* The export positions the artwork with a fixed `left: 2.1rem` inside a chip
   whose width scales with the row. On a wide row that reads as slightly off
   centre; by the time the chip is down to 80px the 137px-wide rule has shrunk
   the picture to 56px but the 33.6px offset has not moved, so the artwork hangs
   off the right-hand edge of its own chip. Measured: right gaps of -9, -18 and
   -20px at a 560px viewport.

   left/right 0 with auto side margins centres an absolutely positioned box
   without touching `transform`, which the 3D hover effect writes to. */
.pink-bg .image {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  /* Measured, not guessed: binary-searching the largest font that keeps every
     nowrap row inside the viewport. Danish has room for 7.06vw, but English
     runs longer ("Just drink red wine on your couch.") and tops out at 5.67vw
     at 560px, so English sets the number.

     The English ceiling is not a smooth curve: it climbs to 34px at 430 and
     then drops to 27px at 480, where the band reflows and a longer row becomes
     the binding one. Any single formula has to pass under that dip, which is
     what holds the whole range back. Measured largest-that-fits, Danish then
     English: 23/26 at 320, 27/30 at 375, 30/34 at 430, 35/27 at 480, 41/32 at
     560, 55/45 at 767.

     calc(8px + 3.4vw) clears every one of them with 9% to spare at the
     tightest (480 in English).

     The 24px ceiling it replaces left the band at 24px on a 560px window where
     30px fits, which is what made the block read small. Capped at 32px because
     that is what the desktop band is at 768: the two sides of the breakpoint
     now meet instead of jumping. */
  .header105_heading-wrapper.show-mobile-landscape {
    --band-font: clamp(14px, calc(8px + 3.4vw), 32px);
  }
  .header105_heading-wrapper.show-mobile-landscape .heading_image-wrapper {
    align-items: center;
    /* height, not min-height: a taller chip must not push the rows apart. */
    height: calc(var(--band-font) * 1.7);
    min-height: 0;
    white-space: nowrap;
  }
  .header105_heading-wrapper.show-mobile-landscape .display-2xl {
    font-size: var(--band-font);
    line-height: calc(var(--band-font) * 1.7);
    white-space: nowrap;
  }
  .header105_heading-wrapper.show-mobile-landscape .pink-bg img {
    top: 50%;
    transform: translateY(-50%);
  }
}

@media screen and (min-width: 768px) {
  .header105_heading-wrapper.hide-mobile-landscape {
    --band-font: clamp(30px, 4.2vw, 62px);
  }
  .header105_heading-wrapper.hide-mobile-landscape .heading_image-wrapper {
    align-items: center;
    white-space: nowrap;
  }
  .header105_heading-wrapper.hide-mobile-landscape .display-2xl {
    font-size: var(--band-font);
    white-space: nowrap;
  }
  .header105_heading-wrapper.hide-mobile-landscape .pink-bg img {
    top: 50%;
    transform: translateY(-50%);
  }
}


/* ── Social proof ribbon: the five real customers ─────────────────────────
   Frankly supplied photographs and copy for Frederik, Clara, Simon, Asker and
   Selma, replacing the four placeholder people the migration shipped with.

   Deliberately NEW class names rather than reusing .is-2/.is-3/.is-4. Those are
   also on /priser and /support, and CSS is global — editing them would swap the
   photos on all three pages at once. The homepage is being approved first, so
   the old classes stay untouched until the rest follow.

   Cropped to the card's 660x1000 at 2x. Clara's needed an off-centre crop to
   keep the dog in the basket, which a centred one cut in half. Asker's source
   is only 501px wide and is served at native size rather than upscaled — the
   one image that will look slightly soft; a larger original would fix it.

   background-image only; sizing and position come from .testimonial21_card. */
.testimonial21_card.is-person-frederik { background-image: url('https://cdn.sanity.io/images/xw2kvekc/production/6e955c3ef24ed38f470a842d3696e54513176a4d-1320x2000.jpg'); }
.testimonial21_card.is-person-clara    { background-image: url('https://cdn.sanity.io/images/xw2kvekc/production/3e035abcf5a7e019628aab5531dbe7e2cddd3e88-1320x2000.jpg'); }
.testimonial21_card.is-person-simon    { background-image: url('https://cdn.sanity.io/images/xw2kvekc/production/2b0decc7f0afdbbf286e521ee42333dda3122ca8-1320x2000.jpg'); }
.testimonial21_card.is-person-asker    { background-image: url('https://cdn.sanity.io/images/xw2kvekc/production/1fae06dd9a558b3bd9c62ab8ad2782ef716bcae5-501x759.jpg'); }
.testimonial21_card.is-person-selma    { background-image: url('https://cdn.sanity.io/images/xw2kvekc/production/f1da38538f3c500d95499da130660589fd00f589-1026x1555.jpg'); }

/* ── Social proof marquee: loop on the content's own width ────────────────
   The ribbon visibly jumped every time it restarted.

   Webflow drives it with an interaction that translates the strip a HARDCODED
   distance — the action lists carry -112rem, -135rem and -198rem over 30-50s.
   The strip is two identical blocks side by side, so a seamless loop has to
   travel exactly one block. Measured at a 1280px viewport that block is 169rem,
   which matches none of those numbers, and it changes with the viewport, so no
   fixed value could ever be right. At the end of each pass the strip sat at an
   arbitrary offset and snapped back to zero.

   Here the distance is the block's measured width instead, set as
   --marquee-shift by the initialiser in wf-embeds-body.js and refreshed on
   resize. At -1 block the second block sits exactly where the first began, so
   the frame before the wrap and the frame after it are identical.

   --marquee-time keeps a constant ~70px/s, which is the speed Webflow's
   version ran at on desktop, rather than a fixed duration that would crawl on
   wide screens and race on narrow ones.

   A CSS animation overrides inline styles for the property it animates, so
   Webflow's interaction can keep writing its transform without effect. It is
   left in place rather than unpicked from the IX data. */
@keyframes frankly-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-shift, 0px)), 0, 0); }
}

.testimonial21_component {
  animation: frankly-marquee var(--marquee-time, 40s) linear infinite;
  will-change: transform;
}

/* Matches the hover-pause the ribbon already had. */
.testimonial21_component:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .testimonial21_component { animation: none; }
}

/* ── The trademark mark, everywhere ───────────────────────────────────────
   `<sup>TM</sup>` inherited the browser default of 0.75em, so against a 28px
   card quote it rendered at 21px — almost as large as the words around it, and
   sitting on the baseline rather than raised, so it read as part of the
   sentence instead of a mark on the name.

   0.5em is the conventional size for a trademark superscript.

   The offset took three passes. `super` floated it well clear of the words;
   0.25em still read as hanging. The reason is that matching the two BOXES is
   not the same as matching the two glyphs — a `C` leaves more space between its
   box top and its ink than `TM` does, and the gap scales with font size, so the
   half-size mark always sits visually higher than the arithmetic suggests.
   Judged by eye at 132px instead: -0.05em is where the top of the TM meets the
   top of the C.

   `line-height: 0` keeps the mark out of the line box, which is why the quote
   block stays exactly 96px tall through all of this.

   Applies to every `sup` on the site, which is safe: all 602 of them contain
   the string "TM" and nothing else — there are no footnotes or exponents to
   catch by accident.

   Both values are in `em`, so the mark keeps exactly the same position relative
   to the letter beside it at any size. Verified against the font's own metrics
   at 14, 20, 28, 44, 62 and 132px: the mark's ink sits at 0.452 of the C's
   height at every one of them, spread 0.0000. One rule covers the nav, body
   copy, card quotes and headings without a second pass.

   The mark also needs a hair of space before it. At the smaller size it sat
   flush against the preceding letter — most obvious in the footer's product
   list, where "Frankly Care" and the mark ran together. 0.12em of the mark's
   own size is enough to separate them; 0.3em was tried and reads as detached.
   Being in em it scales with everything else. */
sup {
  font-size: 0.5em;
  vertical-align: -0.05em;
  line-height: 0;
  margin-left: 0.12em;
}

/* ==========================================================================
   Hero image rotator  (blocks/FullImageHeroBlock.astro)
   --------------------------------------------------------------------------
   Lets the full-image hero cycle through several photographs. Built only from
   what header5 already establishes — the slides reuse .header5_background-image
   verbatim, so sizing, cropping and the overlay are untouched; the only thing
   added here is which one is visible.

   Prefixed .hero-rotator__* because this is a genuine gap in the design system:
   no rotating hero existed before. See DESIGN-SYSTEM.md "Gaps".
   ========================================================================== */

.hero-rotator__slide {
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}

.hero-rotator__slide.is-active {
  opacity: 1;
}

/* Legibility scrim.
   header5's own .overlay is a horizontal gradient: ~30% of the brand dark on the
   left, gone by 54.5%. That works on /partnere, where the copy is left-aligned
   over a photograph chosen to be dark on that side. Neither holds here. The copy
   centres on phones, so it sits in the transparent half; and the whole point of
   a rotator is that the photograph changes, so no single image's tonality can be
   relied on.

   This sits between the photographs and the original overlay, so the partner
   treatment still reads on top of it and nothing about header5 is overridden.
   Vertical on phones, where the text is centred and the button sits low;
   horizontal from tablet up, matching the original direction. */
.hero-rotator::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background-image: linear-gradient(180deg, #2d001133 0%, #2d001199 100%);
}

@media (min-width: 768px) {
  .hero-rotator::after {
    background-image: linear-gradient(90deg, #2d0011b3 0%, #2d001159 55%, #2d001100 100%);
  }
}

/* ── Hero eyebrow lockup ─────────────────────────────────────────────────── */
.hero-eyebrow {
  gap: 0.6rem;
}

/* The wordmark ships at 116x31. Sized against the eyebrow text beside it, not
   against its own line box, so the two read as one lockup rather than a small
   logo next to large words. */
.hero-eyebrow__logo {
  width: auto;
  height: 1.6rem;
  flex: none;
}

/* .paragraph is the hero body size and dwarfs the wordmark. Bring the text down
   to the logo - and then a notch further, so the wordmark leads the lockup and
   the event name sits second. */
.hero-eyebrow .paragraph {
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

@media (min-width: 768px) {
  .hero-eyebrow__logo { height: 1.9rem; }
  .hero-eyebrow .paragraph { font-size: 1.375rem; }
}

/* The wordmark is drawn in brand dark; over a photograph it has to be white. */
.hero-eyebrow__logo path {
  fill: currentColor;
}

/* ── Offer badge ─────────────────────────────────────────────────────────────
   A vintage enamel badge, angled as if stuck on. The drawing lives in
   blocks/OfferBadge.astro; this places, shades and animates it.

   It straddles the seam between the hero and the section below, over to the
   right. Hanging over the join is what makes it read as something applied on
   top rather than composited into the photograph.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-sticker {
  position: absolute;
  z-index: 4;
  right: 8%;
  bottom: 0;
  width: 7.5rem;
  pointer-events: none;
  /* Two shadows: a tight one for the edge, a wide soft one for the lift. */
  filter:
    drop-shadow(0 2px 2px #2d001140)
    drop-shadow(0 12px 22px #2d00114d);
  transform: translateY(50%) rotate(-8deg);
  animation: hero-sticker-in 700ms cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

/* A slow, shallow sway - enough to catch the eye on a still page, not enough to
   read as a broken animation. */
@media (prefers-reduced-motion: no-preference) {
  .hero-sticker {
    animation:
      hero-sticker-in 700ms cubic-bezier(0.34, 1.3, 0.64, 1) both,
      hero-sticker-sway 6s ease-in-out 700ms infinite;
  }
}

@keyframes hero-sticker-in {
  from { opacity: 0; transform: translateY(50%) rotate(14deg) scale(0.6); }
  to   { opacity: 1; transform: translateY(50%) rotate(-8deg) scale(1); }
}

@keyframes hero-sticker-sway {
  0%, 100% { transform: translateY(50%) rotate(-8deg); }
  50%      { transform: translateY(50%) rotate(-3deg); }
}

.offer-badge {
  display: block;
  width: 100%;
  height: auto;
}

/* Rim text is spaced the way stamped lettering is; the offer in the middle is
   tighter so it reads as the loud part. No uppercase transform - TechBBQ is a
   name, and shouting it breaks its spelling. */
.offer-badge__rim {
  font-family: inherit;
  font-size: var(--type-2xs);
  font-weight: 700;
  letter-spacing: 0.9px;
}

.offer-badge__line {
  font-family: inherit;
  font-size: var(--type-md);
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .hero-sticker {
    right: 6%;
    width: 10rem;
  }
}

/* ── Hero video ──────────────────────────────────────────────────────────────
   The video fills the hero exactly as a background image does - it reuses
   .header5_background-image for sizing and only needs object-fit, which that
   class already sets for <img> but not for <video>.

   The poster is also emitted as a still <img> underneath. It shows through
   while the video buffers, and replaces the video entirely for anyone who has
   asked their system to reduce motion.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-video {
  object-fit: cover;
}

.hero-video__still {
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero-video__still {
    z-index: auto;
  }
}

/* ── Hero pagination ─────────────────────────────────────────────────────────
   One control per slide. Each is a track; the active one fills left-to-right
   over the same 5s the rotator uses, so the indicator doubles as a countdown.
   Once the reader picks a slide, .is-manual stops the fill and the active dot
   simply stays full. */
.hero-rotator__pagination {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 2rem;
  display: flex;
  gap: var(--space-sm);
}

.hero-rotator__dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 2.75rem;
  height: 0.25rem;
  border-radius: var(--radius-xs);
  background-color: #ffffff59;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 300ms ease;
}

.hero-rotator__dot:hover {
  background-color: #ffffff8c;
}

.hero-rotator__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hero-rotator__dot-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: #ffacca;
  transform: scaleX(0);
  transform-origin: left center;
}

.hero-rotator__dot.is-active .hero-rotator__dot-fill {
  animation: hero-dot-fill 5s linear forwards;
}

.is-manual .hero-rotator__dot.is-active .hero-rotator__dot-fill,
.hero-rotator__dot[aria-selected='true'] .hero-rotator__dot-fill {
  transform: scaleX(1);
}

.is-manual .hero-rotator__dot .hero-rotator__dot-fill {
  animation: none;
  transition: transform 300ms ease;
}

.is-manual .hero-rotator__dot[aria-selected='false'] .hero-rotator__dot-fill {
  transform: scaleX(0);
}

@keyframes hero-dot-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 767px) {
  /* The sticker owns the bottom-right corner on a phone, so the dots take the
     left. On desktop there is room for both and they stay on the right. */
  .hero-rotator__pagination {
    left: 1rem;
    right: auto;
    bottom: 1.25rem;
  }
  .hero-rotator__dot {
    width: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rotator__dot .hero-rotator__dot-fill {
    animation: none;
  }
}

.hero-rotator__text-link {
  color: inherit;
  font-size: var(--type-md);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Reduced motion: the rotator script never starts, so the first slide would be
   the only one with .is-active. Show every slide at full opacity instead —
   stacked, the last one paints, and the hero is a still image. */
@media (prefers-reduced-motion: reduce) {
  .hero-rotator__slide,
  .hero-rotator__slide.is-active {
    opacity: 1;
    transition: none;
  }
}

/* ── Campaign moment scrim  (blocks/BigOfferBlock.astro) ─────────────────────
   header50 puts white type straight onto a photograph with no scrim of its own,
   which works on /support because that image is dark where the text sits. A
   campaign section cannot assume that, and this is the one block on the page
   that has to be readable at a glance. Brand dark, heavier at the top where the
   headline is. */
.big-offer__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, #2d0011cc 0%, #2d001180 55%, #2d001159 100%);
}

@media (min-width: 768px) {
  .big-offer__scrim {
    background-image: linear-gradient(100deg, #2d0011d9 0%, #2d001199 55%, #2d001140 100%);
  }
}

.big-offer__footnote {
  opacity: 0.7;
}

/* Hero actions sit side by side, and wrap rather than overflow on a narrow
   phone. .button-group is a flex row with no wrap of its own. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* The badge hangs half its height below the hero. Give the hero a matching
   bottom margin so the overhang lands in empty space instead of on the first
   line of the section below - the page background is the same colour either
   side of the seam, so this is invisible except as breathing room. */
.section_header5:has(.hero-sticker) {
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .section_header5:has(.hero-sticker) {
    margin-bottom: 2.5rem;
  }
}

/* And keep the hero's own actions clear of it. */
@media (max-width: 767px) {
  .section_header5:has(.hero-sticker) .header5_content .padding-section-large {
    padding-bottom: 5.5rem;
  }
}

/* ── Feature grid on a photograph  (blocks/FeatureGridBlock.astro) ───────────
   The section fills with an image and the cards become frosted glass over it,
   stacked down the left half so the picture is never fully covered. On phones
   they take the full width - a 375px column cannot spare half of itself.

   backdrop-filter is the whole effect and it is not universally supported, so
   the cards carry a solid-enough background of their own: without the blur they
   read as tinted panels rather than as nothing.
   ─────────────────────────────────────────────────────────────────────────── */
.section_feature-on-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Set here rather than via .text-color-white: that class does not exist in
     the stylesheet, so the heading was inheriting near-black onto a dark
     photograph. */
  color: #fff;
}

.section_feature-on-image h2,
.section_feature-on-image > * p {
  color: inherit;
}

.feature-on-image__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.feature-on-image__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Only over the copy. From tablet up the cards occupy the left half, so the
   scrim covers that and is fully clear by 72% - the right side of the
   photograph carries no text and does not need darkening. Phones keep a
   vertical scrim, because there the copy runs the full width. */
.feature-on-image__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, #2d0011b8 0%, #2d001199 60%, #2d0011ad 100%);
}

@media (min-width: 768px) {
  .feature-on-image__scrim {
    background-image: linear-gradient(
      90deg,
      #2d0011cc 0%,
      #2d0011a1 26%,
      #2d00115c 44%,
      #2d00111f 58%,
      #2d001100 72%
    );
  }
}

/* One column down the left, not the usual three across. */
.card-row39_component.is-stacked-left {
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .card-row39_component.is-stacked-left {
    max-width: 30rem;
  }
}

/* No panel: icon and text straight onto the photograph. Three short lines of
   copy did not need a box, and the boxes were taking the space of four. The
   scrim underneath is what keeps them readable. */
.card-row39_card.is-glass {
  background-color: transparent;
  border: 0;
  color: #fff;
  padding: 0;
}

/* The icon box is limestone on a limestone card; on glass it has to be glass
   too, or it reads as a sticker stuck to the panel. */
.card-row39_card.is-glass .contact17_icon-wrapper rect {
  fill: #ffffff26;
}

.card-row39_card.is-glass .contact17_icon-wrapper path,
.card-row39_card.is-glass .contact17_icon-wrapper g {
  stroke: #fff;
}


/* ── Video hero: nav, headline width, and the fade into the page ─────────────
   Only pages whose hero is a video. :has() keeps this out of /partnere and the
   other header5 pages, which have their own dark-on-light balance.
   ─────────────────────────────────────────────────────────────────────────── */

/* The nav bar is a solid white strip on every other page. Over the hero video
   it goes transparent and inverts, then changes back as soon as the reader
   scrolls past the hero.

   Driven by a class on <body> that FullImageHeroBlock's script toggles from an
   IntersectionObserver, not by a scroll handler: the observer fires only at the
   boundary, where a scroll listener would run on every frame.

   Everything transitions on the same 320ms curve so the bar, the wordmark, the
   links and the burger change together rather than in a ripple. */
body:has(.hero-video) .nav-wrap,
body:has(.hero-video) .navbar2_logo-link svg path,
body:has(.hero-video) .navbar2_link,
body:has(.hero-video) .navbar2_dropdwn-toggle,
body:has(.hero-video) .menu-icon2_line-top,
body:has(.hero-video) .menu-icon2_line-middle,
body:has(.hero-video) .menu-icon2_line-bottom {
  transition:
    background-color 320ms ease,
    color 320ms ease,
    fill 320ms ease;
}

body.nav-over-hero .nav-wrap {
  background-color: transparent;
}

/* And explicitly back to white once past the hero. The white it had before came
   from somewhere the cascade would not give back on its own - probably the
   Webflow runtime - so it is stated here rather than left to revert. */
body:has(.hero-video):not(.nav-over-hero) .nav-wrap {
  background-color: #fff;
}

body.nav-over-hero .navbar2_logo-link svg path {
  fill: #fff;
}

/* The chevron beside "Coverage" is inline SVG with fill="currentColor", so the
   toggle's colour carries it. The toggle is .navbar2_dropdwn-toggle - spelled
   that way in the Webflow export - and is not a .navbar2_link, which is why it
   stayed dark when only the links were inverted. */
body.nav-over-hero .navbar2_link,
body.nav-over-hero .navbar2_dropdwn-toggle {
  color: #fff;
}

/* The burger is three divs coloured by background, not by `color`. The class is
   menu-icon2_line-* in the export - the earlier rule targeted menu-icon_line-*
   without the 2 and silently matched nothing. */
body.nav-over-hero .menu-icon2_line-top,
body.nav-over-hero .menu-icon2_line-middle,
body.nav-over-hero .menu-icon2_line-bottom {
  background-color: #fff;
}

/* Open, the burger becomes an X over the menu's own light panel, so it has to
   go back to dark or it disappears. Webflow puts w--open on the button. */
body.nav-over-hero .w-nav-button.w--open .menu-icon2_line-top,
body.nav-over-hero .w-nav-button.w--open .menu-icon2_line-middle,
body.nav-over-hero .w-nav-button.w--open .menu-icon2_line-bottom {
  background-color: #2d0011;
}

/* Once the mobile menu is open it has its own light panel behind it, so the
   links have to go back to dark or they vanish into it. */
body.nav-over-hero .w-nav-menu[data-nav-menu-open] .navbar2_link,
body.nav-over-hero .w-nav-menu[data-nav-menu-open] .navbar2_dropdwn-toggle {
  color: #2d0011;
}

/* The headline is authored as two lines. .max-width-medium (35rem) forced each
   of them to wrap again, turning two lines into four. */
.hero-copy {
  max-width: 46rem;
}

@media (max-width: 767px) {
  /* No room to hold two lines on a phone - let them wrap, but keep the two
     sentences as separate blocks. */
  .hero-copy {
    max-width: 100%;
  }
}

/* A stronger left-to-right scrim over the video than the still-image heroes
   need: video is always moving, so there is no frame you can pick the copy's
   contrast against. */
.section_header5:has(.hero-video) .header5_background-image.overlay {
  background-image: linear-gradient(90deg, #2d0011cc 0%, #2d00118c 45%, #2d00113d 75%, #2d00111a 100%);
}

@media (max-width: 767px) {
  .section_header5:has(.hero-video) .header5_background-image.overlay {
    background-image: linear-gradient(180deg, #2d001199 0%, #2d0011b3 55%, #2d0011cc 100%);
  }
}

/* Fade the bottom of the hero into the page background instead of cutting it
   off at a hard edge. limestone-10 is the page colour, so the video appears to
   dissolve into the section below rather than stopping.

   Two things make this read as smooth rather than as a band. First it is tall -
   14rem, and the hero is given 3rem of extra height to spend on it, so the ramp
   is gentle. Second the stops approximate an ease rather than a straight line:
   a linear alpha ramp between two colours has a visible edge at each end, where
   the eye picks up the sudden change in rate. */
.section_header5:has(.hero-video) .header5_content .padding-section-large {
  padding-bottom: calc(5.5rem + 3rem);
}

.section_header5:has(.hero-video)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14rem;
  z-index: 2;
  pointer-events: none;
  background-image: linear-gradient(
    180deg,
    #f5f4f100 0%,
    #f5f4f10a 12%,
    #f5f4f11f 24%,
    #f5f4f13d 36%,
    #f5f4f161 48%,
    #f5f4f187 60%,
    #f5f4f1ab 72%,
    #f5f4f1cc 82%,
    #f5f4f1e6 90%,
    #f5f4f1f7 96%,
    #f5f4f1 100%
  );
}

/* The glass cards carry two lines of copy each; at the full card padding they
   took more vertical space than they earn. */
.card-row39_card.is-glass .display-xsmall,
.card-row39_card.is-glass .text-size-small {
  line-height: 1.45;
}

.card-row39_card.is-glass .margin-bottom.margin-small {
  margin-bottom: 0.375rem;
}

.card-row39_component.is-stacked-left {
  gap: var(--space-3xl);
}

/* Offer terms are legally necessary and visually secondary. Smaller and faded,
   but still comfortably above the contrast floor on the dark scrim. */
.feature-on-image__footnote {
  color: #ffffff;
  opacity: 0.55;
  font-size: var(--type-2xs);
  line-height: 1.5;
}

/* On a phone the nav logo sits directly above the hero eyebrow lockup, so the
   wordmark appears twice within about 150px. Drop the eyebrow there; the nav
   already establishes the brand, and the campaign name is in the badge and the
   offer section. Desktop keeps it - the nav logo is far enough left of the
   centred lockup for both to read. */
@media (max-width: 767px) {
  body:has(.hero-video) .hero-eyebrow {
    display: none;
  }
}

/* The avatar strip in the page-builder FAQ's support panel. .faq_people-image
   is 3.6875rem wide, which is sized for the generated coverage pages; here the
   three faces are the point of the line, so they get more room.

   Scoped with .faq-support__people, a class only FaqBlock emits, so the strip
   on /daekning/elektronik and the other generated pages is untouched. */
.faq-support__people .faq_people-image {
  width: 5.5rem;
}

/* ── Video hero on phones ────────────────────────────────────────────────────
   The copy started 24px below the nav, so almost none of the video was visible
   before the headline covered it. Three changes buy that room back:
   the secondary action goes (the anchor it points at is a few hundred pixels
   further down the same page, and the primary is the one that matters at a QR
   code), the subcopy tightens, and the whole block moves down.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* :has() reaches the wrapper from the anchor inside it - the wrapper carries
     no id of its own, and both of its twin anchors share the tracking id. */
  body:has(.hero-video) .hero-actions .button-wrapper:has([data-track='hero_secondary']) {
    display: none;
  }

  body:has(.hero-video) .header5_content .padding-section-large {
    padding-top: 12rem;
  }

  .hero-copy p.text-weight-medium {
    line-height: 1.35;
  }
}

/* ── Conversion section on phones ────────────────────────────────────────────
   Stacked full-width, the three cards pushed the photograph entirely off the
   top of the section. Side by side they take a third of the height, which
   leaves a band of the picture visible above them.

   Each becomes a narrow column - icon over label over body - so at 375px the
   type has to come down with it. The copy is one short sentence each, which is
   what makes this survivable at this width.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Push the copy down so a band of the photograph reads above it. Without
     this the heading starts at the section's very top edge and the picture is
     only ever seen behind text. */
  .section_feature-on-image .padding-section-large {
    padding-top: 9rem;
  }

  .card-row39_component.is-stacked-left {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    align-items: start;
  }

  /* IconTextRow is a flex row; in a 110px column the icon and label need to
     stack instead. */
  .card-row39_card.is-glass .tab_icon_text-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .card-row39_card.is-glass .tab_icon_text-wrapper p {
    font-size: 0.9375rem;
    line-height: 1.25;
  }

  .card-row39_card.is-glass .text-size-small {
    font-size: var(--type-xs);
    line-height: 1.35;
  }

  .card-row39_card.is-glass .margin-bottom.margin-small {
    margin-bottom: 0.5rem;
  }
}

/* ---------------------------------------------------------------------------
   Product cards in the coverage grid
   --------------------------------------------------------------------------- */

/*
 * The card headings run at the same size as the page headings they were copied
 * from, which leaves no room beside the longest name for the SOON badge - it
 * wraps onto its own line and the card reads as broken. Sized so
 * "Frankly Companion" and its badge sit on one line.
 */
.layout522_card-heading .display-small {
  font-size: var(--type-2xl);
  line-height: 1.2;
}

/*
 * Eight coverage cards in a row of three.
 *
 * The row is flex and every card is calc(33.3333% - .333333rem) wide, so a
 * last row holding two of them sits left with a gap on the right. Centring
 * them keeps the card width identical to the six above rather than stretching
 * two cards across three columns.
 */
.layout522_row-component.is-centered {
  justify-content: center;
}

/*
 * Space between the card rows.
 *
 * .layout522_grid-list.component is display:block, so its rows sit flush
 * against each other - invisible while the grid was two rows of tall cards,
 * obvious as soon as it became three. Matches the .5rem the cards already use
 * horizontally, so the grid reads as one gap in both directions.
 */
.layout522_grid-list.component > .layout522_row-component + .layout522_row-component {
  margin-top: .5rem;
}

/* ---------------------------------------------------------------------------
   Front page film hero
   ---------------------------------------------------------------------------
   The brand film in a rounded frame, inset from the top and both sides, with
   the copy centred over it.

   Four classes on the header on purpose: .section_header1.is-home.home already
   sets a pink background, and a shorter selector loses to it however late it
   appears in the cascade. Its overflow:hidden is left alone - the frame does
   the clipping. Everything else is qualified with .hero-film, because
   .section_header1 is shared with the coverage pages and none of this may reach
   them.
*/
/* On body, not on the header: the announcement bar is rendered by the nav,
   which sits outside the hero in the DOM, and it has to line up with the frame
   to the pixel.

   .hero-shell og ikke .hero-film: skallen er den samme paa forsiden,
   produktsiderne og anmeld skade, og bjaelken skal ligge i den alle tre
   steder. Klassen paa sektionen er det eneste sted, det afgoeres. */
body:has(.hero-shell) {
  --hero-film-gap: var(--frankly-block-gap);
  --hero-film-radius: var(--hero-shell-radius);
}

.section_header1.is-home.home.hero-film {
  /* Literal, not a token. --_primitives---neutral--limestone does not exist -
     the real one is --_primitives---frankly-warm-beige--limestone-10 - so this
     was riding on its fallback and looked fine only by accident. */
  background-color: #f5f4f1;
  background-image: none;
  padding: var(--hero-film-gap) var(--hero-film-gap) 0;
}

/* Heroen og striben som een skaerm.
   ---------------------------------------------------------------------------
   Kravet er, at striben altid ligger i bunden af foerste skaerm, med samme
   luft over og under sig, og at heroen fylder resten. Det kan hverken heroen
   eller striben klare alene, saa laenge de er to blokke der hver er hoeje nok
   til sig selv: heroen stod paa clamp(560px, 82vh, 900px) og striben paa sin
   egen hoejde, og ved 900px vindue gik det op paa 10 pixel naer, ved alle
   andre hoejder ikke.

   Som flex-kolonne paa 100svh bliver det aritmetik i stedet for sammentraef.
   Striben er flex: none og fylder praecis sin copy plus sine 40px foroven og
   forneden. Heroen tager resten, uanset hvad striben endte med at fylde, og
   hvad browserens egen chrome tager paa telefonen.

   svh, ikke vh: paa mobil er vh den store viewport, saa striben ville ligge
   under kanten indtil adresselinjen gled vaek. 100vh staar foerst som fallback
   for browsere uden svh.

   min-height paa frame, ikke height: paa et kort vindue vokser skaermen ud over
   100svh og siden scroller, hellere end at heroen bliver mast flad. */
.hero-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.hero-screen > .hero-film {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.hero-screen > .hero-film > .hero-film__frame {
  flex: 1 1 auto;
}

.hero-screen > .section_promise-strip {
  flex: 0 0 auto;
}

/* The height follows the screen instead of falling out of the copy.
   ---------------------------------------------------------------------------
   It used to be whatever 304px of top padding plus the text added up to - the
   same 828px on every screen, which is 77% of a 1080 monitor and 111% of a
   1280x720 laptop, where it pushed the whole hero past the fold.

   clamp, not a fixed 900: 82vh so a sliver of the next section always shows and
   the page reads as scrollable, 900px as the ceiling so it does not become
   absurd on a tall monitor, 560px as the floor so the film never collapses to a
   letterbox strip. */
.hero-film__frame {
  position: relative;
  display: flex;
  align-items: center;
  /* Kun et gulv nu. Hoejden kommer fra .hero-screen, som giver heroen det
     der er tilbage naar striben har faaet sit. 420 er hvor filmen stadig kan
     baere overskrift, underrubrik og to knapper paa et lavt vindue. */
  min-height: 420px;
  border-radius: var(--hero-film-radius);
  /* isolation, so the scrim composites against the film rather than the page */
  isolation: isolate;
  overflow: hidden;
}

.hero-film__frame > .padding-global {
  width: 100%;
}

.hero-film__video,
.hero-film__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The still is for people who asked for no motion. Everyone else gets the video
   on top of it, which also covers the gap before the first frame arrives. */
.hero-film__still {
  z-index: -1;
}

/* The film cuts scene every few seconds - a bright field at sunset, then a dark
   interior - so white copy needs some help on all of them.
   
   It used to be two heavy gradients, 0.55 down from the top and 0.55 up from
   the bottom. That is what Mickey kept reporting as a shadow under the
   announcement bar: a dark band across the top third of the picture, hugging
   the frame's top edge, with a visible line where it faded out. It was not a
   stray box-shadow and it was not the bar - it was this.
   
   A flat wash and nothing else. Softening the top gradient was not enough - any
   gradient anchored to the top edge reads as a band under the bar, which is the
   whole complaint. A single even tint cannot.
   
   It costs a little contrast for the logo and the burger on the brightest
   frames. The nav links keep their own translucent pill, and the copy is
   centred where the wash is even, so those are unaffected. */
.hero-film__scrim {
  position: absolute;
  inset: 0;
  background: rgba(17, 8, 12, 0.3);
}

/* Centring does the placing now, so this padding only has to keep the copy
   clear of the nav band on the shortest hero - the bar and the nav together are
   about 190px. Keeping it while centred also lands the copy slightly below the
   optical middle, which is where the design puts it. */
.hero-film__inner {
  position: relative;
  z-index: 1;
  /* De 11,875rem er det der holder copy nede i den nederste del af filmen, og
     de er ogsaa det der goer heroen 628px hoej uanset hvor lavt vinduet er.
     Paa en 1280x720-laptop betoed det, at striben laa 65px under kanten.

     clamp mod 19vh: uroert fra 1000px og op, 137px ved 720, saa den skaerm
     lige akkurat gaar op. Copy bliver liggende lavt, bare mindre yderligt. */
  padding-top: clamp(7rem, 19vh, 11.875rem);
  /* Samme oevelse forneden: uroert fra 1067px og op, 43px ved 720. De sidste
     tolv pixel der skulle til, for at en 1280x720-laptop gaar op. */
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}

.hero-film__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  text-align: center;
  color: #fff;
}

.hero-film__content .display-4xl,
.hero-film__content p {
  color: #fff;
}

.hero-film__trust {
  justify-content: center;
}

.hero-film__headline {
  margin: 0;
  max-width: 18ch;
}

.hero-film__sub {
  /* The 1.5rem flex gap is right between the other three, but too much between
     a headline and the line explaining it - those two belong together. Pulled
     up rather than dropping the gap and re-spacing all four. */
  margin: -0.625rem 0 0;
  max-width: 46ch;
}

.hero-film__buttons {
  justify-content: center;
}

/* The secondary button is the "dark-transparent-bg" variant: a pink arrow box
   with its label outside it, on the page background. That background is film
   now, so the label went dark-on-dark and read as an arrow with nothing beside
   it. Only this variant - the primary keeps its dark label on the pink pill,
   which is the contrast it was drawn for. */
.hero-film__buttons [data-wf--button--variant='dark-transparent-bg'] .pris-btn__label {
  color: #fff;
}

@media screen and (max-width: 767px) {
  .hero-film__headline {
    max-width: none;
  }
}

/* No motion means no film: the still stands in for it. */
@media (prefers-reduced-motion: reduce) {
  .hero-film__video {
    display: none;
  }

  .hero-film__still {
    z-index: 0;
  }
}

/* The announcement bar belongs to the card, not to the page.
   ---------------------------------------------------------------------------
   The bar is rendered by the nav, which is position:fixed and outside the hero
   in the DOM, so it cannot simply be moved inside the frame. Instead it is
   inset by the same gap and given the frame's top corners, which puts it
   exactly on top of the frame's own top strip - same left edge, same width,
   same radius - and the two read as one rounded card.

   Written as the default with a :not() to undo it, not the other way round.
   The class is added by script after the document loads, so a rule that waits
   for it renders the bar edge-to-edge for one frame and then animates it
   inwards on every refresh. Same shape as the nav's own background rule a few
   blocks up, and for the same reason.

   It keys off bar-in-card, not nav-over-hero. The bar is fixed and the page is
   not, so a single pixel of scroll slides the card's top gap up underneath it,
   and the inset then leaves 12px of film showing either side of the bar.
   bar-in-card is true only while that gap is still there.

   width:auto matters: the bar is width:100% of a full-bleed fixed container, so
   margin alone offsets it without narrowing it and it overhangs the right edge
   by exactly the gap. */
/* Kun fra 992px og op. Paa telefon er bjaelken en almindelig stribe i toppen:
   den er ikke traukket ind i et kort, og der er intet at ride med scrollen.
   Lod man mekanikken koere alligevel, satte JS'en stadig sine transforms ved
   skiftet mellem de to tilstande, mens CSS-animationen der skulle holde styr
   paa placeringen ikke gjaldt - og saa gled bjaelken ned over menuen. */
@media screen and (min-width: 992px) {
body:has(.hero-shell) .banner8_component {
  width: auto;
  margin: var(--hero-film-gap) var(--hero-film-gap) 0;
  border-radius: var(--hero-film-radius) var(--hero-film-radius) 0 0;
  /* No overflow:hidden. It was here to clip the corners, but the bar's own
     background is what the radius rounds, and nothing else reaches into them.
     What it did clip was the language dropdown, which opens out of the bar and
     was being cut off at the bar's own bottom edge - invisible on the front
     page for as long as the bar sits in the card. */
  /* The 1px divider is there to separate the bar from a white page. Inside the
     card it lands on the film as a seam across the picture. */
  border-bottom: 0;
}

/* Once the gap is gone it goes edge to edge and stays there. */
body:has(.hero-shell):not(.bar-in-card) .banner8_component {
  width: 100%;
  margin: 0;
  border-radius: 0;
}
}

/* No transition on margin or radius: the bar no longer morphs between the two
   states. NavOverHero owns the transform and its easing. */



/* No shadow anywhere around the top of the hero.
   ---------------------------------------------------------------------------
   Mickey reported a shadow under the announcement bar for most of a day. I
   could not reproduce it: no box-shadow or filter is declared on the bar, the
   nav, or anything between them, and a WebKit render of the same build samples
   the pixels beside the bar at exactly #F5F4F1.

   Since it is real on his screen and invisible on mine, this stops looking for
   the source and rules the whole class out - including anything the Webflow
   runtime might set inline, which no static search of the stylesheets would
   have found. */
.navbar2_component,
.navbar_slot,
.nav-wrap,
.banner8_component,
.banner8_content-wrapper,
.banner8_content,
body:has(.hero-film) .hero-film__frame,
body:has(.hero-film) .hero-film__video {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Coverage cards: progressive blur instead of a glass panel
   ---------------------------------------------------------------------------
   The panel was a translucent white rectangle with a hairline border sitting
   inset from the card's edges - a box drawn on top of a photograph. This makes
   it a band that reaches the card's own edges and fades out upwards, so the
   blur dissolves into the image instead of ending on a line.

   The mask does the work. backdrop-filter cannot itself be graduated, but a
   mask on the element that carries it can, and the blur then follows the
   mask's alpha. The white wash is graduated on the same curve, because the
   copy is dark and needs something behind it at the bottom where it sits. */
.layout522_card-content-bg {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* Og ingen backdrop-filter. Webflow-eksporten lægger blur(14px) på det her
     panel, og et maskeret backdrop-filter er ikke det samme som et maskeret
     lag: browseren skal tegne baggrunden, sløre den og maskere den i en
     separat buffer, for hvert panel, hver gang noget under dem flytter sig.
     Med et bånd der ruller på samme side blev det 23 af dem pr. frame, og
     det var det - ikke båndet selv - der fik cykelsiden til at hakke i
     Chromium. Livesitet har de samme paneler uden maske og hakker ikke.
     Gradienten under her laver alligevel næsten hele arbejdet; motiverne
     står på en flad, lys bund, hvor 14px slør knap kan ses. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.58) 38%,
    rgba(255, 255, 255, 0.28) 70%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 45%,
    rgba(0, 0, 0, 0.75) 68%,
    rgba(0, 0, 0, 0.35) 85%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 45%,
    rgba(0, 0, 0, 0.75) 68%,
    rgba(0, 0, 0, 0.35) 85%,
    transparent 100%
  );
}

/* Edge to edge. Inset, the mask softens the top while the sides and bottom
   still end on a straight line, which keeps the box it is meant to remove. */
.layout522_card-small > .layout522_card-content-bg,
.layout522_card-large > .layout522_card-content-bg {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 2.5rem 1.5rem 1.5rem !important;
}

/* Type two steps down, on sizes the system already has: 1.25rem is
   .text-size-large, 1rem is .text-size-small. The headline was on a one-off
   1.5rem.

   Scoped to the panel, not to .layout522_card-heading. That wrapper only
   exists on the cards carrying a SOON badge - it is what holds the name and
   the badge on one line - so keying off it sized six cards and left Care and
   Appliances, the two live ones, at 28px next to them. The live cards also
   split their name across .display-small-2 and .display-small, so both are
   named here. */
.layout522_card-content-bg .display-small,
.layout522_card-content-bg .display-small-2 {
  font-size: var(--type-xl) !important;
  line-height: 1.3 !important;
}

.layout522_card-content-bg .text-size-medium {
  font-size: var(--type-md) !important;
  line-height: 1.45 !important;
}

/* The name and the line under it are one block, not two. */
.layout522_card-content-bg .layout522_card-heading,
.layout522_card-content-bg .margin-bottom.margin-xxsmall {
  margin-bottom: 0 !important;
}


/* The announcement badge, as text rather than as drawing.
   ---------------------------------------------------------------------------
   Webflow exported the word NYHED as eight <path>s inside the pill, which is
   why it stayed Danish on the English pages - there was no string to
   translate, only outlines. It is a BadgePill now, fed by nav_t_badge, so it
   reads NEW in English and can be edited in Studio like any other label.

   The numbers come off the export: a 42x18 pill at radius 4, #FFACCA behind
   #2D0011, glyphs 6.8px tall from x=4.7 to x=36.5. That is a cap height of
   about 9.5px of type with five pixels of air either side. */
.tag-nav {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  background-color: #ffacca;
  color: #2d0011;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rotating hero headline.
   ---------------------------------------------------------------------------
   The span is its own mask. Osmo's version leans on SplitText to wrap each
   line in one, because their word sits mid-sentence and the line has to be
   re-measured as it changes width. Ours is the whole first line with a hard
   break under it, so the line needs nothing: the span clips vertically, the
   words slide through it, and the second line is ordinary text that no script
   ever touches.

   Its size comes from the word already in the markup, left in flow and only
   made invisible once the script takes over. So the box is the same before and
   after JavaScript runs, and the same for every word - which is what keeps the
   line centred. Longer words overflow it left and right in equal measure,
   which is why the horizontal axis must stay visible. Only vertical is clipped,
   and the pair visible/clip is the one combination the spec allows.

   The tenth of an em is for descenders: the p in headphones sits below the
   line box, and without it the clip would shave it. Pulled back off the
   margin so it costs no height. */
.hero-film__rotator {
  display: inline-block;
  position: relative;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  overflow-x: visible;
  overflow-y: clip;
}

.rotating-text__sizer {
  display: block;
  white-space: nowrap;
}

/* Stacked on the same spot and centred on the box rather than pinned to its
   left edge. Pinned, a word wider than the box hangs off to the right and the
   line reads as drifting sideways while it fades - the diagonal Mickey saw. */
.rotating-text__word {
  display: block;
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}

/* The static headline is held to 18ch so it breaks after the first line. The
   rotating one has a real <br>, so the cap only gets in the way. */
.hero-film__headline.is-rotating {
  width: 100%;
  max-width: none;
}

/* The promise strip under the hero.
   ---------------------------------------------------------------------------
   One band, not a section: heading on the left, three promises across the rest,
   and no more height than the copy needs. It replaces the stats7 section, which
   said the same three things with a heading, a subheading and two buttons
   stacked above them.

   Sizes are the system's own - display-xsmall for the heading, text-size-medium
   for the promises - and the second line of each promise is the site's 40%
   black rather than a colour of its own.

   Wrapping in two steps rather than one. Below the container width the heading
   takes its own line and the three sit under it; below tablet they stack, which
   is the only shape that holds a two-line promise on a phone. */
.promise-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5xl) var(--space-6xl);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  flex-wrap: wrap;
}

.promise-strip__heading {
  flex: 0 1 17.5rem;
  margin: 0;
  max-width: 21ch;
}

.promise-strip__list {
  flex: 1 1 34rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xl) var(--space-5xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Sized to the copy, not to an equal third. The first promise is the longest,
   and thirds made its first line wrap where the design has it on one.

   margin and padding zeroed because the export carries a global
   `li { margin: 0.25rem 0; padding-left: 0.5rem }`. These are not bulleted
   items, and on a phone that half-rem was eating 8 of the 111px a column has,
   which is what made a title that measured 107px wrap anyway. */
.promise-strip__item {
  display: flex;
  /* Centred against the tile, not top-aligned to it. The tile is 3.5rem and the
     two lines of copy are about 2.5, so flex-start left the text sitting high
     with all the slack under it. */
  align-items: center;
  gap: 0.875rem;
  flex: 1 1 14rem;
  margin: 0;
  padding: 0;
}

/* Same tile as the icons in the footer and the nav: a rounded square of the
   warm grey, with the glyph at 24 on a 2px stroke. */
.promise-strip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-xl);
  background-color: #ece9e4;
  color: #2d0011;
}

.promise-strip__icon svg { display: block; }

/* Tight, so the three lines of copy stand about as tall as the tile beside
   them. At the body text's own line-height they ran taller than the icon and
   the row stopped reading as one thing. */
.promise-strip__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  line-height: 1.3;
}

.promise-strip__title,
.promise-strip__body {
  line-height: 1.3;
}

.promise-strip__title { font-weight: 500; }

@media screen and (max-width: 991px) {
  .promise-strip { gap: var(--space-4xl); }
  .promise-strip__heading { flex-basis: 100%; max-width: none; }
  .promise-strip__list { flex-basis: 100%; }
}

/* Two columns, both the same width. Wrapping three flex items into two rows
   left the third one stretching the full width on its own, which read as a
   different kind of row than the two above it. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .promise-strip__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-2xl) var(--space-5xl);
  }
}

/* The phone keeps the three side by side, but turns each one upright: icon
   above its own copy rather than beside it, everything centred, heading centred
   over the row. Icon-beside-text left every item leaning against a column of
   whitespace on its right; three upright columns read as one centred block, and
   the strip comes down from 372px to about 290px.

   Three columns on a phone means narrow ones - 88px at 320, 109px at 390 - so
   the copy steps down to 13px and the gap shrinks with the viewport to leave
   the columns as much room as it can. Checked in both languages at eleven
   widths from 320 to 767: nothing overflows, worst case is a three-line title
   over a four-line body at 320.

   The heading scales too, instead of sitting at 26px: 28px at 320, 34px at 390,
   capped at 36px. */
@media screen and (max-width: 767px) {
  .promise-strip {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    gap: var(--space-xl);
    text-align: center;
  }

  /* Et trin ned ad skalaen, fra 28-36 til 24-28. Ved 36 stod den paa hoejde
     med heroens egen overskrift og sloges med den. */
  .promise-strip__heading {
    font-size: clamp(var(--type-2xl), 7vw, var(--type-3xl));
    line-height: 1.12;
  }

  .promise-strip__list {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: clamp(0.5rem, 2.5vw, 1rem);
  }

  /* flex: 1 1 0 with min-width 0, not the desktop `1 1 14rem`: the basis has to
     be zero here or three 224px columns would blow past the viewport. */
  .promise-strip__item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
  }

  .promise-strip__copy { align-items: center; gap: var(--space-3xs); }

  /* 13px down to 12px on the narrowest screens. The three titles are written
     to fit a column on one line, and at 320 the column is 91px: 12px is what
     buys the last few pixels they need. */
  .promise-strip__copy > * {
    font-size: clamp(0.75rem, 3.35vw, 0.8125rem);
    line-height: 1.25;
  }
  .promise-strip__icon { width: 2.5rem; height: 2.5rem; }
  .promise-strip__icon svg { width: 18px; height: 18px; }
}

/* One radius, one gap, for every large block on the site.
   ---------------------------------------------------------------------------
   The film hero set a rounded frame inset a little from the page edge, and the
   rest of the site kept the Webflow export's 16px on its own big blocks. Two
   radii on one screen reads as a mistake rather than a choice, so the hero's
   numbers become the site's numbers and everything large takes them.

   The hero's own variables now point here, so the two cannot drift: change this
   pair and the hero follows.

   Small things are not in this list. A nav link, a tab, a badge and a card in a
   scrolling strip all keep the radius they have - 32px on a 44px-tall control
   is not consistency, it is a pill. */
:root {
  --frankly-block-radius: 2rem;
  --frankly-block-gap: var(--space-md);
}

/* Smaller on a phone, where a 32px corner on a 360px-wide block eats the
   content rather than framing it. */
@media screen and (max-width: 767px) {
  :root {
    --frankly-block-radius: 1.25rem;
    --frankly-block-gap: var(--space-sm);
  }
}

/* Heroens skal er rundere end de oevrige blokke helt ned til 992px, fordi den
   er stoerre. Vaerdien laa foer inde i body:has(.hero-film) og gjaldt derfor
   kun forsiden; nu deler alle heroer den. */
:root { --hero-shell-radius: var(--frankly-block-radius); }

@media screen and (max-width: 991px) {
  :root { --hero-shell-radius: 1.5rem; }
}

/* The full-screen carousel, inset to the same gap as the hero so the two frames
   line up down the page. It sits at 100vw in the export, hence the margin
   rather than padding. */
.header103_tabs,
.header103_tabs-content,
.header103_tab-image-wrapper,
.header103_tab-image,
.layout406_image-wrapper,
.section_faq6,
.faq6_component,
.layout522_card-small,
.layout522_card-large,
.layout522_card-small-soon,
.header50_background-image-wrapper,
.header50_background-image,
.header1_image-wrapper,
.header19_image-wrapper,
.blog-post1-header_image {
  border-radius: var(--frankly-block-radius);
}

.section_header103 {
  padding-left: var(--frankly-block-gap);
  padding-right: var(--frankly-block-gap);
}

/* The toggle, squared off.
   ---------------------------------------------------------------------------
   999px on both the track and the thumb made a pill, which sat oddly beside
   buttons and cards that are all soft rectangles. 8px outside, 6px inside: the
   inner corner is the outer one minus the 2px of track that shows around the
   thumb, which is what keeps the two curves concentric instead of merely both
   round.

   One pair of classes covers every toggle on the site - the Home/Care switch on
   the front page and the in-store/online switch on the three product pages and
   partners. */
.toggle-wrapper { border-radius: var(--radius-lg); padding: 0.25rem !important; }

/* And a little taller. At 8px of vertical padding the label sat tight against
   the thumb's own edge and the control read as squeezed next to the buttons
   around it, which carry more air. */
.toggle-btn {
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
}

/* The tab visual's height, in one place.
   ---------------------------------------------------------------------------
   750px on a desktop, as drawn. Not a share of the viewport: at 1280 that gave
   666px and the block was short of the drawing on the very screen it was drawn
   for. It scales only below the breakpoint, where 750px would be most of the
   screen.

   The tab container takes the same height. Webflow positions the panes
   absolutely, so the container has no height of its own and the section's
   layout was being decided by a 480px box with a 750px picture hanging out of
   it - which is also where the white corners came from: the container carries
   overflow:hidden, and once it had a 32px radius of its own it clipped the
   corners of the pink field inside it. The radius belongs on the field, which
   is the thing you can see. */
:root { --frankly-tab-height: 750px; }

/* Forholdet, ikke hoejden, er det der er tegnet.
   ---------------------------------------------------------------------------
   Spalten er capped paa 1280, saa ved designbredden og opefter er kassen
   1280x750. Det forhold, 1,71, er det der gaelder. Med en fast hoejde paa 750
   fulgte bredden spalten mens hoejden stod stille, saa kassen blev fladere jo
   smallere vinduet var: 1,54 ved 1280 og 1,19 ved 992, hvor billedet udfyldte
   43% af den i stedet for 62%.

   max-height holder den paa de 750 der blev bedt om, hvis spalten en dag bliver
   bredere end 1280. */
.layout406_tabs-content {
  height: auto;
  aspect-ratio: 1280 / 750;
  max-height: var(--frankly-tab-height);
}

.layout406_tab-pane,
.layout406_tab-wrapper,
.layout406_image-wrapper {
  height: 100%;
}

/* Under desktop: samme form, ikke bare en mindre hoejde.
   ---------------------------------------------------------------------------
   Hoejden var clamp(20rem, 62vw, 750px), hvilket paa en telefon gav en kasse
   paa 351x320. Bredden foelger spalten og hoejden fulgte skaermen, saa formen
   skiftede fra 1,71 paa desktop til 1,10 paa mobil: naesten kvadratisk. Selve
   billedet blev hverken beskaaret eller straakt - contain holdt dets 2,61 - men
   det betoed, at det laa som en tynd stribe paa 319x122 med 99px lyseroedt over
   og under sig, og udfyldte 38% af kassen mod 62% paa desktop.

   aspect-ratio i stedet for hoejde. 1280x750 er kassen ved designbredden 1440,
   saa den form gaelder nu hele vejen ned, og telefonen viser praecis den samme
   blok i mindre. Maalt: billedet udfylder 59% af kassen paa 390px mod 62% paa
   1440, og forholdet er det samme uanset hvilket billede der ligger i sloten.

   Under 768 skifter Webflow til en markup uden tabs-content overhovedet. Der er
   den lyseroede kasse selv det yderste med en rigtig bredde, saa forholdet skal
   sidde paa den i stedet. Ellers ville kassen hugge sig om billedet og blive
   2,28 bred i stedet for 1,71. */
@media screen and (max-width: 767px) {
  .layout406_tabs-content,
  .layout406_tab-pane,
  .layout406_tab-wrapper {
    height: auto;
  }

  .layout406_image-wrapper {
    height: auto;
    aspect-ratio: 1280 / 750;
  }
}

/* Same curve on the container as on the field inside it. The container clips,
   so a smaller radius there shaves the field's corners and shows the page
   through them; now that the two boxes are the same size, the same radius puts
   the two curves exactly on top of each other. */
.layout406_tabs-content {
  border-radius: var(--frankly-block-radius);
}

/* Two layers: a pink field, and the picture centred on it.
   ---------------------------------------------------------------------------
   The box is 750px as drawn. The picture is not: the current one is a wide
   strip, 2516x962, and filling 750px of height with it meant scaling it to
   1960px wide and cutting 340px off each side.

   So the wrapper is the pink, and the image sits on top at whatever size fits
   inside it - contained, centred, with room on every side. Nothing is cropped
   and nothing is stretched, whatever shape the next export turns out to be: a
   taller picture simply takes up more of the field. */
/* Det lyseroede felt er nu kun en bagvaeg, ikke en ramme.
   Billederne fylder kassen helt ud, saa der er ikke noget felt at se. Farven
   staar tilbage som det der ligger bag, mens et billede loader. */
.layout406_image-wrapper {
  background-color: #ffacca;
  overflow: hidden;
  border-radius: var(--frankly-block-radius);
}

/* Sized to the picture, not to the box.
   ---------------------------------------------------------------------------
   With width and height at 100% the element stays the size of the box and
   object-fit decides where the pixels land inside it, which means a radius on
   the element rounds the box and not the picture. Letting it take its own size
   under a ceiling puts the two back together, so the corners can be clipped.

   They need clipping: the source is a rounded pink rectangle sitting on white,
   and that white showed at the four corners against the pink field behind it.
   Twelve pixels covers the source's own curve at the size it lands here. A new
   export with no white around it would not need this, and would not be harmed
   by it either. */
/* Fylder kassen ud, i stedet for at ligge midt i den.
   ---------------------------------------------------------------------------
   Med contain blev billedet skaleret ned til at passe indeni, og forskellen
   mellem billedets forhold og kassens stod tilbage som lyseroede kanter. cover
   fylder i stedet kassen og beskaerer det der bliver til overs.

   Det koster naesten ingenting her: fotografierne er 1,77 og kassen er 1,71,
   saa der forsvinder omkring 4% i siderne. Radius er flyttet op paa kassen,
   som nu er den der klipper. */
.layout406_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Whatever sits in the tab, sits in the middle of it. */
.layout406_tab-pane,
.layout406_tab-wrapper {
  align-items: center;
}

/* The hero on a phone.
   ---------------------------------------------------------------------------
   A step down in type, and the four blocks pulled closer together.

   The rotating line is set one notch below the rest of the headline system on
   a phone: display-3xl's own mobile size rather than display-4xl's. At 48px the
   longest of the rotating words was wider than the screen, and a box wider than
   its container does not overflow evenly - it starts at the left edge and runs
   off the right, which pulled the rotation off centre while the fixed line
   under it stayed put. At 36px all but one of them fit, and the script drops
   whatever still does not.

   max-width is the belt to that braces: whatever the script decides, the box
   can never be wider than the line it sits on. */
@media screen and (max-width: 767px) {
  .hero-film__headline.is-rotating {
    font-size: var(--type-4xl);
    line-height: 2.5rem;
  }

  .hero-film__rotator {
    max-width: 100%;
  }

  /* Closer together. At 24px apart the four blocks read as four things on a
     screen this narrow rather than as one. */
  .hero-film__content {
    gap: var(--space-lg);
  }

  .hero-film__sub {
    margin-top: -0.5rem;
    max-width: none;
  }

  .hero-film__buttons {
    margin-top: 0.25rem;
  }
}

/* "Vi passer på det, du er øm over" on a phone.
   ---------------------------------------------------------------------------
   The block was reading small: the page's global side padding held it to 351 of
   390 pixels and the type stayed at the size it takes in a much wider column,
   so the lines sat well short of the edge with air on both sides.

   Edge to edge now - the same gap the hero and the other blocks use - and the
   headline scaled to the viewport rather than pinned, so it grows with the
   screen instead of leaving the same margin on a 430px phone as on a 360px one.
   Capped at 3rem so it cannot outgrow the desktop size on a tablet. */
@media screen and (max-width: 767px) {
  .section_header105 .padding-global {
    padding-left: var(--frankly-block-gap);
    padding-right: var(--frankly-block-gap);
  }

  .section_header105 .display-2xl {
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    line-height: 1.12;
  }
}

/* Wide tables scroll inside themselves, not with the page.
   ---------------------------------------------------------------------------
   The privacy policy carries a four-column table that needs about 570px. On a
   phone that made the whole document scroll sideways: every heading and
   paragraph on the page moved because of one table two thirds of the way down.

   The table keeps its own width and gets its own scrollbar. display:block is
   what makes overflow apply to a table at all, and the cells lay out the same
   way inside it. */
.w-richtext table,
.privacy_rich-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ankeret fra heroens "Se daekninger".
   ---------------------------------------------------------------------------
   Den oeverste bjaelke ligger fast over siden, saa uden en margen her lander
   sektionens overkant bag den. Selve rullet styres af anchor-scroll.js: CSS
   kan ikke saette en varighed, og browserens egen smooth tog to til tre
   sekunder over de omkring 4.900 pixels der er ned til kortene. */
#daekninger { scroll-margin-top: 5rem; }

/* Tre tal i raekken, ikke fire.
   ---------------------------------------------------------------------------
   Trustpilot-scoren er taget ud af statistik-raekken paa /anmeld-skade,
   /support, /priser og /om-frankly, indtil vi henter den fra deres API i
   stedet for at skrive den i haanden. Webflow-exporten har kun is-4col. */
.about_numbers-wrapper.is-3col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Paa telefonen under hinanden. Tre spalter paa en 390px skaerm giver 106px
   hver, og der braekker "30 min" over to linjer mens de to andre ikke goer.
   Saa staar ikonerne i tre forskellige hoejder og raekken ser braekket ud.
   Een spalte giver hvert tal hele bredden, og alt staar paa een linje. */
@media screen and (max-width: 767px) {
  .about_numbers-wrapper.is-3col {
    grid-template-columns: 1fr;
    grid-row-gap: var(--space-xl);
  }
}

/* Prisoverskriften holder to linjer hele vejen ned.
   ---------------------------------------------------------------------------
   Linjeskiftet er sat i teksten, men paa en telefon er 36px for stort til de
   omkring 350px spalten giver, saa foerste halvdel braekkede alligevel og det
   blev tre linjer.

   8,2vw er maalt: den stoerste skrift der holder to linjer er 8,73vw ved 412px
   paa dansk, som er det strammeste af de to sprog. Loftet paa 36px er den
   nuvaerende stoerrelse, saa alt fra omkring 440px og op er uroert. */
@media screen and (max-width: 991px) {
  .price-hero__headline {
    font-size: clamp(1.5rem, 8.2vw, 2.25rem);
  }
}

/* ── Grafik oven paa fanebilledet ───────────────────────────────────────────
   Tegningen er 302x375, og alt indeni maales i cqw: procent af overlayets egen
   bredde. Saa holder forholdet mellem kort, skrift og mellemrum sig selv ved
   enhver skaermstoerrelse, uden et eneste breakpoint. 15px skrift i en 302px
   tegning er 15/302 = 4.97cqw.

   Placeringen er i procent af billedkassen, saa den foelger med naar kassen
   skalerer. */
.layout406_image-wrapper { position: relative; }

.tab-overlay {
  position: absolute;
  left: 52.6%;
  top: 24%;
  width: 23.9%;
  aspect-ratio: 302 / 375;
  container-type: inline-size;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1.2cqw;
}

/* Pillen med avataren. */
.tab-overlay__pill {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 1.8cqw 4cqw 1.8cqw 2cqw;
  background-color: #fff6fa;
  border: 0.24cqw solid #f3dee4;
  border-radius: 999px;
}

.tab-overlay__avatar {
  width: 9cqw;
  height: 9cqw;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.tab-overlay__pill-text { display: flex; flex-direction: column; line-height: 1.25; }
.tab-overlay__eyebrow { font-size: 3.3cqw; color: #2d0011; opacity: 0.6; }
.tab-overlay__title { font-size: 3.8cqw; font-weight: 600; color: #2d0011; }

.tab-overlay__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
}

/* Glasset. backdrop-filter er hele pointen: kortet blurrer fotografiet bagved,
   og det kan kun ske live. Kanten er en tynd lys streg, som paa tegningen. */
.tab-overlay__card {
  position: relative;
  padding: 3.3cqw 4cqw;
  border-radius: 3.8cqw;
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6cqw) saturate(120%);
  -webkit-backdrop-filter: blur(6cqw) saturate(120%);
  border: 0.24cqw solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

/* Det valgte kort er ikke glas, men fyldt. */
.tab-overlay__card.is-selected {
  background-color: #2d0011;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
  padding-bottom: 4cqw;
}

.tab-overlay__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2cqw; }
.tab-overlay__copy { display: flex; flex-direction: column; gap: 0.4cqw; min-width: 0; }

.tab-overlay__label {
  font-size: 3.3cqw;
  line-height: 1.2;
  color: #fff;
  opacity: 0.72;
}

.tab-overlay__price {
  font-size: 5.6cqw;
  line-height: 1.15;
  font-weight: 600;
  color: #fff;
  /* Tallet taeller op, og cifre i variabel bredde faar kortet til at sitre
     mens det sker. */
  font-variant-numeric: tabular-nums;
}

.tab-overlay__card.is-selected .tab-overlay__label { color: #fff; opacity: 0.8; }
.tab-overlay__card.is-selected .tab-overlay__price { color: #ffacca; }

.tab-overlay__radio {
  flex: none;
  width: 5cqw;
  height: 5cqw;
  margin-top: 1.4cqw;
  border-radius: 50%;
  border: 0.4cqw solid rgba(255, 255, 255, 0.55);
}

.tab-overlay__card.is-selected .tab-overlay__radio {
  background-color: #ffacca;
  border-color: #ffacca;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%232D0011' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 68%;
  background-position: center;
  background-repeat: no-repeat;
}

.tab-overlay__body {
  margin: 1.6cqw 0 0;
  font-size: 2.9cqw;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

.tab-overlay__chips { display: flex; gap: 1.4cqw; margin-top: 2.6cqw; }

.tab-overlay__chip {
  font-size: 2.9cqw;
  line-height: 1;
  padding: 1.8cqw 3.4cqw;
  border-radius: 999px;
  color: #fff;
  border: 0.24cqw solid rgba(255, 255, 255, 0.28);
}

/* Udgangspunktet foer animationen. Uden JS staar alt bare synligt. */
.tab-overlay.is-armed [data-overlay-item] { opacity: 0; }

/* Telefonen er for smal til at grafikken kan laeses. Den ryger ud, saa
   fotografiet staar alene, i stedet for at vaere daekket af noget ulaeseligt. */
@media screen and (max-width: 767px) {
  /* Attributten med, saa reglen vejer to klasser. Varianterne nedenfor saetter
     hver sin display: block, og med bare .tab-overlay vejede de lige saa meget
     og stod senere i filen. Selvrisiko-panelet og pris-badgene blev derfor
     staaende som tomme kasser oven paa fotografiet. */
  .tab-overlay[data-tab-overlay] { display: none; }
}

/* ── Selvrisiko-panelet paa home-2 ──────────────────────────────────────────
   Egen placering, samme princip som kortene: cqw hele vejen, saa tegningens
   forhold holder sig selv. Panelet er 489x222 i designet. */
/* Hoejden kommer fra indholdet, ikke fra tegningens forhold. Panelet er
   forankret i bunden og vokser opad, saa en linje mere i teksten ikke klipper
   den lyseroede stribe af nede i kanten. Tegningen er 489x222, hvilket den
   lander paa af sig selv naar teksten er den der staar der nu. */
.tab-overlay--panel {
  left: 3.3%;
  top: auto;
  bottom: 4.5%;
  width: 39%;
  aspect-ratio: auto;
  display: block;
}

.deductible {
  display: flex;
  flex-direction: column;
  /* Uden det her klemmer flexboxen delene sammen for at ramme en hoejde,
     i stedet for at lade panelet vokse til det indholdet fylder. */
  flex: none;
  border-radius: 2cqw;
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4cqw) saturate(125%);
  -webkit-backdrop-filter: blur(4cqw) saturate(125%);
  border: 0.16cqw solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

.deductible__main { padding: 2.7cqw 3cqw 0; flex: none; }

.deductible__head,
.deductible__addon { display: flex; align-items: center; gap: 1.6cqw; }

.deductible__avatar {
  width: 5.5cqw;
  height: 5.5cqw;
  border-radius: 1.2cqw;
  object-fit: cover;
  flex: none;
  display: block;
}

.deductible__head-text,
.deductible__addon-text { display: flex; flex-direction: column; min-width: 0; }

.deductible__name { font-size: 2.25cqw; font-weight: 600; line-height: 1.3; }
.deductible__kind { font-size: 1.84cqw; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }

.deductible__question {
  margin: 2.1cqw 0 0;
  font-size: 2.25cqw;
  line-height: 1.35;
}

.deductible__steps { margin-top: 2.2cqw; }

.deductible__scale { display: flex; justify-content: space-between; gap: 1cqw; }

.deductible__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.deductible__step.is-selected { color: #fff; }

.deductible__amount { font-size: 2.25cqw; line-height: 1.3; font-weight: 500; }
.deductible__step.is-selected .deductible__amount { font-weight: 700; }
.deductible__step-label { font-size: 1.64cqw; line-height: 1.3; opacity: 0.8; }

/* Stregen under trinnene. Den fyldte del vokser hen til det valgte trin, saa
   man ser hvor paa skalaen man staar. */
.deductible__track {
  position: relative;
  display: block;
  height: 0.4cqw;
  margin-top: 1.8cqw;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.deductible__track-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background-color: #fff;
  border-radius: inherit;
}

/* Den vandrette streg mellem panelets to halvdele. */
.deductible__addon {
  flex: none;
  margin: 2.2cqw 3cqw 0;
  padding-top: 2.2cqw;
  border-top: 0.16cqw solid rgba(255, 255, 255, 0.28);
}

.deductible__addon-text { flex: 1 1 auto; }

.deductible__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.2cqw 2.4cqw 1.2cqw 1.2cqw;
  border-radius: 1cqw;
  background-color: #ffacca;
  color: #2d0011;
  font-size: 1.84cqw;
  font-weight: 500;
  line-height: 1;
}

.deductible__cta-icon {
  display: grid;
  place-items: center;
  width: 3.4cqw;
  height: 3.4cqw;
  border-radius: 0.7cqw;
  background-color: #2d0011;
  color: #ffacca;
}

.deductible__cta-icon svg,
.deductible__note-icon svg { width: 70%; height: 70%; }

/* Den lyseroede stribe i bunden sidder fast paa panelets underkant. */
.deductible__note {
  flex: none;
  margin: 2.2cqw 0 0;
  border-radius: 0 0 1.84cqw 1.84cqw;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.6cqw 3cqw;
  background-color: #ffd3e3;
  color: #2d0011;
  font-size: 1.84cqw;
  line-height: 1.35;
}

.deductible__note-icon { flex: none; display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; }

/* ── Stak af produktkort ────────────────────────────────────────────────────
   Bruges paa home-3 og skal bruges paa care-4, saa placeringen kommer udefra
   som variabler i stedet for at staa her. Tegningen er 299px bred. */
.tab-overlay--stack {
  left: var(--overlay-left);
  top: var(--overlay-top);
  width: var(--overlay-width);
  aspect-ratio: auto;
  display: block;
}

.product-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5cqw;
}

.product-stack__card {
  display: flex;
  align-items: center;
  gap: 2.7cqw;
  padding: 3.2cqw 4cqw;
  border-radius: 2cqw;
  background-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(5cqw) saturate(125%);
  -webkit-backdrop-filter: blur(5cqw) saturate(125%);
  border: 0.25cqw solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.product-stack__avatar {
  flex: none;
  width: 9.4cqw;
  height: 9.4cqw;
  border-radius: 2cqw;
  object-fit: cover;
  display: block;
}

.product-stack__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.product-stack__name { font-size: 3.68cqw; font-weight: 600; line-height: 1.3; }
.product-stack__kind { font-size: 2.9cqw; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }

.product-stack__price {
  flex: none;
  font-size: 3.1cqw;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

:root {
  /* Den bloede, takkede cirkel. Staar eet sted, bruges i tre stoerrelser. */
  --blob: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 167 167%22><path d=%22M154.468 127.215L144.819 134.705C144.037 135.31 143.383 136.067 142.891 136.928L136.842 147.541C135.854 149.277 134.216 150.55 132.288 151.077L120.51 154.303C119.556 154.563 118.661 155.011 117.879 155.616L108.23 163.106C106.651 164.33 104.65 164.881 102.668 164.63L90.5502 163.106C89.5666 162.983 88.5732 163.052 87.6191 163.312L75.8408 166.539C73.9129 167.065 71.8573 166.809 70.1212 165.821L59.5084 159.772C58.6478 159.28 57.6986 158.965 56.72 158.842L44.6023 157.318C42.6204 157.067 40.8155 156.039 39.591 154.46L32.101 144.811C31.4961 144.029 30.7388 143.375 29.8781 142.883L19.2653 136.834C17.5293 135.846 16.2556 134.208 15.7293 132.281L12.5032 120.502C12.2426 119.548 11.795 118.653 11.1901 117.871L3.70018 108.222C2.47563 106.644 1.92482 104.642 2.17564 102.66L3.70018 90.5424C3.82313 89.5588 3.75428 88.5654 3.49363 87.6113L0.267493 75.8329C-0.258721 73.9051 -0.00299086 71.8494 0.985506 70.1134L7.03451 59.5006C7.5263 58.64 7.84105 57.6908 7.96399 56.7122L9.48854 44.5945C9.73935 42.6126 10.7672 40.8077 12.3458 39.5831L21.9947 32.0932C22.7767 31.4883 23.4308 30.7309 23.9226 29.8703L29.9716 19.2575C30.9601 17.5215 32.5977 16.2477 34.5255 15.7215L46.3039 12.4954C47.258 12.2347 48.153 11.7872 48.935 11.1823L58.5839 3.69237C60.1625 2.46781 62.1641 1.91701 64.146 2.16782L76.2637 3.69237C77.2473 3.81532 78.2407 3.74647 79.1948 3.48582L90.9731 0.259681C92.9009 -0.266534 94.9566 -0.0108034 96.6926 0.977693L107.305 7.0267C108.166 7.51849 109.115 7.83324 110.094 7.95618L122.212 9.48073C124.193 9.73154 125.998 10.7594 127.223 12.338L134.713 21.9869C135.318 22.7689 136.075 23.423 136.936 23.9147L147.549 29.9638C149.285 30.9522 150.558 32.5899 151.084 34.5177L154.311 46.2961C154.571 47.2501 155.019 48.1452 155.624 48.9271L163.114 58.576C164.338 60.1547 164.889 62.1563 164.638 64.1382L163.114 76.2559C162.991 77.2394 163.06 78.2329 163.32 79.1869L166.546 90.9653C167.073 92.8931 166.817 94.9488 165.828 96.6848L159.779 107.298C159.288 108.158 158.973 109.107 158.85 110.086L157.325 122.204C157.074 124.186 156.047 125.991 154.468 127.215Z%22 fill=%22%2523fff%22/></svg>");
}

/* Pris-badges. Masken skalerer med elementet, og bag den ligger backdrop-filter,
   saa badgen blurrer fotografiet som de andre overlays. */
.tab-overlay--badges {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  aspect-ratio: auto;
  display: block;
  container-type: normal;
}

.price-badge {
  position: absolute;
  left: var(--badge-left);
  top: var(--badge-top);
  width: var(--badge-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  /* cqw maaler mod naermeste container-forfader, ikke mod elementet selv. Derfor
     ligger indholdet i et lag indeni: uden det blev 6cqw maalt mod billedkassen
     og gav 61px blur paa en badge der kun er 77px bred. */
  container-type: inline-size;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
  -webkit-mask-image: var(--blob);
  mask-image: var(--blob);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.price-badge__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  text-align: center;
}

.price-badge__name { font-size: 9cqw; line-height: 1.2; }
/* DKK og /md. staar som to linjer ved siden af tallet, midtstillet mod det.
   Med baseline laa de paa tallets grundlinje, saa de haengte nedenfor det. */
.price-badge__figure { display: flex; align-items: center; gap: 1.5cqw; }

.price-badge__amount {
  font-size: 30cqw;
  line-height: 1;
  font-weight: 600;
  color: #f5f4f1;
  font-variant-numeric: tabular-nums;
}

.price-badge__unit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 7.5cqw;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Stak af produktkort med tekst ──────────────────────────────────────────
   Tegningen er 696x421. Stakkens omraade faar det forhold, og hvert kort faar
   sin kasse i procent af det, saa forskydningen mellem kortene holder sig selv
   naar billedkassen skalerer. */
.tab-overlay--cardstack {
  left: var(--overlay-left);
  top: var(--overlay-top);
  width: var(--overlay-width);
  aspect-ratio: 696 / 421;
  display: block;
  container-type: inline-size;
}

.card-stack__card {
  position: absolute;
  left: var(--card-left);
  top: var(--card-top);
  width: var(--card-width);
  height: var(--card-height);
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 1.1cqw;
  border-radius: 2.3cqw;
  /* To lag: en moerk tone der gør hvid tekst laesbar uanset hvor lyst
     fotografiet er lige der, og oven paa den det frostede hvide fra tegningen.
     Med kun det hvide forsvandt teksten paa de lyse dele af butiksbilledet. */
  background-color: rgba(38, 22, 26, 0.34);
  background-image: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16));
  backdrop-filter: blur(3cqw) saturate(120%);
  -webkit-backdrop-filter: blur(3cqw) saturate(120%);
  border: 0.07cqw solid rgba(255, 255, 255, 0.35);
  color: #fff;
  overflow: hidden;
}

.card-stack__thumb {
  flex: none;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 1.8cqw;
  object-fit: cover;
  display: block;
}

.card-stack__text { display: flex; flex-direction: column; gap: 0.6cqw; min-width: 0; padding-right: 2cqw; }
.card-stack__title { font-size: 2.6cqw; font-weight: 500; line-height: 1.25; }
.card-stack__body { font-size: 2.1cqw; line-height: 1.35; color: rgba(255, 255, 255, 0.75); }

/* ── SnapSure-modalen ───────────────────────────────────────────────────────
   Bag "Se min pris" paa desktop. Maalene kommer fra tegningens 696x526.
   Bruger sitets egne tokens, saa den ikke bliver endnu et sted med sine egne
   tal. */
.snapsure {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: var(--space-2xl);
}

.snapsure[hidden] { display: none; }

.snapsure__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(28, 12, 17, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 220ms ease;
}

.snapsure__dialog {
  position: relative;
  width: min(43.5rem, 100%);
  max-height: calc(100vh - var(--space-6xl));
  overflow-y: auto;
  border-radius: var(--space-2xl);
  background-color: #fff;
  color: #2d0011;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.snapsure.is-open .snapsure__backdrop { opacity: 1; }
.snapsure.is-open .snapsure__dialog { opacity: 1; transform: none; }

/* Reduceret bevaegelse: modalen maa ikke glide op, men den skal stadig tone
   ind. transition: none gav et haardt klip - dialogen og den sloerede baggrund
   sprang frem paa én frame. Bevaegelsen er transformen; opaciteten er ikke
   bevaegelse og bliver staaende. */
@media (prefers-reduced-motion: reduce) {
  .snapsure__backdrop,
  .snapsure__dialog { transition: opacity 180ms ease; }
  .snapsure__dialog { transform: none; }
}

.snapsure__body { padding: var(--space-5xl) var(--space-5xl) var(--space-4xl); }

.snapsure__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
}

.snapsure__eyebrow { margin: 0; font-size: var(--type-sm); font-weight: 500; }

/* 44x44 er minimum for et klikmaal, ogsaa selv om krydset er mindre. */
.snapsure__close {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-xl);
  background-color: #f5f4f1;
  color: #2d0011;
  cursor: pointer;
}

.snapsure__close:hover { background-color: #ece9e4; }
.snapsure__close svg { width: 18px; height: 18px; }

.snapsure__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4xl);
  align-items: start;
  margin-top: var(--space-xl);
}

.snapsure__heading {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  line-height: 1.1;
  font-weight: 600;
}

.snapsure__intro {
  margin: var(--space-md) 0 0;
  font-size: var(--type-md);
  line-height: 1.45;
  color: rgba(45, 0, 17, 0.55);
}

.snapsure__steps {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.snapsure__step {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--type-md);
  line-height: 1.3;
}

.snapsure__step-icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background-color: #ffd3e3;
  color: #2d0011;
}

.snapsure__step-icon svg { width: 18px; height: 18px; }

.snapsure__qr { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }

/* Den leverede SVG, i sit eget forhold. Den skaleres, men tegnes ikke om. */
.snapsure__qr img {
  width: clamp(9rem, 16vw, 11.625rem);
  height: auto;
  aspect-ratio: 1;
  display: block;
}

.snapsure__qr-label {
  margin: 0;
  font-size: var(--type-sm);
  color: rgba(45, 0, 17, 0.5);
  text-align: center;
}

.snapsure__explainer {
  margin-top: var(--space-4xl);
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--space-lg);
  background-color: #fff6fa;
}

.snapsure__explainer-heading {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--type-md);
  font-weight: 500;
}

.snapsure__explainer-icon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.snapsure__explainer-icon svg { width: 100%; height: 100%; }

.snapsure__explainer-body {
  margin: var(--space-md) 0 0;
  font-size: var(--type-md);
  line-height: 1.45;
}

.snapsure__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl) var(--space-5xl);
  background-color: #fff6fa;
}

.snapsure__footer-text { margin: 0; font-size: var(--type-md); font-weight: 500; }

.snapsure__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  /* Fast bredde, saa knappen ikke hopper naar teksten skifter til "Link
     kopieret". Fejlbeskeden staar udenfor, netop for ikke at kunne aendre den. */
  min-width: 10.5rem;
  justify-content: flex-start;
  padding: var(--space-sm) var(--space-lg) var(--space-sm) var(--space-sm);
  border: 0;
  border-radius: var(--radius-xl);
  background-color: transparent;
  color: #2d0011;
  font-size: var(--type-md);
  cursor: pointer;
}

.snapsure__copy-icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background-color: #ffacca;
  color: #2d0011;
}

.snapsure__copy-icon svg { width: 18px; height: 18px; }

/* Lykkedes kopieringen, skifter firkanten fra lyseroed til groen og ikonet til
   et flueben. To signaler, saa det ogsaa kan ses uden at laese teksten. */
/* Ikonskiftet ligger i CSS og ikke i JS. hidden findes kun som egenskab paa
   HTML-elementer, saa element.hidden = false gjorde ingenting paa et SVG:
   fluebenet blev liggende skjult, og kopi-ikonet blev liggende synligt. */
.snapsure__copy-icon [data-snapsure-icon-done] { display: none; }
.snapsure__copy-btn.is-done [data-snapsure-icon-copy] { display: none; }
.snapsure__copy-btn.is-done [data-snapsure-icon-done] { display: block; }

.snapsure__copy-btn.is-done .snapsure__copy-icon {
  background-color: #00b67a;
  color: #fff;
}
.snapsure__error {
  margin: 0 0 0 auto;
  padding-right: var(--space-lg);
  font-size: var(--type-sm);
  color: #b3123c;
}

@media screen and (max-width: 767px) {
  .snapsure__grid { grid-template-columns: minmax(0, 1fr); }
  .snapsure__qr { align-self: center; }
  .snapsure__body { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
  .snapsure__footer { padding: var(--space-lg) var(--space-2xl); flex-wrap: wrap; }
}

/* ── Lige luft over og under sektionerne ────────────────────────────────────
   Afstanden mellem to sektioner er summen af den enes bund og den naestes top.
   Er de ikke ens, bliver rytmen skaev, og det ses tydeligst omkring
   karrusellen: den havde 112px foroven og 0 forneden, saa der var 112px over
   produktfanerne og 224px under dem.

   Hver sektion faar samme vaerdi i begge ender, og vaerdien er den stoerste af
   de to, altsaa den der allerede var etableret. Intet bliver strammere end det
   var; der bliver kun lagt luft til i den ende der manglede den.

   Heroerne staar udenfor. Deres ekstra toppolstring er plads til den faste
   topbjaelke, ikke en fejl. */

/* Karrusellen slap helt uden bundpolstring. Selektoren gentager alle tre
   klasser, fordi exportens egen .padding-section-large.align-left
   .no-padding-bottom ellers vinder. */
.section_header103 .padding-section-large.align-left.no-padding-bottom {
  padding-bottom: 7rem;
}

.section_header62 [class*='padding-section'],
.section_header19 [class*='padding-section'] {
  padding-top: 7rem;
}

.section_auto-tabs [class*='padding-section'] {
  padding-top: 6rem;
}

@media screen and (max-width: 991px) {
  /* Exporten skalerer ned under desktop. Reglerne foelger med, saa forholdet
     holder, og bunden rettes nu ind efter toppen. */
  .section_header103 .padding-section-large.align-left.no-padding-bottom {
    padding-bottom: 6rem;
  }

  .section_header62 [class*='padding-section'],
  .section_header19 [class*='padding-section'] {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section_auto-tabs [class*='padding-section'] {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media screen and (max-width: 767px) {
  .section_header103 .padding-section-large.align-left.no-padding-bottom {
    padding-bottom: 4rem;
  }
}

@media screen and (max-width: 479px) {
  .section_header103 .padding-section-large.align-left.no-padding-bottom {
    padding-bottom: 3rem;
  }
}

/* Heroen faar hele telefonens skaerm.
   ---------------------------------------------------------------------------
   Paa desktop deler heroen og striben foerste skaerm, saa striben altid ligger
   i bunden af den. Paa telefon er der ikke plads til begge dele: heroen blev
   593px af 844, og striben aad resten.

   Her tager heroen alene de 100svh, og striben falder ned under kanten. Samme
   luft forneden som i siderne, saa filmens ramme slipper bunden lige saa meget
   som den slipper siderne.

   svh og ikke vh, saa rammen ikke ligger under adresselinjen indtil man
   scroller. 100vh staar foerst som fallback. */
@media screen and (max-width: 767px) {
  .hero-screen {
    display: block;
    min-height: 0;
  }

  .hero-screen > .hero-film,
  .section_header1.is-home.home.hero-film,
  /* Partnere foelger med: heroen tager telefonens vindue, og logo-baandet
     falder ned under kanten praecis som striben goer paa forsiden. */
  .hero-screen > .section_header5 {
    min-height: 100vh;
    min-height: 100svh;
    padding-bottom: var(--hero-film-gap);
  }
}

/* Samme skal om heroen paa alle sider.
   ---------------------------------------------------------------------------
   Forsiden satte filmen i en afrundet ramme, trukket ind fra toppen og begge
   sider. Produktsiderne og anmeld skade lod deres billede loebe helt ud til
   kanten, saa de tre sidetyper saa ud som tre forskellige sites.

   Samme to variabler som forsiden bruger, saa afstanden og radius foelger med
   naar de aendrer sig, og skallen er den samme paa tvaers.

   Margin og ikke padding: heroen har selv sin baggrundsfarve, saa det er
   sektionen der skal traekkes ind og rundes, ikke noget indeni den. Begge er i
   forvejen position: relative med billedet absolut placeret, saa overflow
   klipper det til de runde hjoerner. */
.hero-shell:not(.hero-film) {
  margin-inline: var(--frankly-block-gap);
  margin-top: var(--frankly-block-gap);
  border-radius: var(--hero-shell-radius);
  overflow: hidden;
}

/* Overskrifter deler sig jaevnt.
   ---------------------------------------------------------------------------
   Browserens normale ombrydning fylder hver linje helt op og lader resten
   staa alene, saa "Det her er du faktisk daekket for." endte med "for." paa
   sin egen linje. Det ses paa naesten hver side, baade paa desktop og telefon.

   balance beder i stedet browseren fordele ordene ligeligt over linjerne. Den
   gaelder kun ombrydning browseren selv laver: et <br> i teksten bestemmer
   stadig selv, hvor der brydes.

   Den roterende hero-overskrift staar udenfor. Den maaler sine egne linjer for
   at kunne skifte det oeverste ord, og en ombrydning der flytter sig under
   maalingen giver et hop. */
/* text-wrap-style og ikke text-wrap. text-wrap er en shorthand, der ogsaa
   saetter text-wrap-mode, og den ville slaa white-space: nowrap fra paa alt
   den ramte. Det skete for den roterende hero-overskrift: ordene staar med
   nowrap, og "Din vaskemaskine." brød derfor pludselig i to linjer, hvor kun
   den foerste var synlig i vinduet. text-wrap-style rører kun fordelingen. */
h1, h2, h3,
.display-4xl, .display-3xl, .display-2xl,
.display-large, .display-medium, .display-small, .display-xsmall,
.heading-style-h1, .heading-style-h2, .heading-style-h3 {
  text-wrap-style: balance;
}

.hero-film__headline,
.hero-film__headline * {
  text-wrap-style: auto;
}

/* Produktsidernes hero: kanten om illustrationen, og luft til teksten.
   ---------------------------------------------------------------------------
   Illustrationen er en video med sin egen lyserøde flade rundt om motivet, og
   den flade var ikke den samme som heroens. Videoen er 255,216,226 og heroen
   var 255,222,230. Seks og fire trins forskel er ikke meget, men kanten er
   snorlige og et par hundrede pixels lang, saa den laeses som en skygge hen
   over heroen.

   Maalt paa selve filen: baade elektronik og hvidevarer har 255,216,226 i alle
   fire hjoerner. Heroen faar den vaerdi, og saa er der ingen kant.

   Cykler har ingen flade - dens video er gennemsigtig - saa den er ligeglad, og
   alle tre produktsider kan dele den ene vaerdi.

   Bemaerk: plakatbilledet, som vises indtil videoen har tegnet sit foerste
   billede, har en helt tredje og noget moerkere lyserød, 235,197,210. Den kan
   ikke rettes i CSS. Den ses kun i det oejeblik videoen haenter sig. */
:root { --hero-art-pink: #ffd8e2; }

/* Tre klasser, fordi exportens .section_header1.is-home.home saetter den
   gamle farve og ellers vinder paa vaegt. */
.hero-shell.is-home.home:not(.hero-film),
.section_header30.hero-shell { background-color: var(--hero-art-pink); }

/* Lige meget luft paa begge sider af motivet.
   ---------------------------------------------------------------------------
   Exporten haengte kassen op i hoejre kant med en fast procent, og saa flyttede
   den sig hver gang max-width slog til eller teksten skiftede bredde. Ved 1280
   skulle den staa paa -3% for at se rigtig ud, ved 992 paa -14%. Een procent
   kunne ikke passe begge steder.

   Kassen faar derfor sit midtpunkt i stedet for sin kant. Motivet er tegnet
   midt i videoen med cirka 28% flad lyseroed i hver side, og object-fit
   beskaerer symmetrisk, saa motivets midte er kassens midte. Staar kassen midt
   mellem tekstens hoejre kant og kortets hoejre kant, staar motivet der ogsaa,
   og de to afstande bliver ens.

   73,3% er det punkt maalt paa siden: ved 992, 1100, 1280 og 1440 ligger midten
   mellem teksten og kanten paa 72,9%, 73,1%, 73,4% og 73,6% af heroens bredde. */
@media screen and (min-width: 992px) {
  .hero-shell .header1_background-image {
    right: auto;
    left: 73.3%;
    transform: translateX(-50%);
  }
}

/* Farverne er ens nu, men videoen ligger i sit eget lag og lander paa en halv
   pixel - dens hoejde er 70% af en hoejde der ikke gaar op - saa kanten
   udjaevnes mod baggrunden og staar tilbage som en haarfin streg.

   De to kanter der ligger inde paa kortet, foroven og til venstre, toner derfor
   ud over 24 pixels. Der er flad lyserød i begge ender af den overgang, saa
   selve motivet mærker ingenting. Hoejre kant haenger ud over kortet og bunden
   naar til kanten, saa de to har ingen streg at skjule. */
.hero-shell .header1_background-image {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 24px, #000 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 24px, #000 100%),
    linear-gradient(to bottom, transparent 0, #000 24px, #000 100%);
  mask-composite: intersect;
}

/* Alt herunder er desktop-mega-menuen.
   ---------------------------------------------------------------------------
   Under 992px er "Daekninger" en accordion i mobilmenuen med Webflows egen
   opsaetning. Reglerne her er skrevet til panelet med billede og to spalter, og
   de har ingen mening paa en telefon - griddet gav billedspalten 432px paa en
   375px skaerm, og de to spalter med menupunkter blev 0px brede. Punkterne laa
   dermed uden for skaermen, og accordionen aabnede sig tom.

   Derfor eet omslag om det hele i stedet for et par enkelte undtagelser: saa
   kan en ny regel ikke slippe ud paa mobil ved et uheld. */
@media screen and (min-width: 992px) {
  /* Menuen er bygget foerdig, foer man rører den.
     ---------------------------------------------------------------------------
     Webflow skifter display fra none til flex. Det betyder at hele panelet -
     1000x476 med otte billeder - skal laegges ud i det oejeblik musen rammer.
     Maalt til 17,7ms, altsaa mere end en frame ved 60Hz, saa den foerste frame
     efter aabningen droppes. Det er det man maerker som traeghed.

     Panelet ligger nu i layoutet hele tiden og er bare usynligt. At aabne det er
     derefter en aendring af opacity, som browseren klarer paa compositoren uden
     at laegge noget ud igen.

     visibility og ikke kun opacity: et usynligt panel maa ikke kunne rammes med
     musen eller med tabulator. visibility: hidden tager begge dele, og den kan
     animeres, hvor display ikke kan.

     Attributten i selektoren er der for at veje tungere end exportens egen
     .navbar2_dropdown-list.w--open. */
  .navbar2_dropdown-list[data-w-id],
  .navbar2_dropdown-list {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .navbar2_dropdown-list.w--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  /* Daekninger-menuen kommer til syne i stedet for at staa der.
     ---------------------------------------------------------------------------
     Webflow skifter bare display fra none til flex, saa hele panelet blinker
     frem paa een gang. Her toner det ind og kommer en anelse ned oppefra, mens
     punkterne foelger efter et ad gangen og billedet skalerer paa plads.

     @starting-style er det der goer det muligt: et element uden en tidligere
     tilstand kan ikke animere, og display: none er netop ingen tilstand.
     Reglen giver browseren et udgangspunkt at animere fra foerste gang elementet
     tegnes. Browsere uden den viser menuen som foer, altsaa med det samme.

     Ingen transition paa vej ud. Menuen lukker naar musen forlader den, og et
     panel der bliver haengende og fader er i vejen, ikke elegant. */
  .navbar2_dropdown-list .nav_megamenu_absolute-wrapper {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navbar2_dropdown-list .navbar12_dropdown-link-list > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 300ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navbar2_dropdown-list .navbar23_image-wrapper {
    transform: scale(1);
    opacity: 1;
    transition:
      transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 240ms ease;
  }

  .navbar2_dropdown-list:not(.w--open) .nav_megamenu_absolute-wrapper {
    opacity: 0;
    transform: translateY(-10px);
  }

  .navbar2_dropdown-list:not(.w--open) .navbar12_dropdown-link-list > * {
    opacity: 0;
    transform: translateY(8px);
  }

  .navbar2_dropdown-list:not(.w--open) .navbar23_image-wrapper {
    transform: scale(1.05);
    opacity: 0;
  }

  /* Vandfaldet, i tre trin.
     ---------------------------------------------------------------------------
     Billedet foerst, saa venstre spalte punkt for punkt, saa hoejre spalte. Man
     laeser menuen fra venstre, og saa bliver det den samme raekkefoelge som
     oejnene alligevel tager.

     Venstre spalte begynder 90ms efter billedet, hoejre 260ms efter. Med 55ms
     mellem punkterne er det sidste punkt i gang efter 425ms, og alt staar stille
     efter cirka 800ms.

     Trinnene var 40ms foer. Det var hurtigt nok til at raekkefoelgen naesten
     forsvandt i eet. 55ms goer den tydelig uden at man venter paa menuen - man
     er stadig ikke naaet at flytte musen ned i listen, foer den staar der. */
  .navbar2_dropdown-list {
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(1) { transition-delay: 90ms, 90ms; }
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(2) { transition-delay: 145ms, 145ms; }
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(3) { transition-delay: 200ms, 200ms; }
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(4) { transition-delay: 255ms, 255ms; }
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(5) { transition-delay: 310ms, 310ms; }
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(6) { transition-delay: 365ms, 365ms; }
    .navbar12_dropdown-content > *:nth-child(2) .navbar12_dropdown-link-list > *:nth-child(7) { transition-delay: 420ms, 420ms; }

    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(1) { transition-delay: 260ms, 260ms; }
    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(2) { transition-delay: 315ms, 315ms; }
    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(3) { transition-delay: 370ms, 370ms; }
    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(4) { transition-delay: 425ms, 425ms; }
    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(5) { transition-delay: 480ms, 480ms; }
    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(6) { transition-delay: 535ms, 535ms; }
    .navbar12_dropdown-content > *:nth-child(3) .navbar12_dropdown-link-list > *:nth-child(7) { transition-delay: 590ms, 590ms; }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Bevaegelsen gaar, ikke overgangen. Den der har slaaet bevaegelse fra vil
       vaere fri for ting der glider og skalerer, ikke for at kunne se at noget
       skifter. Saa transformerne nulstilles og kun opacity toner. */
    .navbar2_dropdown-list .nav_megamenu_absolute-wrapper,
    .navbar2_dropdown-list .navbar12_dropdown-link-list > *,
    .navbar2_dropdown-list .navbar23_image-wrapper,
    .navbar2_dropdown-list:not(.w--open) .nav_megamenu_absolute-wrapper,
    .navbar2_dropdown-list:not(.w--open) .navbar12_dropdown-link-list > *,
    .navbar2_dropdown-list:not(.w--open) .navbar23_image-wrapper {
      transform: none;
      transition: opacity 200ms ease;
    }
  }

  /* Priser og om Frankly: heroen er flad lyseroed.
     ---------------------------------------------------------------------------
     Exporten lagde en gradient paa header23, der gik fra lyseroed til sidens
     egen beige over de nederste 30%. Den gav mening dengang sektionen loeb ud i
     siden. Nu er den en afrundet kasse med luft omkring, og en kasse der falmer
     i bunden ser ud som om den mangler at blive tegnet faerdig. */
  .section_header23.hero-shell {
    background-image: none;
    background-color: var(--_primitives---frankly-pinks--pink-10);
  }

  /* Alexanders underskrift: mindre, og taettere paa teksten.
     ---------------------------------------------------------------------------
     Underskriften stod paa sine 293px fra exporten og var stoerre end den
     haandskrift den forestiller. 20% mindre, og hoejden foelger med af sig selv,
     fordi svg'en har et viewBox.

     Luften over den kom fra margin-large, som er sat til at skille to sektioner.
     Her skiller den en underskrift fra det den staar under, og det er ikke det
     samme spring. */
  .ceo_signature-wrapper svg {
    width: 80%;
    height: auto;
  }

  .margin-top.margin-large:has(.ceo_signature-wrapper) {
    margin-top: var(--space-2xl);
  }

  /* Nyhedsbjaelken foelger scrollen uden JavaScript.
     ---------------------------------------------------------------------------
     Bjaelken sidder i en fastgjort nav, saa den bliver staaende naar siden ruller.
     For at den skal se ud som en del af kortet, skal den flyttes lige saa meget
     op som siden ruller ned.

     Det gjorde JavaScript foer, en gang per scroll-haendelse. Det kan ikke gaa
     helt rent: browseren ruller paa compositor-traaden, og JavaScript kaldes fra
     hovedtraaden bagefter. Er hovedtraaden optaget et oejeblik - og det er den
     altid lige efter en sideindlaesning - staar bjaelken stille mens siden
     flytter sig, og hopper saa paa plads. Det er det man maerker som ryk foerste
     gang man scroller paa en ny side.

     En scroll-drevet animation kender ikke det problem. Browseren binder
     animationen direkte til scroll-positionen og kører den samme sted som
     scrollen selv. 0 til 200px scroll svarer til 0 til -200px flytning, altsaa
     et til et, og bjaelken kan ikke komme bagud.

     Skiftet til fuld bredde sker laenge foer de 200px, saa resten af kurven
     bruges aldrig.

     @supports, fordi browsere uden scroll-tidslinjer skal blive paa
     JavaScript-stien. Der er den ikke perfekt, men den virker. */
  @keyframes hero-shell-bar-ride {
    from { transform: translateY(0); }
    to   { transform: translateY(-200px); }
  }

  @supports (animation-timeline: scroll()) {
    body.bar-in-card .banner8_component {
      animation: hero-shell-bar-ride linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 200px;
    }
  }

  /* Menuen fylder mindre, og pilen kommer naar man peger.
     ---------------------------------------------------------------------------
     Panelet stod paa 1000px, fordi det fyldte vinduet ud til 80rem. Punkterne
     blev derfor 307px brede med luft i hoejre side af hver eneste linje.

     58rem er maalt frem. Smallere gaar det ikke uden at titlerne begynder at
     braekke i to linjer og panelet i stedet bliver hoejere: 52rem giver 832x606,
     58rem giver 928x516, og de oprindelige 1000 gav 486. Altsaa 72px smallere
     for 30px hoejere.

     Pilen laa paa display: none og blev aldrig vist. Den kan ikke animere fra
     ingenting, saa den er der nu hele tiden, bare usynlig og rykket lidt til
     venstre, og glider paa plads naar musen rammer punktet. Teksten flytter sig
     samtidig et par pixels, saa raekken foelger med i stedet for at staa stille
     mens noget dukker op i enden af den. */
  .nav_megamenu_absolute-wrapper {
    /* Bredden er den plads punkterne skal bruge, ikke hele vinduet. Titlerne
       braekker ikke, saa 70rem er sat efter det bredeste punkt plus billedet. */
    width: min(76rem, calc(100svw - var(--_ui-styles---radius--large)));
    max-width: min(76rem, calc(100svw - var(--_ui-styles---radius--large)));
    border-radius: 12px;
  }

  .nav-heading {
    white-space: nowrap;
  }

  /* Underteksterne er nu korte nok til at staa paa een linje hver. Loftet er
     sat over den laengste, saa ingen af dem braekker, men stadig lavt nok til at
     en fremtidig lang tekst braekker i stedet for at goere menuen bredere. */
  .navbar12_text-wrapper > p {
    max-width: 30ch;
  }

  .navbar23_image-wrapper {
    border-radius: 8px;
  }

  /* De sidste elleve pixels tages foroven. Kassen er 1,43 og tegningen 1,38, saa
     der mangler et par pixels i hoejden. Toppen af tegningen er tom lyseroed,
     bunden er soklen under motivet - saa det er toppen der kan undvaeres. */
  .nav-img {
    object-position: 50% 100%;
  }

  /* Indholdet er et grid, saa bredden paa billedet styres af spalten og ikke af
     elementet selv. Foerste spalte er billedet, de to andre foelger deres eget
     indhold - altsaa det bredeste punkt, uden at noget braekker. */
  /* Billedspalten er 27rem, ikke 22. Kassen var 370x317, altsaa forholdet 1,17,
     mens tegningen er 799x578, altsaa 1,38. object-fit: cover skalerer derfor op
     til hoejden og skaerer af i siderne, og motivets sokkel faldt uden for.
     27rem giver 432px, og 317 gange 1,38 er 437 - saa er der praktisk talt
     ingenting tilbage at skaere. */
  .navbar12_dropdown-content {
    grid-template-columns: 27rem minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Paa en smal desktop er der ikke plads til baade billedet og to spalter med
     titler der ikke braekker. Saa gaar billedet, og punkterne beholder deres
     bredde. Det er dem man er kommet efter. */
  @media screen and (min-width: 992px) and (max-width: 1199px) {
    .navbar12_dropdown-content {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .navbar23_item {
      display: none;
    }
  }

  /* Mindre luft mellem raekkerne. Exporten gav hvert punkt 24px foroven og
     forneden, saa to linjers undertekst blev til en 118px hoej raekke og listen
     faldt fra hinanden. 12px holder punkterne samlet som en liste, og
     klikfladen er stadig hoejere end de 44px der skal til. */
  .navbar12_dropdown-link,
  .navbar12_dropdown-link-soon {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Baggrunden bag et punkt, som scriptet foer satte direkte paa elementet. */
  .navbar12_dropdown-link {
    border-radius: 8px;
    transition: background-color 180ms ease;
  }

  .navbar12_dropdown-link:hover,
  .navbar12_dropdown-link:focus-visible {
    background-color: var(--_primitives---frankly-pinks--pink-05);
  }

  /* Pilen paa et menupunkt er to bevaegelser, ikke een.
     ---------------------------------------------------------------------------
     Foer var det hele firkanten der tonede ind og gled seks pixels. Det er for
     lidt til at oejet fanger det, naar firkanten er 30x30 og musen i forvejen er
     paa vej.

     Nu kommer firkanten foerst, lille og utonet, og vokser paa plads. Selve
     pilen indeni foelger 60ms efter og glider ind fra venstre. To ting der sker
     efter hinanden laeses som en bevaegelse; een ting der bare dukker op goer
     ikke.

     transform-box paa pilen, fordi et SVG-barn ellers regner sin transform ud
     fra hele tegningens koordinatsystem og ikke fra sig selv. */
  .nav_arrow-wrapper {
    display: flex;
    opacity: 0;
    transform: scale(0.72);
    transform-origin: center;
    transition:
      opacity 180ms ease,
      transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1);
  }

  .nav_arrow-wrapper svg path {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    transform: translateX(-5px);
    transition:
      opacity 200ms ease 60ms,
      transform 300ms cubic-bezier(0.16, 1, 0.3, 1) 60ms;
  }

  .navbar12_dropdown-link .nav_icon-text-wrapper {
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .navbar12_dropdown-link:hover .nav_arrow-wrapper,
  .navbar12_dropdown-link:focus-visible .nav_arrow-wrapper {
    opacity: 1;
    transform: scale(1);
  }

  .navbar12_dropdown-link:hover .nav_arrow-wrapper svg path,
  .navbar12_dropdown-link:focus-visible .nav_arrow-wrapper svg path {
    opacity: 1;
    transform: translateX(0);
  }

  .navbar12_dropdown-link:hover .nav_icon-text-wrapper,
  .navbar12_dropdown-link:focus-visible .nav_icon-text-wrapper {
    transform: translateX(3px);
  }

  @media (prefers-reduced-motion: reduce) {
    /* Samme princip: intet glider eller skalerer, men der tones stadig.

       Selektorerne skal naevne :hover og :focus-visible. Reglen der flytter
       ikonteksten staar som .navbar12_dropdown-link:hover .nav_icon-text-wrapper
       og vejer (0,3,0); en guard skrevet som .navbar12_dropdown-link
       .nav_icon-text-wrapper vejer (0,2,0) og taber. Guarden saa rigtig ud og
       gjorde ingenting. */
    .nav_arrow-wrapper,
    .nav_arrow-wrapper svg path,
    .navbar12_dropdown-link .nav_icon-text-wrapper,
    .navbar12_dropdown-link:hover .nav_arrow-wrapper,
    .navbar12_dropdown-link:focus-visible .nav_arrow-wrapper,
    .navbar12_dropdown-link:hover .nav_arrow-wrapper svg path,
    .navbar12_dropdown-link:focus-visible .nav_arrow-wrapper svg path,
    .navbar12_dropdown-link:hover .nav_icon-text-wrapper,
    .navbar12_dropdown-link:focus-visible .nav_icon-text-wrapper {
      transform: none;
      transition: opacity 180ms ease;
    }
  }

}

/* Aaben mobilmenu: logoet og knappen hoerer til menuen, ikke til heroen.
   ---------------------------------------------------------------------------
   Over en video er nav-baandet gennemsigtigt og logoet hvidt, saa man kan se
   filmen bag det. Naar menuen er aaben, er det forkert: den hvide flade
   begynder under logoraekken, og filmen kigger frem i en stribe over den, som
   om menuen ligger oven paa siden i stedet for at vaere siden.

   Baandet bliver derfor hvidt saa laenge menuen er aaben, og logoet moerkeroedt
   som alle andre steder paa hvidt. Krydset er moerkt i forvejen.

   :has paa body, fordi Webflow kun saetter w--open paa selve knappen og
   hverken paa body eller paa menuen. Den anden selektor gentager
   nav-over-hero, saa den vejer tungere end reglen der gjorde logoet hvidt. */
body:has(.w-nav-button.w--open) .nav-wrap,
body.nav-over-hero:has(.w-nav-button.w--open) .nav-wrap {
  background-color: var(--_primitives---base--white);
}

body:has(.w-nav-button.w--open) .navbar2_logo-link svg path,
body.nav-over-hero:has(.w-nav-button.w--open) .navbar2_logo-link svg path {
  fill: var(--_primitives---frankly-pinks--pink-40);
}

/* Talraekken paa om Frankly stod til venstre for midten.
   ---------------------------------------------------------------------------
   Exportens grid har seks spalter paa 1fr, og raekken har fem tal. Den sjette
   spalte staar tom yderst til hoejre, og de fem bliver derfor skubbet mod
   venstre - 200px forskudt i en 1280px bred raekke.

   En spalte per tal i stedet for seks faste, og raekken centreret. Saa er det
   ligegyldigt om der en dag er fire eller seks tal.

   .is-3col har sit eget grid og er ikke rørt. */
.about_numbers-wrapper:not(.is-3col) {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 12.5rem);
  justify-content: center;
}

/* Paa telefon er der ikke plads til fem tal ved siden af hinanden. Ved 375px
   giver det 75px per spalte, og "Typisk svartid paa en skade" braekker til fire
   linjer mens tallene loeber sammen. To spalter giver 164px hver, og raekken
   bliver tre linjer hoej i stedet for een ulæselig. */
@media screen and (max-width: 767px) {
  .about_numbers-wrapper:not(.is-3col) {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: var(--space-2xl) var(--space-lg);
    justify-content: stretch;
  }
}

/* Ordene i om Frankly-teksten deles paa serveren nu. SplitType satte foer
   display: inline-block direkte paa hvert ord; her staar det i stylesheetet,
   saa markupen er faerdig foer browseren tegner foerste gang. */
.layout484_text .word {
  display: inline-block;
}

/* Stablingen i toppen.
   ---------------------------------------------------------------------------
   Navigationen laa paa 2147483647, altsaa det hoejeste tal der findes. Saa kan
   intet nogensinde komme over den, og det gik ud over to ting: cookie-dialogen
   fra vores samtykkevaerktoej lagde sig under menulinjen, og SnapSure-modalen
   laa paa 2147483000 og havde dermed navigationen svaevende hen over sig.

   Der er ingen grund til at bruge det hoejeste tal. Navigationen skal ligge
   over siden, modalen over navigationen, og alt hvad en tredjepart laegger
   ind, over dem begge. 10000 og 10010 er rigeligt: det hoejeste i vores eget
   layout er 9999.

   .w-nav-overlay er Webflows eget lag bag mobilmenuen og skal foelge med. */
.navbar2_component,
.navbar2_component .w-nav-overlay,
.w-nav-overlay {
  z-index: 10000;
}

.snapsure {
  z-index: 10010;
}

/* ── Pressekort paa om Frankly ───────────────────────────────────────────────
   Kortet er nu et <a> i stedet for en <div>, saa hele fladen aabner artiklen
   og tastaturet kan naa den. Resten af udseendet kommer stadig fra
   .demo-card-2 i exporten; her staar kun det der er nyt.

   Stoerrelserne er trin fra skalaen i toppen af filen, ikke tal valgt til
   lejligheden. */
.presse-kort {
  /* Kortet var en <div> foer og arvede sin hvide skrift fra .demo-card-2.
     Som <a> giver browseren den sin egen linkfarve, og `inherit` ville hente
     sidens moerkeroede tekstfarve ind - altsaa moerkeroed skrift paa en
     moerkeroed flade. Farven skal saettes, ikke arves. */
  color: var(--_primitives---base--white);
  text-decoration: none;
}

/* Datoen er flyttet op over overskriften og opfoerer sig som en eyebrow:
   mindre, spatieret og i den samme lyse pink som foer. */
.presse-kort__dato {
  /* Pinken laa foer paa .text-size-base.text-color-pink30, altsaa kun naar
     begge klasser stod sammen. Datoen er mindre nu, saa farven saettes her. */
  color: var(--_primitives---frankly-pinks--pink-30);
  margin: 0;
  font-size: var(--type-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Medienavnet traeder i stedet for logoet paa de aviser vi ikke har et maerke
   til. Samme plads i toppen af kortet, og samme optiske vaegt: Keystones-
   maerket fylder 122x18, saa et navn sat i 12px laeste som en billedtekst ved
   siden af. 18px versaler rammer den samme hoejde og omtrent den samme bredde,
   saa de to kort ser ud til at have den samme slags afsender. */
.presse-kort__medie {
  color: var(--_primitives---base--white);
  margin: 0;
  font-size: var(--type-lg);   /* 18, som logoets hoejde */
  line-height: 1.125rem;       /* 18, saa boksen er logoets boks */
  letter-spacing: 0.04em;
}

/* Tekstknappen i bunden. Pilen skubbes en anelse til hoejre paa hover, og
   stregen under teksten vokser frem - begge dele paa selve kortet, saa det
   sker uanset hvor musen rammer. */
.presse-kort__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
  font-size: var(--type-sm);
  font-weight: 600;
  line-height: 1;
  position: relative;
  width: fit-content;
}
.presse-kort__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.5rem;
  bottom: -0.25rem;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.presse-kort:hover .presse-kort__link::after,
.presse-kort:focus-visible .presse-kort__link::after {
  transform: scaleX(1);
}
.presse-kort__link svg {
  flex: none;
  transition: transform 0.3s ease;
}
.presse-kort:hover .presse-kort__link svg,
.presse-kort:focus-visible .presse-kort__link svg {
  transform: translateX(var(--space-2xs));
}

/* Reduceret bevaegelse: pilen bliver staaende og stregen glider ikke frem, men
   den skal stadig kunne ses. Derfor opacity i stedet for ingenting - en regel
   med transition: none her ville betyde at kortet slet ikke svarer igen. */
@media (prefers-reduced-motion: reduce) {
  .presse-kort__link::after {
    transform: scaleX(1);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .presse-kort:hover .presse-kort__link::after,
  .presse-kort:focus-visible .presse-kort__link::after {
    opacity: 1;
  }
  .presse-kort__link svg {
    transition: none;
  }
  .presse-kort:hover .presse-kort__link svg,
  .presse-kort:focus-visible .presse-kort__link svg {
    transform: none;
  }
}

/* Med kun to omtaler slaar slideren sig selv fra - den koerer kun naar der er
   flere kort end der er plads til. Saa staar raekken venstrestillet i et
   felt der er bygget til fire, og det ligner en fejl. Centrer den i stedet,
   og lad det sidste kort slippe sin hoejremargin. */
[data-gsap-slider-status="not-active"] .gsap-slider__list {
  justify-content: center;
}
[data-gsap-slider-status="not-active"] .gsap-slider__item:last-child {
  margin-right: 0;
}

/* ── Fortaellingen paa om Frankly ────────────────────────────────────────────
   Overskriften der afsloeres ord for ord, mens man scroller.

   Exporten gav den fire stoerrelser, og de gik ikke i én retning:
   50px paa desktop, 28px under 992, 24px under 768 - og saa 36px igen under
   480. En telefon viste altsaa stoerre skrift end en tablet, og blokken blev
   1360px hoej paa en iPhone. Det er den scroll der foeltes af for meget.

   Her staar én ramp der kun gaar nedad. Trinene er fra skalaen i toppen af
   filen. Linjeafstanden foelger med ned, saa blokken ikke bare bliver smallere
   men ogsaa kortere. */
/* Rampen haenger paa [data-ord-delt], ikke paa .layout484_text alene.
   Klassen kommer ogsaa fra ScrollTextBlock.astro, som /techbbq bruger, og den
   side har ikke bedt om mindre skrift. Attributten saettes kun af om Frankly,
   hvor ordene deles paa serveren.

   Attributten loefter samtidig specificiteten til (0,2,0), saa reglerne vinder
   over exportens egne .layout484_text-regler i alle fire media queries.

   Linjeafstanden laa kort paa 56px for at give afsloeringen flere pixels at
   arbejde i. Det var for meget luft at se paa, saa den er tilbage paa 46 -
   afsloeringen paa telefon bliver hurtigere af det, og det er den rigtige
   byttehandel: siden skal se rigtig ud, animationen er noget der sker i den.

   letter-spacing staar med, fordi exporten saetter -1px ved basis og -.72px
   under 480. Uden den her linje ville knibningen springe ved 480 selv om
   skriftstoerrelsen er den samme paa begge sider. */
.layout484_text[data-ord-delt] {
  font-size: 2.25rem;     /* 36, var 50 */
  line-height: 2.875rem;  /* 46 */
  letter-spacing: -0.02em;
}

@media screen and (max-width: 991px) {
  .layout484_text[data-ord-delt] {
    font-size: 1.75rem;   /* 28, uaendret */
    line-height: 2.25rem; /* 36 */
  }
}

/* Under 480 stod der 36px i exporten - stoerre end baade tablet og desktop.
   Rampen stopper her, saa 767-reglen daekker hele vejen ned og der er ingen
   grund til en 479-blok, der ville saette praecis de samme vaerdier. */
@media screen and (max-width: 767px) {
  .layout484_text[data-ord-delt] {
    font-size: 1.5rem;    /* 24 */
    line-height: 2rem;    /* 32 */
  }
}

/* ── Resten af fortaellings-sektionen ────────────────────────────────────────
   Overskriften var ikke alene om at fylde. Underskriften, titlen under den og
   de fem tal skalerede ikke med, saa da teksten blev mindre, stod de tilbage
   som de stoerste ting i sektionen.

   Alt herunder er scopet til .section_layout484 med vilje. .display-small
   staar 21 steder paa siden og .text-size-xsmall 20 - kun fem og syv af dem er
   i den her sektion, og resten skal ikke roeres. */

/* Underskriften. Den stod paa 80% af sine 293px paa desktop og fulde 293px paa
   telefon, altsaa stoerre paa den mindste skaerm. Nu gaar den nedad begge
   steder, og telefonen faar ikke laengere den stoerste udgave. */
.section_layout484 .ceo_signature-wrapper svg {
  width: 80%;
  height: auto;
}
@media screen and (min-width: 992px) {
  .section_layout484 .ceo_signature-wrapper svg {
    width: 68%;
  }
}

/* CEO & Co-founder under underskriften. */
.section_layout484 .ceo_signature-wrapper p {
  font-size: var(--type-lg);      /* 18, var 20 */
  line-height: 1.625rem;          /* 26 */
}
@media screen and (max-width: 767px) {
  .section_layout484 .ceo_signature-wrapper p {
    font-size: var(--type-sm);    /* 14, var 16 */
    line-height: 1.25rem;
  }
}

/* Tallene og deres etiketter. */
.section_layout484 .about_content_numbers-wrapper .display-small {
  font-size: var(--type-2xl);     /* 24, var 28 paa desktop og 26 paa telefon */
  line-height: 1.875rem;          /* 30 */
}
.section_layout484 .about_content_numbers-wrapper .text-size-xsmall {
  font-size: var(--type-xs);      /* 13, var 14 */
  line-height: 1.125rem;          /* 18 */
}

/* Afstanden mellem afsnittene i fortaellingen.
   Teksten stod med <br><br>, saa afstanden var laast til én linjehoejde. Da
   skriften gik fra 50 til 36px, skrumpede afsnitsafstanden med den, og de tre
   afsnit loeb sammen til én blok. Her staar den for sig og kan saettes efter
   oejet i stedet for at foelge linjeafstanden. */
.layout484_text[data-ord-delt] .ord-afsnit {
  display: block;
  height: var(--space-6xl);                           /* 48 */
}
@media screen and (max-width: 767px) {
  .layout484_text[data-ord-delt] .ord-afsnit {
    height: var(--space-5xl);                          /* 40 */
  }
}

/* ── Et produktkort der ikke kan koebes ──────────────────────────────────────
   Et SOON-kort skal ikke opfoere sig som et kort man kan trykke paa. Knapperne
   bliver ikke tegnet i markupen - de er en indgang, og indgangen er lukket -
   men hover sad stadig i kortet: billedet zoomede til 1.06 og indholdsfeltet
   foldede sig ud for at vise knapper der ikke laengere findes.

   Klassen kommer fra exportens egen soon-tilstand, saa den rammer baade de
   kort der altid har vaeret SOON og hvidevarer, der lige er blevet det. */
.layout522_card-small:has(.layout522_card-small-content-soon):hover .layout522_background-image,
.layout522_card-large:has(.layout522_card-large-content-soon):hover .layout522_background-image {
  transform: none;
}
.layout522_card-small-content-soon,
.layout522_card-large-content-soon {
  grid-template-rows: auto 0fr;
}
.layout522_card-small:hover .layout522_card-small-content-soon,
.layout522_card-small:focus-within .layout522_card-small-content-soon,
.layout522_card-large:hover .layout522_card-large-content-soon,
.layout522_card-large:focus-within .layout522_card-large-content-soon {
  grid-template-rows: auto 0fr;
}

/* ── Fanebilleder maa aldrig straekkes ───────────────────────────────────────
   Exporten satte object-fit: fill paa .tab-image under 480px. fill betyder
   "fyld kassen ud, uanset hvad billedet har af formater" - altsaa det ene
   valg der forvraenger et fotografi i stedet for at beskaere det.

   Det var ikke synligt saa laenge billederne tilfaeldigvis havde kassens
   format. Paa partnere er to af dem liggende, 1672x941, og kassen er
   staaende: 354x400 paa en iPhone. Et forhold paa 1.78 presset ned i 0.88 er
   en halvering af bredden, og det er dét man ser paa personerne.

   cover er det samme som basisreglen laengere oppe i exporten: billedet
   fylder kassen ud og bliver beskaaret i kanterne. object-position staar
   allerede paa midten, saa der beskaeres lige meget i begge sider.

   Reglen er skrevet uden max-width, saa den ogsaa daekker hvis nogen senere
   flytter breakpointet. Et fotografi skal aldrig have fill. */
.tab-image,
.tab-image.is-2 {
  object-fit: cover;
}
@media screen and (max-width: 991px) {
  /* Exporten satte contain her. Det forvraenger ikke, men et staaende billede
     i en liggende kasse bliver til en smal stribe med luft i siderne. Samme
     behandling som paa de store skaerme. */
  .tab-image,
  .tab-image.is-2 {
    object-fit: cover;
  }
}

/* ── Fanebilledet har desktops proportioner overalt ──────────────────────────
   Kassen havde fast hoejde og hentede sin bredde fra kolonnen, saa formatet
   skiftede med skaermen: 632x800 (0.79) paa 1440, 524x860 (0.61) paa 1200,
   675x400 (1.69) paa tablet og 338x400 (0.84) paa telefon. Det liggende
   fotografi blev dermed beskaaret forskelligt alle fire steder, og paa tablet
   var kassen endda liggende hvor den er staaende paa desktop.

   Mickey har peget paa 1440 som facit: dét udsnit er det rigtige. Saa laases
   formatet til 632/800 under 992px. Hoejden bliver staaende paa de 400px
   sektionen er bygget til, og bredden foelger forholdet - 316px - i stedet for
   at fylde kolonnen ud. Saa er udsnittet det samme som paa desktop, og
   sektionen bliver ikke hoejere af det.

   width paa .tab-image skal saettes her: exporten saetter width: auto under
   480px, og saa ville billedet trykke sig selv sammen igen. */
@media screen and (max-width: 991px) {
  .tab-visual__inner {
    aspect-ratio: 632 / 800;
    height: 100%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
  .tab-image,
  .tab-image.is-2 {
    width: 100%;
    height: 100%;
  }
}

/* ── Partneres hero og logo-baand som een skaerm ─────────────────────────────
   Samme mekanik som forsidens hero og promise-stribe: .hero-screen er en
   flex-kolonne paa 100svh, baandet fylder sin egen hoejde, og heroen tager
   resten. Saa ender de to heroer samme sted uden at nogen hoejde er skrevet
   ned - og uden at de skal holdes i sync i haanden naar den ene aendrer sig.

   Foer laa baandet inde i heroen, nederst oven paa fotografiet, og heroen var
   909px hoej i et 900px vindue. Der var altsaa ingenting at ane under kanten. */
.hero-screen > .section_header5 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Gulvet der holdt heroen paa 90% af vinduet.
   -------------------------------------------------------------------------
   Exporten giver .header5_content - ikke selve heroen - et min-height paa
   90svh. I et 900px vindue er det 810px, og det var den hoejde heroen sad
   fast paa uanset hvad flex'en gav den. Indholdet fylder kun 483.

   Gulvet giver mening naar heroen staar alene og skal fylde skaermen. Inde i
   .hero-screen er det skaermen der fordeler hoejden, praecis som paa
   forsiden, og saa er gulvet i vejen. Ingen anden padding eller hoejde er
   roert - sektionen beholder sin egen rytme.

   Kun over 768px: derunder giver mobil-reglen laengere oppe heroen hele
   vinduet, og dér skal gulvet have lov at blive. */
@media screen and (min-width: 768px) {
  .hero-screen .header5_content {
    min-height: 0;
  }
}

.hero-screen > .section_logo {
  flex: 0 0 auto;
}

/* Samme luft som promise-striben har: 2.5rem over og under indholdet i stedet
   for exportens 1.5rem. Det er dét der faar de to baand til at laese som den
   samme slags baand under to forskellige heroer. */
.hero-screen > .section_logo .partners-logo-component {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Logoerne er sorte SVG'er. Exporten vender dem om med filter: invert(), fordi
   de laa oven paa et moerkt fotografi. Nu ligger de paa sidens beige, saa de
   skal vaere sig selv igen.

   Opaciteten foelger med ned fra .4: den vaerdi holdt hvidt paa et foto i ro,
   men sort paa beige ved .4 bliver til graat. .55 giver omtrent den samme
   vaegt i forhold til baggrunden. */
.hero-screen > .section_logo .partners-logo-component {
  filter: none;
  opacity: 0.55;
}

/* ── Fanerne i layout406 skal krydsfade, ikke blinke ─────────────────────────
   Webflow-komponenten staar med data-duration-in="0" og data-duration-out="0".
   Dens eget JavaScript saetter derfor display og opacity direkte, uden
   overgang, og skiftet bliver et hak: det ene panel forsvinder, det naeste
   dukker op.

   Panelerne ligger i forvejen oven paa hinanden - webflow-embeds.css gav dem
   position: absolute netop for at kunne krydsfade - saa der er ikke andet i
   vejen end at der ingen overgang er.

   !important er ikke pyntet paa: Webflow skriver opacity og display som inline
   style, og inline slaar et stylesheet. Uden det vinder den instant.

   display holdes paa block hele tiden. En overgang paa et element der gaar fra
   display: none kan ikke koere - browseren har ingenting at gaa fra. Panelet
   holdes derfor tegnet og styres udelukkende af opacity, og pointer-events
   sikrer at det usynlige panel ikke kan rammes. */
@media screen and (min-width: 480px) {
  .layout406_tab-pane {
    display: block !important;
    opacity: 0 !important;
    transition: opacity 320ms ease;
    pointer-events: none;
  }
  .layout406_tab-pane.w--tab-active {
    opacity: 1 !important;
    pointer-events: auto;
  }

  /* Reduceret bevaegelse: stadig en overgang, bare kortere. Et hak er ikke
     mindre bevaegelse end en toning - det er mere. */
  @media (prefers-reduced-motion: reduce) {
    .layout406_tab-pane {
      transition: opacity 120ms ease;
    }
  }
}

/* Vejen ud af SnapSure-modalen for den der ville anmelde en skade.
   Raekken bruger footerens egne klasser, saa de to staar med samme layout -
   etiket til venstre, knap til hoejre - uden at det skal vedligeholdes to
   steder. Her staar kun det der adskiller dem.

   Den klaeber til bunden af dialogen. Dialogen er hoejdebegraenset og scroller
   indvendigt, saa uden det lander raekken under kanten paa et lavt vindue, og
   saa skal man scrolle i modalen for at finde den. Pointen er at den ses af
   en der er havnet her ved en fejl. */
/* Gruppen klaeber, ikke den enkelte raekke. Klaebede kun skadesraekken, lagde
   den sig oven paa "kan du ikke scanne koden" naar dialogen scrollede. */
.snapsure__footer-group {
  position: sticky;
  bottom: 0;
}

.snapsure__footer--claims {
  border-top: 1px solid rgba(45, 0, 17, 0.08);
}

.snapsure__claims-btn {
  text-decoration: none;
  /* Kopiknappen har en fast bredde, fordi dens tekst skifter naar man har
     kopieret. Den her skifter ikke, saa den skal ikke arve baandet. */
  min-width: 0;
}

.snapsure__claims-btn .snapsure__copy-icon {
  background-color: #ffd3e3;
}