/* Haien Samtal – landningssida i samma formspråk som haien.se (ljust tema, Manrope/Geist/Instrument Serif). */
:root{
  --ink:#242321;--muted:#625e57;--paper:#faf8f5;--surface:#fffdf9;
  --accent:#f05324;--accent-ink:#a83b1d;--rust:#b14326;
  --field:#f9e4d5;--field-2:#f2eee7;--field-3:#ffede0;--line:#ddd5cb;--line-soft:#e7e1d8;
  --display:'Manrope','Manrope Fallback',sans-serif;--sans:'Geist','Geist Fallback',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;--mono:'Geist Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(.2,.75,.2,1);--ease-expo:cubic-bezier(.16,1,.3,1);
  --paper-shadow:0 2px 3px #30251b06,0 12px 28px #30251b08,0 32px 65px -26px #30251b26;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{font-family:var(--mono);font-size:.92em}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(2rem,4vw,3.6rem)}
h3{font-size:clamp(1.35rem,2vw,1.8rem)}
p{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:5px}
::selection{background:var(--field);color:var(--ink)}
[id]{scroll-margin-top:96px}
input,textarea{caret-color:var(--accent);accent-color:var(--accent)}
.wrap{width:min(1200px,100% - 96px);margin-inline:auto}
.section-space{padding-block:116px}
.eyebrow{display:block;margin-bottom:20px;font-size:10px;font-weight:650;line-height:1.6;letter-spacing:.12em;text-transform:uppercase;color:#716b63}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip-link{position:fixed;top:12px;left:12px;z-index:300;padding:12px 18px;background:var(--ink);color:#fff;transform:translateY(-150%)}
.skip-link:focus{transform:none}

/* Knappar och länkar */
.button-primary,.button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:50px;padding:13px 23px;border-radius:6px;font-size:14px;font-weight:600;line-height:1.4;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease-out),background .2s,box-shadow .25s,border-color .25s}
.button-primary{background:var(--accent);color:#251910;box-shadow:inset 0 0 0 1px #71280e0c,0 2px 2px #f0502410}
.button-primary:hover{background:#e8471d;box-shadow:0 5px 12px #d44b2424}
.button-primary .icon,.text-link .icon{transition:transform .25s var(--ease-expo)}
.button-primary:hover .icon,.text-link:hover .icon{transform:translateX(4px)}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:550;text-decoration:none;text-underline-offset:5px}
.text-link:hover{text-decoration:underline}
.quiet-link{display:inline-block;margin-top:20px;font-size:12px;text-decoration:none;text-underline-offset:4px}
.quiet-link:hover{text-decoration:underline}

/* Sidhuvud */
.site-header{position:sticky;top:0;z-index:45;background:#faf8f5eb;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid #2423210d}
.site-nav{display:flex;align-items:center;gap:28px;height:76px}
.brand{display:inline-flex;flex:none;align-items:center;gap:12px;text-decoration:none}
.brand img{width:117px;height:auto}
.brand-product{padding:3px 0 3px 12px;border-left:1px solid var(--line);font:600 14px/1 var(--display);letter-spacing:-.02em;color:#6f685f}
.desktop-nav{display:flex;gap:28px;margin-left:auto;font-size:13px;font-weight:500}
.desktop-nav a{position:relative;padding-block:12px;text-decoration:none}
.desktop-nav a::after{content:"";position:absolute;left:0;bottom:5px;width:100%;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:0;transition:transform .25s var(--ease-out)}
.desktop-nav a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-actions .button-primary{gap:16px;min-height:43px;padding:11px 17px;font-size:12px}
.nav-actions .icon{width:16px;height:16px}

/* Hero */
.home-hero{padding-top:48px;padding-bottom:30px}
.home-hero>.wrap{position:relative}
.hero-copy{position:relative;z-index:1;max-width:1000px;margin:auto;text-align:center}
.hero-label{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:23px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#716b63}
.hero-label-mark{display:grid;place-items:center;width:48px;height:29px;background:#fff;border:1px solid #eadbce;border-radius:50%;transform:rotate(-8deg)}
.hero-label-mark img{width:33px;height:auto}
.hero-copy h1{font-size:clamp(3rem,6.2vw,5.4rem);letter-spacing:-.052em;line-height:1.045}
.hero-copy h1>span{display:inline-block;color:var(--rust)}
.hero-support{max-width:630px;margin:24px auto 0}
.hero-support p{font-size:17px;line-height:1.7;text-wrap:pretty}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:28px}
.hero-footnote{display:block;margin-top:16px;font-size:11px;color:#777068}

.hero-artifacts{position:absolute;inset:0 0 auto;z-index:0;height:425px;pointer-events:none}
.hero-note{position:absolute;width:125px;height:170px;color:#59514a}
.artifact-left{top:190px;left:-17px;transform:rotate(-10deg)}
.artifact-right{top:196px;right:-24px;transform:rotate(9deg)}
.sketch-arrow{position:absolute;top:-49px;left:19px;width:88px;transform:rotate(16deg)}
.floating-sheet{position:absolute;background:#fffdf9;border:1.3px solid #58524b;border-radius:5px}
.sheet-back{top:16px;left:2px;width:78px;height:124px;border-radius:14px;background:#f2e8dc;transform:rotate(-12deg)}
.mini-phone{top:4px;left:18px;display:flex;flex-direction:column;align-items:center;gap:7px;width:80px;height:130px;padding:9px 10px 12px;border-radius:15px;box-shadow:0 8px 12px -6px #5f412f27}
.mini-phone::before{content:"";width:20px;height:3px;margin-bottom:8px;border-radius:3px;background:#d8cfc4}
.mini-phone>span:not(.mini-call){width:42px;height:2px;background:#c6beb4}
.mini-phone>span:nth-of-type(3){width:30px}
.mini-call{display:grid;place-items:center;width:32px;height:32px;margin-bottom:4px;border-radius:50%;background:#ffdcc4;border:1.3px solid #6f4e39;color:var(--accent-ink)}
.mini-call .icon{width:15px;height:15px}
.mini-pill{width:58px;height:17px;margin-top:auto;border-radius:5px;background:var(--accent);transform-origin:50% 100%}
.artifact-check{position:absolute;top:114px;left:84px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#ffdcc4;border:1.4px solid #6f4e39}
.artifact-check .icon{width:16px;height:16px}
.fin-medallion{display:grid;place-items:center;width:118px;height:118px;border-radius:50%;background:#f9e4d3;border:1.3px solid #baad9e;box-shadow:4px 6px #ebddcd}
.fin-medallion img{width:81px;height:auto;transform:rotate(-11deg)}
.small-note{position:absolute;right:-4px;bottom:24px;display:flex;flex-wrap:wrap;align-content:center;gap:6px;width:57px;height:63px;padding:10px;background:#fffdf9;border:1.3px solid #7b7065;border-radius:4px;transform:rotate(-20deg)}
.small-note .icon{width:18px;height:18px;stroke-width:1.8}
.small-note i{width:28px;height:2px;background:#c6beb4}
.small-note i:last-child{width:20px}
.sketch-rays{position:absolute;top:-28px;right:-17px;width:36px}

/* Hero-demo: flikar, ram och flödet */
.demo-block{position:relative;max-width:1200px;margin:40px auto 0}
.scenario-tabs{display:flex;justify-content:center;gap:6px;margin-bottom:16px}
.scenario-tabs button{position:relative;display:inline-flex;align-items:center;gap:9px;padding:12px 16px;font-size:12px;font-weight:600;color:#6f685f;transition:color .2s}
.scenario-tabs button:hover{color:var(--ink)}
.scenario-tabs .icon{width:16px;height:16px;color:#8c8174;transition:color .2s}
.scenario-tabs button[aria-selected=true]{color:var(--ink)}
.scenario-tabs button[aria-selected=true] .icon{color:var(--accent)}
.tab-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0}
[aria-selected=true]>.tab-progress{transform:scaleX(1)}
.demo-surround{padding:17px 20px 20px;border-radius:17px;background:#f3d7c2}
.demo-caption-top{display:flex;justify-content:space-between;gap:16px;padding:0 6px 14px;font-size:11px;color:#6d5847}
.demo-caption-top>span:first-child{font-weight:600;color:#4b3b2f}
.demo-player{overflow:hidden;border-radius:11px;background:#fffdf9;box-shadow:0 18px 42px -20px #6a361545}

.flow-canvas{position:relative;padding:56px 40px 60px;background:#f3f0ea;border-bottom:1px solid #e7e1d8}
.story-grid{position:absolute;inset:0;opacity:.7;background-image:radial-gradient(#c3b8ab 1px,#0000 1px);background-size:22px 22px;-webkit-mask-image:linear-gradient(#0000,#000 20% 70%,#0000);mask-image:linear-gradient(#0000,#000 20% 70%,#0000)}
.flow-grid{position:relative;display:grid;grid-template-columns:minmax(230px,290px) minmax(48px,1fr) auto minmax(48px,1fr) minmax(230px,280px);align-items:center}

.flow-call{position:relative;z-index:1;padding:20px;background:#fffdfb;border:1px solid #ded7cc;border-radius:10px;box-shadow:var(--paper-shadow);transform:rotate(-3deg);transition:transform .6s var(--ease-out),box-shadow .6s}
[data-step="0"] .flow-call{transform:translateY(-7px) rotate(-3deg);box-shadow:0 20px 38px -22px #7f4e3866,0 0 0 3px #efb8953b}
.story-message-head{display:flex;align-items:center;gap:9px;font-size:11px}
.story-message-head b{font-size:12px}
.story-message-head div>span{display:block;font-size:9.5px;color:#797169}
.story-message-head small{margin-left:auto;font-size:9.5px;color:#797169}
.person-avatar{display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:50%;background:#ede5d9;font:21px/1 var(--serif);color:#5d4b3c}
.person-avatar .icon{width:15px;height:15px}
[data-step="0"] .flow-call .person-avatar{background:#ffdcc4;color:var(--accent-ink)}
.call-status{position:relative;height:1.4em;margin:18px 0 2px;font:600 23px/1.4 var(--display);letter-spacing:-.035em;color:var(--ink)}
.call-status>span{position:absolute;inset:0;transition:opacity .35s,translate .5s var(--ease-out)}
.cs-miss{color:var(--rust)}
.demo-player:not([data-step="0"]) .cs-ring{opacity:0;translate:0 -10px}
.demo-player[data-step="0"] .cs-miss{opacity:0;translate:0 10px}
.call-context{margin-bottom:16px;font-size:13px;line-height:1.5}
.story-message-foot{display:flex;align-items:center;gap:7px;padding-top:12px;border-top:1px solid #eee7df;font-size:9.5px;color:#787067}
.story-message-foot .icon{width:13px;height:13px;color:#9a6b4c}
.story-message-foot code{margin-left:auto;padding:2px 6px;border-radius:4px;background:#f2eee7;font-size:10px;color:#5d4b3c}

.flow-wire{position:relative;height:1.6px;margin-inline:-1px;background:#c8bdae}
.flow-wire::before,.flow-wire::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#c8bdae;transition:background .4s}
.flow-wire::before{left:-3px}
.flow-wire::after{right:-3px}
.wire-fill{position:absolute;inset:0;background:#e78d60;transform:scaleX(0);transform-origin:0;transition:transform 1.1s var(--ease-out)}
.wire-packet{position:absolute;top:50%;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px #f0532420;opacity:0}
.demo-player:not([data-step="0"]) .wire-in .wire-fill,[data-step="2"] .wire-out .wire-fill{transform:scaleX(1)}
.demo-player:not([data-step="0"]) .wire-in::before,.demo-player:not([data-step="0"]) .wire-in::after,[data-step="2"] .wire-out::before,[data-step="2"] .wire-out::after{background:var(--accent)}

.flow-hub{position:relative;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;gap:18px;padding-inline:4px}
.flow-hub::before{content:"";position:absolute;top:18px;bottom:18px;left:50%;border-left:1.6px dashed #cbbfb1}
.chip-stack{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.flow-chip{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#fffdf9;border:1px solid #ddd3c7;border-radius:8px;box-shadow:0 5px 12px #69564408;font-size:11px;white-space:nowrap;transition:translate .5s var(--ease-out),border-color .4s,background .4s}
.flow-chip>.icon:first-child{width:14px;height:14px;color:#9a6b4c}
.flow-chip .ok,.flow-chip .no{width:13px;height:13px;stroke-width:2.6}
.flow-chip .ok{color:#6b8f5e;opacity:.2;transition:opacity .4s}
.flow-chip .no{display:none;color:var(--accent)}
.chip-a{rotate:-4deg;translate:-10px 0}
.chip-b{rotate:3deg;translate:12px 0}
.chip-c{rotate:-2deg;translate:-8px 0}
.chip-d{rotate:4deg;translate:10px 0}
.demo-player:not([data-step="0"]) .flow-chip .ok{opacity:1}
[data-step="1"] .chip-a{translate:-10px -6px}
[data-step="1"] .chip-b{translate:12px -6px;transition-delay:.12s}
[data-step="1"] .chip-c{translate:-8px -6px;transition-delay:.24s}
[data-step="1"] .chip-d{translate:10px -6px;transition-delay:.36s}
[data-step="1"] .chip-b .ok{transition-delay:.12s}
[data-step="1"] .chip-c .ok{transition-delay:.24s}
[data-step="1"] .chip-d .ok{transition-delay:.36s}
[data-scenario="2"] .chip-c{background:#fff3ea;border-color:#f3c9ad}
[data-scenario="2"] .chip-c .ok{display:none}
[data-scenario="2"] .chip-c .no{display:block;opacity:.25;transition:opacity .4s}
[data-scenario="2"]:not([data-step="0"]) .chip-c .no{opacity:1}
[data-scenario="2"] .chip-d{opacity:.45}
[data-scenario="2"] .chip-d .ok{opacity:.2}
.flow-node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;width:117px;height:98px;border-radius:19px;background:#fffdf9;box-shadow:var(--paper-shadow),0 0 0 1px #dacfc2}
.flow-node img{width:79px;height:auto}
.flow-node>span:last-child{font-size:10px;color:#716458}
.colleague-orbit{position:absolute;inset:-10px;border:1px solid #d6ab8d;border-radius:26px;opacity:0;transition:opacity .4s}
[data-step="1"] .colleague-orbit{opacity:1}

.flow-sms{position:relative;z-index:1;transform:rotate(3deg);transition:transform .6s var(--ease-out)}
[data-step="2"] .flow-sms{transform:translateY(-8px) rotate(0)}
.story-paper-back{position:absolute;inset:9px -7px -8px 8px;border-radius:9px;background:#ead8c6;border:1px solid #cebda9;transform:rotate(3deg)}
.story-paper{position:relative;padding:18px;border-radius:9px;background:#fffdfb;border:1px solid #d7cbbb;box-shadow:var(--paper-shadow)}
.story-paper-top{display:flex;align-items:center;gap:7px;font-size:8.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#756e64}
.story-paper-top .icon{width:13px;height:13px}
.story-paper-top span{margin-left:auto;letter-spacing:0}
.sms-slot{position:relative;margin-top:14px}
.sms-slot::before{content:"";position:absolute;inset:0;border:1px dashed #e2d8cc;border-radius:14px 14px 14px 4px;transition:opacity .3s}
[data-step="2"] .sms-slot::before,[data-scenario="2"] .sms-slot::before{opacity:0}
.sms-bubble{padding:12px 13px;border-radius:14px 14px 14px 4px;background:#f2eee7;font-size:12.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;opacity:0;translate:0 10px;scale:.97;transform-origin:0 100%;transition:opacity .45s,translate .6s var(--ease-expo),scale .6s var(--ease-expo)}
.sms-bubble u{text-decoration-color:var(--accent);text-underline-offset:2px}
[data-step="2"] .sms-bubble{opacity:1;translate:0;scale:1}
.sms-typing{position:absolute;left:0;top:0;display:flex;gap:4px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#f2eee7;opacity:0;transition:opacity .3s}
.sms-typing i{width:6px;height:6px;border-radius:50%;background:#b9ab9b}
[data-step="1"] .sms-typing{opacity:1}
.sms-hold{display:none;align-items:center;gap:7px;margin-top:10px;padding:9px 11px;border-radius:8px;background:#fff3ea;border:1px solid #f3c9ad;font-size:11px;line-height:1.4;color:var(--accent-ink);opacity:0;translate:0 6px;transition:opacity .4s,translate .5s var(--ease-out)}
.sms-hold .icon{width:14px;height:14px}
[data-scenario="2"] .sms-bubble{opacity:.5;translate:0;scale:1}
[data-scenario="2"] .sms-typing{display:none}
[data-scenario="2"] .sms-hold{display:flex}
[data-scenario="2"][data-step="2"] .sms-hold{opacity:1;translate:0}
.story-ready{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:9.5px;color:#936849;transition:color .4s}
.story-ready .icon{width:12px;height:12px;stroke-width:2.6}
[data-step="2"] .story-ready{color:#a3401e}

.story-bottom{background:#fffdf9}
.story-steps{display:grid;grid-template-columns:repeat(3,1fr)}
.story-steps>button{position:relative;display:flex;align-items:flex-start;gap:14px;padding:24px;text-align:left;overflow:hidden;transition:background .3s}
.story-steps>button+button{border-left:1px solid #ebe4dc}
.story-steps>button:hover{background:#fdf8f3}
.story-steps strong{display:block;font-size:15px;font-weight:600}
.story-steps button>span>span{display:block;margin-top:6px;font-size:12px;line-height:1.6;color:var(--muted)}
.step-number{padding-top:3px;font-size:10px;font-weight:600;color:#8c8174}
.story-steps button[aria-pressed=true]{background:#fcf4ed}
.story-steps button[aria-pressed=true] .step-number{color:#ae4423}
.step-progress{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0}
[aria-pressed=true]>.step-progress{transform:scaleX(1)}
.story-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;border-top:1px solid #ebe4dc;font-size:10.5px;color:#797169}
.story-controls button{display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);transition:background .2s}
.story-controls button:hover{background:var(--field)}
.story-controls .icon{width:13px;height:13px}
.play-toggle .i-play,[data-playing=false] .play-toggle .i-pause{display:none}
[data-playing=false] .play-toggle .i-play{display:block}
.i-play{fill:currentColor}

.connector-strip{margin-top:34px;padding:28px 0 45px;border-bottom:1px solid var(--line);text-align:center}
.connector-strip>p{margin-bottom:22px;font-size:11px;color:#787167}
.connector-strip>div{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 34px}
.connector-strip>div>span{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:550;color:#524e48}
.connector-strip>div .icon{width:19px;height:19px;color:var(--accent)}
.connector-strip>a{margin-top:22px;font-size:11px}
.connector-strip>a .icon{width:14px;height:14px}

/* Rubrikrader */
.story-heading,.section-heading{display:grid;grid-template-columns:1.25fr 1fr;align-items:end;gap:90px}
.section-heading{margin-bottom:48px}
.story-heading>p,.section-heading>p{max-width:380px;font-size:16px;line-height:1.75}
.rl,.rl>span{display:block}
.hand-underline{position:relative;z-index:0;display:inline-block}
.hand-underline svg{position:absolute;left:-4%;bottom:-11px;z-index:-1;width:108%;height:18px;fill:none;stroke:var(--accent);stroke-width:3px;stroke-linecap:round;overflow:visible}

/* En vanlig arbetsdag */
.day-card{margin-top:60px}
.day-canvas{position:relative;padding:24px 28px 14px;background:#f3f0ea;border:1px solid var(--line-soft);border-bottom:0;border-radius:20px 20px 0 0;overflow:hidden}
.day-head{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;font-size:12px;font-weight:600}
.day-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11px;font-weight:500;color:var(--muted)}
.day-legend i{display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;vertical-align:-1px}
.lg-ans{background:#fff;border:1.5px solid var(--ink)}
.lg-miss{background:var(--accent)}
.tl-scroll{position:relative;margin:6px -28px 0;padding:0 28px;overflow-x:auto;scrollbar-width:thin}
.tl-viz{position:relative;min-width:820px;height:270px;margin:0 34px}
.tl-track,.tl-fill{position:absolute;left:0;right:0;top:126px;height:2px;border-radius:2px}
.tl-track{background:#d9cfc3}
.tl-fill{background:var(--ink);transform-origin:0}
.tl-hour{position:absolute;top:242px;translate:-50% 0;font:500 10.5px/1 var(--mono);color:#857b70}
.tl-hour::before{content:"";position:absolute;left:50%;top:-120px;width:1px;height:10px;background:#cdc2b5}
.call{position:absolute;top:0;bottom:0;left:var(--x);width:0;--tx:-50%}
.call[data-end]{--tx:-84%}
.call .dot{position:absolute;left:0;top:127px;translate:-50% -50%;border-radius:50%}
.call.ans .dot{width:12px;height:12px;background:#fff;border:2px solid var(--ink)}
.call.miss .dot{width:14px;height:14px;background:var(--accent);box-shadow:0 0 0 5px #f0532429}
.call .lbl{position:absolute;left:0;top:56px;translate:var(--tx) 0;rotate:-2deg;padding:7px 11px;background:#fffdfb;border:1px solid #ded7cc;border-radius:8px;box-shadow:0 8px 16px -10px #5f412f40;white-space:nowrap;text-align:center}
.call .lbl b{display:block;font-size:12px;font-weight:600;line-height:1.3}
.call .lbl span{display:block;font:500 10px/1.3 var(--mono);color:#857b70}
.call .stem{position:absolute;left:0;top:100px;height:46px;border-left:1.4px dashed #c4b6a6;transform-origin:top}
.call .sms{position:absolute;left:0;top:148px;translate:var(--tx) 0;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#ffede0;border:1px solid #f3c9ad;font-size:11px;font-weight:600;line-height:1.2;color:var(--accent-ink);white-space:nowrap}
.call .sms .icon{width:11px;height:11px;stroke-width:3}
.call[data-row="b"] .lbl{top:4px;rotate:2deg}
.call[data-row="b"] .stem{top:48px;height:132px}
.call[data-row="b"] .sms{top:182px}
.day-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-soft)}
.day-stats>div{padding:22px 26px}
.day-stats>div+div{border-left:1px solid #ebe4dc}
.day-stats b{display:block;font:600 clamp(28px,3vw,38px)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.day-stats span{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.day-stats>div:last-child{background:#fcf4ed}
.day-stats>div:last-child b{color:var(--accent-ink)}
.day-card .story-bottom{border:1px solid var(--line-soft);border-top:0;border-radius:0 0 20px 20px;overflow:hidden}
.day-result{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink)}
.day-result .icon{width:15px;height:15px;color:var(--accent);stroke-width:2.6}
.replay-wrap{display:inline-flex;align-items:center;gap:10px}

/* Kom igång */
.how-section{background:#f5f1ea;border-block:1px solid var(--line)}
.how-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:start}
.how-intro{position:sticky;top:130px}
.how-intro>p{max-width:420px;margin-top:22px;font-size:16px;line-height:1.7}
.how-intro .button-primary{margin-top:28px}
.onboarding-list{list-style:none}
.onboarding-list li{display:grid;grid-template-columns:45px 1fr;gap:26px;padding-block:28px;border-bottom:1px solid var(--line)}
.onboarding-list li:first-child{padding-top:4px}
.onboarding-list li:last-child{border-bottom:0}
.onboarding-list li>span{display:grid;place-items:center;width:45px;height:45px;border-radius:50%;background:#fffdf9;border:1px solid #e0d7cb;font:26px/1 var(--serif);color:#75604e}
.onboarding-list h3{font-size:21px;letter-spacing:-.03em}
.onboarding-list p{max-width:440px;margin-top:8px;font-size:14px;line-height:1.65}
.step-visual{margin-top:16px;max-width:440px;background:#fffdf9;border:1px solid #e3dacf;border-radius:9px;box-shadow:0 6px 14px -10px #5f412f33;font-size:12px}
.step-pay{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px}
.step-pay span{font-weight:600}
.step-pay small{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.step-pay b{font:600 20px/1 var(--display);letter-spacing:-.03em}
.step-tpl{padding:13px 16px;font:12px/1.65 var(--mono);color:#4b4640}
.step-tpl mark{padding:1px 4px;border-radius:4px;background:#ffe3cf;color:var(--accent-ink)}
.step-codes{display:grid;padding:4px 16px}
.step-codes span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.step-codes span+span{border-top:1px solid #f0e8de}
.step-codes small{font-size:11px;color:var(--muted)}
.step-codes code{font-size:12px;color:var(--ink)}
.step-ok{display:flex;align-items:center;gap:12px;padding:12px 16px}
.step-ok>.icon{width:26px;height:26px;padding:5px;border-radius:50%;background:#e6efe0;color:#4f7a43;stroke-width:2.6}
.step-ok span{color:var(--muted)}
.step-ok b{display:block;font-size:13px;color:var(--ink)}

/* SMS-byggaren */
.sms-section{background:#f9e4d5;border-block:1px solid #ead7c7}
.sms-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.sms-copy>p{max-width:440px;margin-top:22px;font-size:16px;line-height:1.7}
.sms-copy>p code{padding:1px 5px;border-radius:4px;background:#fff3ea;color:var(--accent-ink)}
.builder{display:grid;gap:18px;max-width:500px;margin-top:30px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field label{display:block;margin-bottom:7px;font-size:12px;font-weight:600}
.field label span{font-weight:400;color:#7a6556}
.field input,.field textarea{width:100%;padding:12px 14px;background:#fffdf9;border:1px solid #e3c9b4;border-radius:8px;font:15px/1.5 var(--sans);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:116px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #f0532424}
.tokens{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#7a6556}
.tokens button{padding:5px 11px;background:#fffdf9;border:1px solid #e3c9b4;border-radius:999px;font:500 12px var(--mono);transition:border-color .2s,background .2s}
.tokens button:hover{background:#fff;border-color:var(--accent)}
.tokens output{margin-left:auto}
.sms-window{overflow:hidden;background:#fffdf9;border:1px solid #ccb5a0;border-radius:14px;box-shadow:0 4px 8px #5e352006,0 30px 65px -28px #67432f35;transform:rotate(1deg);transition:transform .6s var(--ease-out)}
.sms-window:hover{transform:rotate(0) translateY(-4px)}
.window-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee4d8;font-size:11px;color:#7d7267}
.window-bar .icon{width:14px;height:14px}
.window-dots{display:flex;gap:5px}
.window-dots i{width:6px;height:6px;border-radius:50%;background:#cdbfb1}
.thread{display:flex;flex-direction:column;min-height:340px;padding:24px 26px 26px}
.thread-from{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid #f0e8de;font-size:13px}
.thread-from span:not(.person-avatar){display:block;font:500 11px var(--mono);color:#7d7267}
.thread-from .person-avatar{width:38px;height:38px;background:#f9e4d5;color:var(--accent-ink);font-size:23px}
.thread-meta{margin:22px 0 10px;text-align:center;font-size:11px;color:#8a7f73}
.bubble{max-width:90%;padding:14px 16px;border-radius:18px 18px 18px 5px;background:#f2eee7;font-size:15px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.bubble u{text-decoration-color:var(--accent);text-underline-offset:3px}
.thread-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:11px;color:#7d7267}
.thread-foot .icon{width:14px;height:14px;color:#4f7a43;stroke-width:2.6}

/* Räknaren */
.calc-gallery{display:grid;grid-template-columns:1fr 1.1fr;gap:24px}
.role-card{overflow:hidden;background:#f7f2eb;border:1px solid #e7dfd5;border-radius:15px}
.role-card-sales{background:#f9e8db}
.calc-inputs,.calc-result{padding:36px 37px}
.range-field+.range-field{margin-top:28px}
.range-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:600}
.range-head output{font:600 21px/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
input[type=range]{--p:50%;width:100%;height:24px;margin-top:10px;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--p),#e4dacd var(--p))}
input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-9px;border-radius:50%;background:#fffdf9;border:1.5px solid var(--ink);box-shadow:0 3px 6px #30251b26;-webkit-appearance:none;transition:scale .2s}
input[type=range]:active::-webkit-slider-thumb{scale:1.12}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#e4dacd}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fffdf9;border:1.5px solid var(--ink)}
.range-scale{display:flex;justify-content:space-between;margin-top:2px;font-size:11px;color:#8a7f73}
.calc-label{font-size:14px;font-weight:600;color:var(--ink)}
.calc-total{margin-top:6px;font:600 clamp(3rem,6vw,5rem)/1 var(--display);letter-spacing:-.055em;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-sub{margin-top:10px;font-size:13px}
.compare{display:grid;gap:14px;margin-top:28px}
.compare-row{display:grid;grid-template-columns:1fr auto;gap:7px 14px;font-size:12px;font-weight:600;color:#6d5847}
.compare-row b{color:var(--ink)}
.compare-row .bar{grid-column:1/-1;height:12px;overflow:hidden;border-radius:3px;background:#f2d9c5}
.compare-row .bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .6s var(--ease-out)}
.compare-row.cost .bar i{background:#bfae9c}
.calc-be{margin-top:24px;padding-top:20px;border-top:1px solid #ecd2be;font-size:14px;line-height:1.6;color:var(--ink)}
.calc-be b{color:var(--accent-ink)}
.calc-note{margin-top:12px;font-size:11px;line-height:1.55;color:#7d6c5f}

/* Omdöme: illustrerade kort */
.work-section{background:#fff}
.role-gallery{display:grid;grid-template-columns:1.13fr 1fr;gap:24px}
.art-card{display:flex;flex-direction:column}
.role-card-copy{padding:36px 37px 0}
.role-card-copy .eyebrow{margin-bottom:14px}
.role-card-copy h3{font-size:29px}
.role-card-copy p{max-width:360px;margin-top:14px;font-size:14px;line-height:1.7}
.role-card-art{margin-top:auto;padding:10px 30px 0}
.role-card-tools{padding:4px 37px 24px;font-size:10px;color:#7a7065}
.role-card-operations{grid-column:1/-1;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;background:#f3f1ed}
.role-card-operations .role-card-copy{padding:40px 40px 10px}
.role-card-operations .role-card-art{grid-area:1/2/3;width:100%;padding:24px 55px}
.role-card-operations .role-card-tools{padding:0 40px 34px}
.facts{display:grid;gap:10px;margin-top:22px;list-style:none;font-size:13px;color:#4f4a44}
.facts li{display:flex;gap:10px;line-height:1.5}
.facts .icon{width:16px;height:16px;margin-top:1px;color:var(--accent);stroke-width:2.6}

.task-artwork{--task-orange:#f05324;--task-ink:#383630;--task-line:#cac4ba;--task-peach:#ffeadb;width:100%;height:auto;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.task-artwork__ground{fill:#e8e0d5;opacity:.48}
.task-artwork__paper{fill:#fffefa;stroke:var(--task-ink);stroke-width:1.35px}
.task-artwork__paper-back{fill:#f0ece4;stroke:var(--task-ink);stroke-width:1.35px}
.task-artwork__ink{fill:none;stroke:var(--task-ink);stroke-width:1.55px}
.task-artwork__rule{fill:none;stroke:var(--task-line);stroke-width:1.5px}
.task-artwork__orange{fill:var(--task-orange)}
.task-artwork__peach{fill:var(--task-peach);stroke:#e9b996;stroke-width:1.2px}
.task-artwork__soft{fill:#f0ece4;stroke:var(--task-line);stroke-width:1.2px}
.task-artwork__check-bg{fill:#e6efe0;stroke:var(--task-ink);stroke-width:1.35px}
.task-artwork__orange-line{fill:none;stroke:var(--task-orange);stroke-width:2.4px}
.task-artwork__white-line{fill:none;stroke:#fffefa;stroke-width:2.4px}
.task-artwork__trail{fill:none;stroke:#baafa2;stroke-width:1.4px;stroke-dasharray:3 6}
.task-artwork__keys circle{fill:#faf6f0;stroke:var(--task-line);stroke-width:1.3px}
.task-artwork__text{fill:#6f665c;stroke:none;font:500 12px var(--mono)}
.task-artwork__label{fill:#857b70;stroke:none;font:500 11px var(--sans)}
.task-artwork__big{fill:var(--task-ink);stroke:none;font:600 17px var(--display);letter-spacing:-.02em}
.task-artwork__mono{fill:var(--task-ink);stroke:none;font:500 15px var(--mono)}
.task-artwork__serif{fill:var(--task-ink);stroke:none;font:italic 22px var(--serif)}
.task-artwork__center{text-anchor:middle}
.task-artwork__draw{stroke-dasharray:1;stroke-dashoffset:0}
.task-artwork__seal,.task-artwork__document-arrive{transform-box:fill-box;transform-origin:50%}
.task-artwork__step-1{animation-delay:.16s!important}
.task-artwork__step-2{animation-delay:.32s!important}
.task-artwork__step-3{animation-delay:.48s!important}
.task-artwork__step-4{animation-delay:.64s!important}
.task-artwork__step-5{animation-delay:.8s!important}

/* Pris */
.case-layout{display:grid;grid-template-columns:.95fr 1fr;gap:90px;align-items:center}
.case-mark{position:relative;min-height:315px;border-radius:15px;background:#f2eee7;box-shadow:inset 0 0 0 1px #dfd8cd}
.case-mark::after{content:"";position:absolute;inset:18px;border:1px solid #ded6ca;border-radius:8px;pointer-events:none}
.price-mark{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;padding:64px 48px 74px}
.price-phase{position:relative;z-index:1;text-align:center}
.price-phase .eyebrow{margin-bottom:12px}
.price-phase b{display:block;font:600 clamp(2.4rem,3.9vw,3.5rem)/1 var(--display);letter-spacing:-.055em;white-space:nowrap}
.price-phase b small{font-size:.42em;letter-spacing:-.02em;color:var(--muted)}
.price-phase>span:last-child{display:block;margin-top:12px;font-size:12px;color:var(--muted)}
.price-phase:first-child b{color:var(--rust)}
.price-arrow{align-self:center;width:64px;color:#8e7f70;transition:transform .6s var(--ease-out)}
.case-mark:hover .price-arrow{transform:translateX(5px)}
.case-foot{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:11px;color:#7d7267}
.price-copy>p{max-width:440px;margin-top:22px;font-size:16px;line-height:1.7}
.included{display:grid;gap:11px;margin:26px 0 30px;list-style:none;font-size:14px}
.included li{display:flex;gap:11px;line-height:1.5}
.included .icon{width:17px;height:17px;margin-top:2px;color:var(--accent);stroke-width:2.6}

/* Frågor */
.faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.faq-layout>div>p{max-width:360px;margin-top:22px;font-size:16px;line-height:1.7}
.faq-layout>div>p a{color:var(--ink);text-underline-offset:4px}
.faq-list details{border-bottom:1px solid var(--line);transition:background .3s}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:15px;font-weight:600;list-style:none;cursor:pointer;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:#ad4424}
.faq-list summary .icon{width:20px;height:20px;stroke-width:1.6;transition:transform .3s var(--ease-out)}
.faq-list details[open]{margin-inline:-20px;padding-inline:20px;border-radius:8px;background:#f5f0e8}
.faq-list details[open] summary .icon{transform:rotate(45deg)}
.faq-list details>div{padding:0 40px 24px 0}
.faq-list details p{font-size:15px;line-height:1.7}
.faq-list details a{color:var(--ink)}

/* Avslutning */
.closing-cta{position:relative;overflow:hidden;padding:75px 0 85px;background:#f4e6d9;border-top:1px solid #e9d5c3}
.closing-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.closing-brand-orbit{position:relative;display:grid;place-items:center;width:185px;height:107px;margin-bottom:28px}
.closing-brand-orbit>span{position:absolute;width:142px;height:94px;border:1px solid #d0af93;border-radius:50%;rotate:-20deg}
.closing-brand-orbit>span:nth-child(2){width:176px;height:75px;border-color:#dabda4;rotate:21deg}
.closing-fin{position:relative;width:112px;height:auto}
.closing-inner>.eyebrow{margin-bottom:21px;font-size:9px}
.closing-inner h2{max-width:760px;font-size:clamp(2.5rem,5.1vw,4.35rem)}
.closing-inner p{max-width:445px;margin:24px 0 28px;font-size:16px}

/* Sidfot */
.site-footer{padding-top:64px;overflow:hidden}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:48px}
.footer-top p{margin:22px 0 18px;font-size:15px;line-height:1.6}
.footer-top>div>a:not(.brand){display:block;width:fit-content;margin-bottom:12px;font-size:12px;text-decoration:none;text-underline-offset:4px}
.footer-top>div>a:hover{text-decoration:underline}
.footer-top h2{margin:6px 0 22px;font:600 13px/1.5 var(--sans);letter-spacing:0}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;color:#6f685f}
.footer-wordmark{margin-top:42px;padding:20px 0 48px;line-height:0}
.footer-wordmark img{width:100%;height:auto}

/* Mobil köpknapp */
.mobile-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;background:#fffdf9f2;border:1px solid #e5dbcf;border-radius:12px;box-shadow:0 12px 40px #30251b26;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;visibility:hidden;translate:0 calc(100% + 24px);transition:translate .45s var(--ease-expo),visibility 0s .45s}
.mobile-bar b{font:600 16px var(--display);letter-spacing:-.02em}
.mobile-bar small{display:block;font-size:10.5px;color:var(--muted)}
.mobile-bar .button-primary{min-height:44px;padding:10px 15px;gap:12px;font-size:13px}
.mobile-bar.show{visibility:visible;translate:0;transition:translate .45s var(--ease-expo)}

/* Animationer – bara när besökaren inte bett om mindre rörelse */
@keyframes colleague-title{0%{opacity:.65;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes colleague-workspace{0%{opacity:.7;transform:perspective(1200px) rotateX(5deg) translateY(30px)}to{opacity:1;transform:none}}
@keyframes story-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes colleague-breathe{0%,to{scale:1}50%{scale:1.06}}
@keyframes paper-arrive{0%,to{translate:0;rotate:none}40%,65%{translate:2px -8px;rotate:3deg}}
@keyframes pill-arrive{0%,20%{scale:.2 1;opacity:0}38%,82%{scale:1;opacity:1}96%,to{scale:1;opacity:0}}
@keyframes fin-lift{0%,to{translate:0;rotate:-11deg}45%,65%{translate:2px -4px;rotate:-7deg}}
@keyframes ring-wiggle{0%,60%,to{rotate:0}10%{rotate:-14deg}20%{rotate:12deg}30%{rotate:-8deg}40%{rotate:5deg}}
@keyframes dot-blink{0%,20%{opacity:.2}50%{opacity:1}80%,to{opacity:.2}}
@keyframes typing{0%,60%,to{translate:0;opacity:.45}30%{translate:0 -3px;opacity:1}}
@keyframes packet-x{0%{left:0;opacity:0}12%,85%{opacity:1}to{left:100%;opacity:0}}
@keyframes packet-y{0%{top:0;opacity:0}12%,85%{opacity:1}to{top:100%;opacity:0}}
@keyframes tl-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tl-pop{0%{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes tl-rise{0%{opacity:0;translate:var(--tx) 14px}to{opacity:1;translate:var(--tx) 0}}
@keyframes tl-stem{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
@keyframes task-artwork-draw{0%,8%{stroke-dashoffset:1px}30%,86%{stroke-dashoffset:0}to{stroke-dashoffset:0}}
@keyframes task-artwork-seal{0%,18%{opacity:0;transform:scale(.86)}32%,88%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}
@keyframes task-artwork-document{0%,5%{opacity:0;transform:translate(15px,-19px)}26%,90%{opacity:1;transform:none}to{opacity:0;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .hero-copy h1{animation:colleague-title .75s var(--ease-expo) both}
  .hero-copy h1>span{animation:colleague-title .9s var(--ease-expo) 90ms both}
  .home-hero .demo-surround{transform-origin:top;animation:colleague-workspace 1.1s var(--ease-expo) both}
  .mini-phone{animation:paper-arrive 7s var(--ease-out) infinite}
  .mini-pill{animation:pill-arrive 7s var(--ease-out) infinite}
  .mini-call{animation:ring-wiggle 7s ease-in-out infinite}
  .fin-medallion img{animation:fin-lift 7s ease-in-out infinite}
  .closing-brand-orbit>span:first-child{animation:colleague-breathe 5s ease-in-out infinite}

  [data-playing=true] [aria-selected=true]>.tab-progress{animation:story-progress var(--scene-ms,7.8s) linear var(--scene-delay,0s) both}
  [data-playing=true] .story-steps [aria-pressed=true]>.step-progress{animation:story-progress var(--step-ms,2.6s) linear both}
  [data-playing=true] [data-step="0"] .flow-call .person-avatar{animation:ring-wiggle 1.3s ease-in-out infinite}
  [data-playing=true] [data-step="0"] .ring-dots i{animation:dot-blink 1.2s infinite}
  [data-playing=true] [data-step="0"] .ring-dots i:nth-child(2){animation-delay:.2s}
  [data-playing=true] [data-step="0"] .ring-dots i:nth-child(3){animation-delay:.4s}
  [data-playing=true] [data-step="1"] .colleague-orbit{animation:colleague-breathe 2.4s ease-in-out infinite}
  [data-playing=true] [data-step="1"] .sms-typing i{animation:typing 1s infinite}
  [data-playing=true] [data-step="1"] .sms-typing i:nth-child(2){animation-delay:.15s}
  [data-playing=true] [data-step="1"] .sms-typing i:nth-child(3){animation-delay:.3s}
  [data-playing=true] [data-step="1"] .wire-in .wire-packet,[data-playing=true] [data-step="2"] .wire-out .wire-packet{animation:packet-x 1.3s var(--ease-out) .05s both}

  .js .tl:not(.play) .call>*{opacity:0}
  .js .tl:not(.play) .tl-fill{transform:scaleX(0)}
  .tl.play .tl-fill{animation:tl-fill 6s linear both}
  .tl.play .call .dot{animation:tl-pop .5s var(--ease-expo) var(--d) both}
  .tl.play .call .lbl{animation:tl-rise .65s var(--ease-expo) var(--d) both}
  .tl.play .call .stem{animation:tl-stem .45s var(--ease-out) calc(var(--d) + .1s) both}
  .tl.play .call .sms{animation:tl-pop .5s var(--ease-expo) calc(var(--d) + .55s) both}

  .task-artwork__draw{animation:task-artwork-draw 8s var(--ease-expo) infinite both}
  .task-artwork__seal{animation:task-artwork-seal 8s var(--ease-expo) infinite both}
  .task-artwork__document-arrive{animation:task-artwork-document 8s var(--ease-expo) infinite both}
  .motion-frame[data-visible=false] *{animation-play-state:paused!important}

  /* Visa innehåll när det scrollas in */
  .js [data-reveal]{--reveal-ease:cubic-bezier(.16,1,.3,1);transition:opacity .9s var(--reveal-ease) var(--reveal-delay,0s),translate 1.1s var(--reveal-ease) var(--reveal-delay,0s),scale 1.2s var(--reveal-ease) var(--reveal-delay,0s),clip-path 1.3s var(--reveal-ease) var(--reveal-delay,0s)}
  .js [data-reveal]:not([data-revealed]){opacity:0;translate:0 30px}
  .js [data-reveal=fade]:not([data-revealed]){translate:none}
  .js [data-reveal=scale]:not([data-revealed]){translate:0 44px;scale:.965}
  .js [data-reveal=wipe]{clip-path:inset(0 round 15px)}
  .js [data-reveal=wipe]:not([data-revealed]){opacity:1;clip-path:inset(0 0 100% round 15px);translate:none}
  .js [data-reveal=wipe]>*{transition:opacity .9s var(--reveal-ease) .35s,translate 1.1s var(--reveal-ease) .35s}
  .js [data-reveal=wipe]:not([data-revealed])>*{opacity:0;translate:0 26px}
  .js [data-reveal=lines]:not([data-revealed]){opacity:1;translate:none}
  .js [data-reveal=lines] .rl{margin:-.1em -.08em calc(-1 * max(.3em,16px));padding:.1em .08em max(.3em,16px);overflow:hidden}
  .js [data-reveal=lines] .rl>span{transition:translate 1.15s var(--reveal-ease) var(--reveal-delay,0s)}
  .js [data-reveal=lines] .rl:nth-child(2)>span{transition-delay:calc(var(--reveal-delay,0s) + .11s)}
  .js [data-reveal=lines]:not([data-revealed]) .rl>span{translate:0 calc(100% + .5em)}
  .js [data-reveal=lines] .hand-underline path{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.65,0,.35,1) .75s}
  .js [data-reveal=lines] .hand-underline path+path{transition-duration:.6s;transition-delay:1.4s}
  .js [data-reveal=lines]:not([data-revealed]) .hand-underline path{stroke-dashoffset:1px}
  .js .onboarding-list li[data-reveal]>span{transition:scale .8s cubic-bezier(.34,1.5,.64,1) calc(var(--reveal-delay,0s) + .2s),opacity .4s linear calc(var(--reveal-delay,0s) + .2s)}
  .js .onboarding-list li[data-reveal]:not([data-revealed])>span{opacity:0;scale:.4}
  [data-reveal-delay="1"]{--reveal-delay:90ms}
  [data-reveal-delay="2"]{--reveal-delay:.18s}
  [data-reveal-delay="3"]{--reveal-delay:.27s}
  [data-reveal-delay="4"]{--reveal-delay:.36s}
  html.js:not(.reveal-ready) [data-reveal],html.js:not(.reveal-ready) [data-reveal]>*,html.js:not(.reveal-ready) [data-reveal] .rl>span{animation:reveal-failsafe 1ms 4s forwards}

  /* Scrollstyrda rörelser, som på haien.se */
  @supports (animation-timeline:view()){
    .site-header{animation:header-settle linear both;animation-timeline:scroll(root);animation-range:0 160px}
    .site-header::after{content:"";position:absolute;inset:auto 0 -1px;height:2px;background:var(--accent);transform-origin:0;pointer-events:none;animation:read-progress linear both;animation-timeline:scroll(root)}
    .artifact-left{animation:drift-left linear both;animation-timeline:scroll(root);animation-range:0 1000px}
    .artifact-right{animation:drift-right linear both;animation-timeline:scroll(root);animation-range:0 1000px}
    .hero-copy h1{animation:colleague-title .75s var(--ease-expo) both,hero-recede linear both;animation-timeline:auto,scroll(root);animation-range:normal,120px 440px}
    .home-hero .hero-label{animation:hero-recede linear both;animation-timeline:scroll(root);animation-range:40px 300px}
    .demo-scroll-stage{transform-origin:50% 0;animation:stage-approach linear both;animation-timeline:scroll(root);animation-range:0 420px}
    .role-card-art{animation:art-parallax linear both;animation-timeline:view();animation-range:entry exit}
    .sms-window{animation:window-arrive linear both;animation-timeline:view();animation-range:entry cover 48%}
    .closing-brand-orbit{animation:fin-surface linear both;animation-timeline:view();animation-range:entry cover 42%}
    .footer-wordmark img{animation:wordmark-rise linear both;animation-timeline:view();animation-range:entry -10% entry 92%}
  }
}
@keyframes reveal-failsafe{to{opacity:1;clip-path:none;translate:none;scale:none}}
@keyframes header-settle{0%{border-bottom-color:#0000}}
@keyframes read-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes drift-left{to{translate:-34px -210px;rotate:-16deg}}
@keyframes drift-right{to{translate:40px -130px;rotate:14deg}}
@keyframes hero-recede{to{opacity:0;translate:0 54px;scale:.97}}
@keyframes stage-approach{0%{scale:.955}to{scale:1}}
@keyframes art-parallax{0%{translate:0 22px}to{translate:0 -14px}}
@keyframes window-arrive{0%{translate:0 90px;rotate:-4deg;scale:.94}to{translate:0;rotate:none;scale:1}}
@keyframes fin-surface{0%{opacity:0;transform:translateY(46px) rotate(-26deg) scale(.6)}to{opacity:1;transform:none}}
@keyframes wordmark-rise{0%{translate:0 62%}to{translate:0}}

/* Responsivt */
@media (max-width:1100px){
  .hero-artifacts{display:none}
  .wrap{width:min(1200px,100% - 64px)}
  .desktop-nav{gap:17px;font-size:12px}
  .flow-canvas{padding-inline:28px}
  .flow-grid{grid-template-columns:minmax(210px,250px) minmax(36px,1fr) auto minmax(36px,1fr) minmax(210px,240px)}
  .story-heading,.section-heading{gap:50px}
  .role-card-copy{padding-inline:28px}
  .role-card-tools{padding-inline:28px}
}
@media (max-width:900px){
  .section-space{padding-block:80px}
  .desktop-nav{display:none}
  .nav-actions{margin-left:auto}
  .site-nav{height:70px}
  .story-heading,.section-heading{gap:30px}
  .story-heading>p,.section-heading>p{font-size:15px}
  .how-layout,.sms-layout,.case-layout,.faq-layout{grid-template-columns:1fr;gap:44px}
  .how-intro{position:static}
  .price-copy{order:-1}
  .calc-gallery,.role-gallery{grid-template-columns:1fr}
  .role-card-operations{display:flex}
  .role-card-operations .role-card-art{padding:16px 24px 0}
  .role-card-operations .role-card-copy{padding:36px 28px 0}
  .role-card-operations .role-card-tools{padding:4px 28px 24px}
  .sms-window{max-width:560px}
  .footer-top{grid-template-columns:1fr 1fr}
  .footer-top>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .flow-canvas{padding:36px 18px 40px}
  .flow-grid{grid-template-columns:1fr;justify-items:center}
  .flow-call,.flow-sms{width:min(320px,100%)}
  .flow-wire{width:1.6px;height:44px;margin:0}
  .flow-wire::before{left:50%;top:-3px;margin:0 0 0 -3.5px}
  .flow-wire::after{left:50%;right:auto;top:auto;bottom:-3px;margin:0 0 0 -3.5px}
  .wire-fill{transform:scaleY(0);transform-origin:top}
  .demo-player:not([data-step="0"]) .wire-in .wire-fill,[data-step="2"] .wire-out .wire-fill{transform:scaleY(1)}
  .wire-packet{left:50%;top:0}
  .flow-hub{gap:14px;padding-block:6px}
  .story-steps{grid-template-columns:1fr}
  .story-steps>button{padding:16px 20px}
  .story-steps>button+button{border-left:0;border-top:1px solid #eee5db}
  .story-steps button>span>span{font-size:11.5px}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  [data-playing=true] [data-step="1"] .wire-in .wire-packet,[data-playing=true] [data-step="2"] .wire-out .wire-packet{animation-name:packet-y}
}
@media (max-width:640px){
  .wrap{width:calc(100% - 32px)}
  .section-space{padding-block:64px}
  .site-nav{gap:12px;height:64px}
  .brand img{width:96px}
  .brand{gap:9px}
  .brand-product{padding-left:9px;font-size:12px}
  .nav-actions .button-primary{gap:10px;min-height:38px;padding:9px 13px;font-size:11.5px}
  .home-hero{padding-top:34px;padding-bottom:0}
  .hero-label{gap:8px;margin-bottom:22px;font-size:8.5px;letter-spacing:.08em}
  .hero-label-mark{width:38px;height:24px}
  .hero-label-mark img{width:27px}
  .hero-copy h1{font-size:clamp(2.6rem,12vw,3.6rem);letter-spacing:-.05em;line-height:1.07}
  .hero-support{max-width:360px;margin-top:20px}
  .hero-support p{font-size:15px;line-height:1.7}
  .hero-actions{flex-direction:column;gap:14px;margin-top:24px}
  .hero-actions .button-primary{width:100%;max-width:340px}
  .hero-footnote{font-size:10px}
  .demo-block{margin-top:34px}
  .scenario-tabs{gap:0;margin-bottom:10px}
  .scenario-tabs button{flex:1;flex-direction:column;gap:6px;padding:10px 4px;font-size:11px}
  .demo-surround{padding:12px 8px 8px;border-radius:12px}
  .demo-caption-top{padding:0 4px 10px;font-size:10px}
  .story-controls{padding:10px 14px;font-size:10px}
  .connector-strip{margin-top:20px;padding:24px 0 32px}
  .connector-strip>div{gap:12px 20px}
  .connector-strip>div>span{gap:7px;font-size:12.5px}
  .eyebrow{margin-bottom:16px;font-size:9px}
  .story-heading,.section-heading{grid-template-columns:1fr;gap:20px}
  .section-heading{margin-bottom:30px}
  .story-heading>p,.section-heading>p{font-size:14px}
  .hand-underline svg{height:13px;bottom:-10px}
  .day-card{margin-top:32px}
  .day-canvas{padding:18px 16px 10px;border-radius:14px 14px 0 0}
  .tl-scroll{margin-inline:-16px;padding-inline:16px}
  .day-stats>div{padding:16px 14px}
  .day-stats span{font-size:11px}
  .day-card .story-bottom{border-radius:0 0 14px 14px}
  .story-controls{flex-wrap:wrap}
  .onboarding-list li{grid-template-columns:38px 1fr;gap:16px;padding-block:22px}
  .onboarding-list li>span{width:38px;height:38px;font-size:22px}
  .onboarding-list h3{font-size:19px}
  .step-codes code{font-size:11px}
  .field-row{grid-template-columns:1fr}
  .thread{min-height:0;padding:20px}
  .bubble{font-size:14px}
  .calc-inputs,.calc-result{padding:28px 22px}
  .role-card-copy,.role-card-operations .role-card-copy{padding:28px 22px 0}
  .role-card-copy h3{font-size:26px}
  .role-card-art,.role-card-operations .role-card-art{padding:8px 8px 0}
  .role-card-tools,.role-card-operations .role-card-tools{padding:4px 22px 22px}
  .price-mark{grid-template-columns:1fr;gap:0;padding:48px 24px 70px}
  .price-arrow{display:none}
  .price-phase+.price-phase{margin:26px auto 0;padding-top:26px;border-top:1px solid #ded6ca;width:min(240px,100%)}
  .faq-list summary{padding:20px 0;font-size:14px}
  .faq-list details[open]{margin-inline:-14px;padding-inline:14px}
  .faq-list details>div{padding-right:0}
  .closing-cta{padding:55px 0 60px}
  .closing-inner h2{font-size:38px}
  .closing-inner p{margin-block:20px 25px;font-size:14px}
  .closing-brand-orbit{margin-bottom:10px;scale:.85}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px}
  .footer-wordmark{margin-top:30px;padding:0 0 96px}
  .mobile-bar{display:flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .wire-packet,.sms-typing{display:none}
}