/* Homepage hero and the app vocabulary its mock screens are built from. */

/* hero; .motion-intro is set in <head> and lifted by home-motion.js so the intro does not flash */
.motion-intro [data-hero-in],.motion-intro [data-hero-bubble],.motion-intro [data-hero-card]{opacity:0}
.hero-wrap{padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(36px,4.4vw,60px);display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.hero-grid{grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:clamp(44px,5vw,72px)}
.hero-copy{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.hero-heads{display:flex;flex-direction:column;gap:14px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:5px 14px 5px 5px;border-radius:999px;background:rgba(255,255,250,.08);box-shadow:inset 0 0 0 1px rgba(255,255,250,.14);font-size:13.5px;font-weight:700;color:rgba(255,255,250,.9);transition:background .15s}
.eyebrow:hover{color:var(--paper);background:rgba(255,255,250,.12)}
.eyebrow svg{flex:none;transition:transform .2s var(--ease-out)}
.eyebrow:hover svg{transform:translateX(3px)}
.eb-new{height:26px;padding:0 10px;border-radius:999px;background:var(--cta);color:var(--green);font-size:12px;font-weight:800;display:inline-flex;align-items:center;flex:none}
.hero-kicker{margin:0;display:flex;align-items:center;gap:10px;font-size:clamp(15px,1.3vw,17px);line-height:1.3;font-weight:800;letter-spacing:-.01em;color:var(--cta)}
.hero-kicker i{width:8px;height:8px;border-radius:50%;background:var(--cta);flex:none}
.hero-title{margin:0;font-size:clamp(40px,5vw,72px);line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--paper)}
.hero-line{display:inline-block}
.hero-lead{margin:0;max-width:520px;font-size:clamp(16.5px,1.45vw,18.5px);line-height:1.58;font-weight:500;color:rgba(255,255,250,.8);text-wrap:pretty}
.hero-checks{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0;padding:0;list-style:none;font-size:13.5px;font-weight:600;color:rgba(255,255,250,.68)}
.hero-checks li{display:inline-flex;align-items:center;gap:8px}
.stage{position:relative;width:100%;max-width:580px;justify-self:end}
@media (max-width:1080px){.stage{justify-self:start;max-width:620px}}
.show-s{display:none}
@media (max-width:560px){
.show-s{display:inline}
.hero-wrap{padding-top:40px}
.hero-grid{gap:40px}
.hero-copy{gap:20px}
.hero-checks{gap:8px 16px;font-size:13px}
}

/* speech */
.bubrow{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.bub-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.bubble{border-radius:6px 18px 18px 18px;background:rgba(255,255,250,.11);padding:11px 16px;font-size:15px;line-height:1.5;font-weight:600;color:rgba(255,255,250,.94);max-width:440px}
.bubble b{font-weight:800;color:var(--paper)}
.who{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:800;color:var(--ink)}
.who span{font-size:12.5px;font-weight:600;color:var(--muted-2)}
.who-dk{color:var(--paper)}
.who-dk span{color:rgba(255,255,250,.62)}

/* avatars */
.av{display:block;flex:none;border-radius:50%;background:url(img/agents-sprite.jpg?v=2) no-repeat 0 0/400% 100%}
.av-emma{background-position:0 0}.av-revi{background-position:33.333% 0}.av-omar{background-position:66.667% 0}.av-bruno{background-position:100% 0}
.av-heidi,.av-martin{background-size:cover;background-position:center}
.av-heidi{background-image:url(img/person-heidi.jpg?v=1)}
.av-martin{background-image:url(img/person-martin.jpg?v=1)}
.s24{width:24px;height:24px}.s30{width:30px;height:30px}.s32{width:32px;height:32px}.s40{width:40px;height:40px}.s48{width:48px;height:48px}
.ring-hero{box-shadow:0 0 0 2px rgba(255,255,250,.9)}
.ring-row{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--line-2)}
.ring-mint{box-shadow:0 0 0 3px var(--mint)}
.ring-ink{box-shadow:0 0 0 3px var(--green)}
.ini{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--paper);background:var(--blue);flex:none}

