/* B2 on public surfaces: open corners, layered paper and connected stories. */
body{--paper:var(--b2-paper);--white:var(--b2-white);--ink:var(--b2-ink);--muted:var(--b2-muted);--line:var(--b2-line);--soft:var(--b2-mist);--accent:var(--b2-moss);--green:var(--b2-ink)}
:is(h1,h2,h3) em{font-style:normal;color:var(--b2-moss)}
h1,h2{font-weight:400}
.shell-brand img,.shell-footer-brand>a>img{width:184px;height:auto}
.shell-header{padding-block:27px;border-bottom:1px solid var(--b2-line)}
.shell-footer{position:relative}.shell-footer-brand{position:relative}
.shell-footer-brand::after{content:'';display:block;width:108px;height:65px;margin-top:26px;background:url('/brand/b2/forbindelser.svg') left center/contain no-repeat;opacity:.5}
.button{border-radius:5px 5px 15px 5px;font-weight:500;transition:background .2s,box-shadow .2s,transform .2s}
.button:hover{box-shadow:0 6px 18px #294c4b17}.button:active{transform:translateY(1px)}
.hero.product-hero{padding-block:70px 64px;gap:60px;position:relative;isolation:isolate}
.hero.product-hero::before{content:'';position:absolute;right:-20px;top:14px;width:49%;height:95%;background:url('/brand/b2/monster-rolig.svg') center/520px;opacity:.12;z-index:-1;pointer-events:none}
.product-hero h1{font-size:clamp(42px,4.7vw,62px);line-height:1.04;letter-spacing:-.035em}
.product-hero .eyebrow{display:flex;align-items:center;gap:12px;max-width:37ch}
.product-hero .eyebrow::before{content:'';display:block;width:26px;height:30px;flex:none;background:url('/brand/b2/b2-symbol-gronn.svg') center/contain no-repeat}
.product-album{transform:none;border-radius:5px 5px 25px 5px;box-shadow:11px 12px 0 -1px var(--b2-mist),11px 12px 0 0 var(--b2-sage),0 24px 55px #294c4b10;position:relative;overflow:visible;background:var(--b2-white)}
.product-album-top{padding:18px 23px}
.product-album-photo{margin:0 15px;clip-path:polygon(0 0,calc(100% - 42px) 0,100% 42px,100% 100%,0 100%);border-radius:0;position:relative}
.product-album-photo::after{content:'';position:absolute;left:12px;top:12px;width:23px;height:23px;border-left:1px solid #fffdf8bb;border-top:1px solid #fffdf8bb;pointer-events:none}
.product-album-caption{padding:22px 25px 13px}.product-album-note{padding:0 25px 22px;font-size:11px}
.product-album-caption h2{font-weight:400}
.product-person-row>a{border-radius:4px 4px 12px 4px;background:var(--b2-mist)}
.b2-story-trace{position:absolute;right:-21px;top:39%;width:160px;height:85px;pointer-events:none;z-index:2}
.b2-story-trace path{fill:none;stroke:var(--b2-sage);stroke-width:1.5}
.b2-story-trace circle{fill:var(--b2-white);stroke:var(--b2-moss);stroke-width:1.5}
.b2-hero-note{position:absolute;right:-22px;top:52%;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 15px;background:var(--b2-white);border:1px solid var(--b2-sage);border-radius:4px 4px 13px 4px;box-shadow:0 8px 25px #294c4b14;max-width:190px;pointer-events:none}
.b2-hero-note img{width:27px;height:27px}.b2-hero-note span{font-size:11px;line-height:1.5;color:var(--b2-muted)}.b2-hero-note strong{display:block;color:var(--b2-ink);font-size:12px;font-weight:500}
.trust{border-block:1px solid var(--b2-line);padding-block:21px}
.section-heading>.eyebrow,.section-heading>div>.eyebrow{color:var(--b2-moss)}
.journey-shell{border-radius:5px 5px 24px 5px;border-color:var(--b2-line);box-shadow:var(--b2-shadow)}
.journey-steps{background:var(--b2-mist)}.journey-steps button[aria-current]{border-radius:4px 4px 13px 4px;box-shadow:inset 0 -2px var(--b2-moss)}
.journey-visual{border-radius:0;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
.product-entry,.guide-card{border-radius:5px 5px 22px 5px;border-color:var(--b2-line)}
.product-entry>img{clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.product-entry h3,.product-feature-grid h3{font-weight:400}
.product-entry .symbol,.product-feature-grid .symbol{background:var(--b2-mist);border-radius:4px 4px 13px 4px}
.b2-pictogram{display:block;width:28px;height:28px;object-fit:contain}
.product-feature-grid article{position:relative}.product-feature-grid article::after{content:'';position:absolute;right:0;top:-1px;width:21px;height:1px;background:var(--b2-moss)}
:is(.intro-photo,.article-photo)>picture>img{clip-path:polygon(0 0,calc(100% - 35px) 0,100% 35px,100% 100%,0 100%);border-radius:0}
:is(.product-privacy,.callout,.product-support-grid>section,.product-price-grid article,.shell-follow){border-radius:5px 5px 22px 5px}
.closing{position:relative;isolation:isolate;overflow:hidden;border-radius:5px 5px 28px 5px;border:1px solid var(--b2-line)}
.closing::before{content:'';position:absolute;right:-70px;bottom:-95px;width:310px;height:280px;background:url('/brand/b2/monster-rolig.svg') center/cover;opacity:.15;z-index:-1;pointer-events:none}
.b2-motion-toggle{font:inherit;font-size:12px;min-height:36px;padding:5px 0;border:0;background:none;color:var(--b2-muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media(min-width:641px){.product-hero>div:first-child{padding-bottom:18px}}
@media(max-width:900px){.hero.product-hero{gap:30px}.b2-hero-note{right:-8px;max-width:160px}.b2-story-trace{right:-8px}.product-hero h1{font-size:46px}}
@media(max-width:640px){
 .shell-header{padding-block:18px}.shell-brand img{width:155px}
 .hero.product-hero{padding:34px 0 45px;gap:32px}.product-hero h1{font-size:42px}
 .hero.product-hero::before{width:95%;height:54%;top:auto;bottom:8px;right:0;opacity:.1}
 .product-album{margin:0 8px 10px 0;box-shadow:7px 8px 0 -1px var(--b2-mist),7px 8px 0 0 var(--b2-sage)}
 .product-album-photo{margin-inline:12px}.product-album-caption{padding:20px}.product-album-note{padding:0 20px 18px}
 .b2-hero-note{top:42%;right:-5px;padding:9px 10px;max-width:146px}.b2-hero-note strong{font-size:11px}.b2-hero-note span{font-size:10px}.b2-hero-note img{width:23px}
 .b2-story-trace{top:34%;right:-4px;width:110px}.trust{gap:14px}
 .product-hero .eyebrow{font-size:10px;line-height:1.6}.product-feature-grid h3{font-size:21px}
}
@media(max-width:360px){.product-hero h1{font-size:36px}.b2-hero-note{display:none}.shell-brand img{width:144px}}
@media(prefers-reduced-motion:no-preference){
 .b2-hero-note{animation:b2-float 7s ease-in-out infinite;animation-play-state:paused}
 .b2-story-trace .b2-trace-progress{stroke:var(--b2-moss);stroke-dasharray:12 160;animation:b2-trace 7s linear infinite;animation-play-state:paused}
 .b2-in-view .b2-hero-note,.b2-in-view .b2-trace-progress{animation-play-state:running}
 .b2-motion-paused .b2-hero-note,.b2-motion-paused .b2-trace-progress{animation-play-state:paused}
 @keyframes b2-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
 @keyframes b2-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
 @keyframes b2-trace{to{stroke-dashoffset:-172}}
}
@media(prefers-reduced-motion:reduce){.product-album,.b2-hero-note,.b2-story-trace *{animation:none!important}.product-entry:hover{transform:none}}
@media print{.b2-hero-note,.b2-story-trace,.b2-motion-toggle{display:none!important}.product-album{box-shadow:none}}