/* list card */
.cardwrap{position:relative}
.cardwrap::before{content:"";position:absolute;left:18px;right:-12px;top:22px;bottom:-14px;border-radius:var(--radius-lg);background:rgba(255,255,250,.07);transform:rotate(3deg)}
.lcard{position:relative;display:flex;flex-direction:column;padding:8px;border-radius:var(--radius-lg);background:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.12);color:var(--ink)}
.lhead{min-height:52px;display:flex;align-items:center;gap:10px;padding:0 14px}
.lhead-lg{min-height:60px}
.lhead-t{font-size:15px;font-weight:800;letter-spacing:-.01em}
.lhead-s{font-size:13px;font-weight:700;color:var(--muted-2)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#1F7A57;display:block;animation:k-live 1.8s ease-out infinite}
.lrow{position:relative;min-height:62px;display:flex;align-items:center;gap:14px;padding:0 14px;border-radius:14px}
.lrow+.lrow::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:var(--line)}
.lbody{flex:1;min-width:0}
.sc{position:relative;width:22px;height:22px;flex:none}
.sc>span{position:absolute;inset:0;display:grid;place-items:center}
.lt{font-size:14px;font-weight:800;line-height:18px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls{font-size:12.5px;line-height:18px;font-weight:600;color:var(--muted-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls.srcl{display:flex;align-items:center;gap:6px;color:var(--green);font-weight:700}
.ls.srcl svg{flex:none}
.swap{position:relative;height:18px;margin-top:2px}
.swap>span{position:absolute;inset:0 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;line-height:18px;font-weight:600;color:var(--muted-2)}
.swap>.sb{color:var(--green);font-weight:800;display:flex;align-items:center;gap:6px}
.swap>.sb svg{flex:none}
.lfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;box-shadow:inset 0 1px 0 var(--line)}
.lfoot-note{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted)}
.rot{animation:k-rot .9s linear infinite}
.sc-wait{opacity:0}

/* chips */
.team{height:24px;padding:0 9px;border-radius:999px;background:var(--hover);color:var(--ink-3);font-size:12px;font-weight:800;flex:none;white-space:nowrap}
.why{height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;flex:none}
.why,.team{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.why{line-height:26px}.team{line-height:24px}
.why.sm{height:22px;padding:0 8px;font-size:11.5px;line-height:22px}
.why.hot{background:var(--hot-bg);color:var(--hot)}.why.pri{background:#F0F0E6;color:var(--ink-3)}.why.blk{background:var(--blue-bg);color:var(--blue)}.why.yday{background:var(--mint);color:var(--green)}
.mini{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--hover);white-space:nowrap}
.mini-dk{background:var(--green);color:var(--paper)}
.mini-line{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.ic-mint{color:var(--cta)}
.vm{font-size:12.5px;font-weight:600;color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.vm-lg{font-size:13.5px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}
.st{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lfoot .auto{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;background:var(--green);color:var(--paper);font-size:12.5px;font-weight:800;white-space:nowrap;flex:none}
.lfoot .auto svg{color:var(--cta)}

/* mini screens inside cards */
.vis{margin-top:auto;padding:8px;border-radius:var(--radius-md);background:var(--paper);box-shadow:0 0 0 1px var(--line-2);display:flex;flex-direction:column}
.vrow{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;font-size:13.5px;font-weight:800;color:var(--ink)}
.vrow+.vrow{box-shadow:inset 0 1px 0 var(--line)}
.vrow svg{flex:none}
.pbar{width:40px;height:6px;border-radius:999px;background:var(--line);overflow:hidden;flex:none;display:block}
.pbar i{display:block;width:var(--w);height:6px;border-radius:999px;background:var(--green);transform-origin:left center}
.act{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px;font-size:13.5px;font-weight:600;color:var(--ink-3)}
.act+.act{box-shadow:inset 0 1px 0 var(--line)}
.act b{font-weight:800;color:var(--ink)}
.act .t{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums;flex:none}
.dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--green);color:var(--cta)}
.dot.lite{background:var(--line);color:var(--ink-3)}
.brow{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;font-size:13.5px;font-weight:700;color:var(--ink)}
.brow svg{flex:none}
.brow-lg{min-height:50px}
.brow.child{padding-left:40px}
.brow.child::before{content:"";position:absolute;left:19px;top:-8px;width:12px;height:30px;border-left:1.5px solid #D6D8CE;border-bottom:1.5px solid #D6D8CE;border-bottom-left-radius:7px}
.vis-foot{display:flex;align-items:center;gap:8px;padding:8px 10px 6px}
.wrap-row{flex-wrap:wrap}

/* hero loop: the payroll filing closes itself when Altinn confirms it */
.an{animation-duration:10s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-fill-mode:both}
.r1{animation-name:k-tint}
.sp1{opacity:0;animation-name:k-sp}
.dn1{opacity:1;animation-name:k-dn}
.sa{opacity:0;animation-name:k-sa}
.sb{opacity:1;animation-name:k-sb}
@keyframes k-live{0%{box-shadow:0 0 0 0 rgba(31,122,87,.45)}70%{box-shadow:0 0 0 7px rgba(31,122,87,0)}100%{box-shadow:0 0 0 0 rgba(31,122,87,0)}}
@keyframes k-rot{to{transform:rotate(360deg)}}
@keyframes k-sp{0%{opacity:1}36%{opacity:1}40%{opacity:0}96%{opacity:0}100%{opacity:1}}
@keyframes k-dn{0%{opacity:0;transform:scale(.5)}38%{opacity:0;transform:scale(.5)}42%{opacity:1;transform:scale(1.15)}45%{opacity:1;transform:scale(1)}94%{opacity:1;transform:scale(1)}98%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
@keyframes k-sa{0%{opacity:1;transform:translateY(0)}37%{opacity:1;transform:translateY(0)}40%{opacity:0;transform:translateY(-6px)}96%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
@keyframes k-sb{0%{opacity:0;transform:translateY(6px)}39%{opacity:0;transform:translateY(6px)}43%{opacity:1;transform:translateY(0)}93%{opacity:1;transform:translateY(0)}96%{opacity:0;transform:translateY(-6px)}100%{opacity:0;transform:translateY(6px)}}
@keyframes k-tint{0%{background-color:rgba(0,255,155,0)}38%{background-color:rgba(0,255,155,0)}44%{background-color:rgba(0,255,155,.16)}72%{background-color:rgba(0,255,155,0)}100%{background-color:rgba(0,255,155,0)}}

@media (max-width:560px){.team,.hide-s{display:none!important}.lrow{gap:12px;padding:0 10px}}