/* Saga Compliance – all stil utom färgtemat (se css/tema-*.css) */
:root:root{
  --f-display:"Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --f-body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mark:"Jost", "Futura", "Avenir Next", sans-serif; /* only the COMPLIANCE line of the wordmark */
  --f-app:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; font-weight:500; text-wrap:balance}
p{margin:0; text-wrap:pretty}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:1180px; margin:0 auto; padding-inline:24px}
.eyebrow{
  font-family:var(--f-body); font-size:.74rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
}
.display{
  font-family:var(--f-display); font-weight:500; letter-spacing:-.025em; line-height:1.02;
}
.h2{font-size:clamp(2.2rem, 3.6vw, 3.2rem)}
.lede{font-size:1.15rem; color:var(--ink-2); font-weight:400; max-width:56ch}

/* ---------- wordmark (recreates the new logo in live type) ---------- */
.wordmark{display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--ink); line-height:1}
.wordmark .w-saga{
  font-family:var(--f-display); font-weight:600; font-size:35px; letter-spacing:.2em;
  margin-right:-.2em; /* optically centre tracked caps */
}
.wordmark .w-sub{
  font-family:var(--f-mark); font-weight:400; font-size:9.4px; letter-spacing:.65em;
  margin-top:0; margin-right:-.65em;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em; height:46px; padding:0 24px;
  border-radius:999px; font:500 .95rem/1 var(--f-body); letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-dark{background:var(--btn); color:var(--btn-ink)}
.btn-dark:hover{transform:translateY(-1px)}
.btn-line{border-color:var(--line); color:var(--ink); background:transparent}
.btn-line:hover{border-color:var(--ink-3)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:var(--glass); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
html{--nav-h:80px}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); gap:24px}
.nav ul{display:flex; gap:34px; list-style:none; margin:0; padding:0; font-size:.93rem}
.nav ul a{text-decoration:none; color:var(--ink-2)}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink)}
.nav .right{display:flex; align-items:center; gap:22px; font-size:.93rem}
.nav .right a.login{text-decoration:none; color:var(--ink-2)}
.nav .btn{height:40px; padding:0 20px; font-size:.88rem}
.nav .wordmark .w-saga{font-size:40px}
.nav .wordmark .w-sub{font-size:10.74px}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:99px; padding:2px}
.lang button{appearance:none; border:0; background:none; cursor:pointer; font:500 .72rem/1 var(--f-body); letter-spacing:.08em; color:var(--ink-3); padding:6px 9px; border-radius:99px}
.lang button[aria-pressed="true"]{background:var(--paper-2); color:var(--ink)}
@media (max-width:1080px){ .nav ul{gap:24px} .nav .right{gap:16px} }
@media (max-width:980px){ .nav ul{gap:20px} }
@media (max-width:860px){ .nav ul{display:none} }
@media (max-width:460px){ html{--nav-h:72px} .nav .right a.login{font-size:14px; white-space:nowrap} .nav .wrap, .nav .right{gap:8px} .nav .btn{padding:0 12px; font-size:14px} .nav .lang button{padding:0 7px} .nav .wordmark .w-saga{font-size:28px} .nav .wordmark .w-sub{font-size:7.6px} }
/* Narrow phones keep Log in visible: show only the other language and tighten. */
@media (max-width:360px){ .nav .wrap{padding-left:14px; padding-right:14px} .nav .wrap, .nav .right{gap:6px} .nav .lang button[aria-pressed="true"]{display:none} .nav .btn{padding:0 10px; font-size:13px} .nav .wordmark .w-saga{font-size:24px} .nav .wordmark .w-sub{font-size:6.5px} }
@media (max-width:360px){ .nav .wordmark .w-saga{font-size:30px} .nav .wordmark .w-sub{font-size:8.06px} .nav .wrap, .nav .right{gap:10px} .nav .btn{padding:0 13px} .lang button{padding:6px 7px} }

/* ---------- hero ---------- */
.hero{
  text-align:center; padding-block:40px 32px;
  /* the whole opener, marquee included, fits the first screen below the sticky nav */
  min-height:calc(100svh - var(--nav-h) - 1px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column;
}
.hero-main{flex:1; display:flex; flex-direction:column; justify-content:center}
.hero .eyebrow{display:block; margin-bottom:28px}
.hero h1{font-size:clamp(2.5rem, 6.2vw, 5.6rem); line-height:.98; letter-spacing:-.03em}
.hero h1 em{font-style:italic; font-weight:500}
.hero .lede{margin:30px auto 0; font-size:clamp(1.1rem,1.6vw,1.32rem); max-width:50ch; text-wrap:balance}
.hero .ctas{margin-top:38px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
@media (max-height:760px){
  .hero h1{font-size:clamp(2.3rem, 5vw, 4.4rem)}
  .hero .lede{margin-top:20px}
  .hero .ctas{margin-top:26px}
  .hero{padding-block:24px 22px}
}

.frameworks{margin-top:40px}
.frameworks .eyebrow{display:block; margin-bottom:18px; font-size:.68rem}
.marquee{
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{display:flex; width:max-content; animation:marquee 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.frameworks ul{
  list-style:none; margin:0; padding:0 22px; display:flex; gap:44px; flex:none;
  font-family:var(--f-mono); font-size:.92rem; color:var(--ink-2); letter-spacing:.02em; white-space:nowrap;
}
.frameworks li{position:relative}
.frameworks li::before{content:""; position:absolute; left:-24px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:var(--ink-3); opacity:.5}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marquee{-webkit-mask-image:none; mask-image:none}
  .marquee-track{animation:none; width:auto; justify-content:center}
  .marquee-track ul{flex-wrap:wrap; justify-content:center; row-gap:10px}
  .marquee-track ul[aria-hidden]{display:none}
}

/* ---------- painted ground (stand-in for photography / film) ---------- */
.painted{
  position:relative; overflow:hidden; border-radius:22px; isolation:isolate;
  background:
    radial-gradient(55% 45% at 78% 22%, #C9D3DC 0%, rgba(201,211,220,0) 70%),
    radial-gradient(60% 60% at 18% 30%, #5E7A98 0%, rgba(94,122,152,0) 70%),
    radial-gradient(90% 70% at 40% 105%, #0E1622 0%, rgba(14,22,34,0) 70%),
    linear-gradient(170deg, #8FA3B8 0%, #3A5470 45%, #182331 100%);
}
.painted::before, .painted::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none}
/* horizontal brush streaks */
.painted::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='600'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.0035 0.06' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  background-size:cover; mix-blend-mode:soft-light; opacity:.85;
}
/* canvas grain */
.painted::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  opacity:.28; mix-blend-mode:multiply;
}
.painted.dusk{
  background:
    radial-gradient(50% 45% at 82% 18%, #B7C4D1 0%, rgba(183,196,209,0) 70%),
    radial-gradient(80% 70% at 15% 90%, #0C131D 0%, rgba(12,19,29,0) 70%),
    linear-gradient(200deg, #5C7590 0%, #283D55 55%, #111A26 100%);
}
.painted.moss{
  background:
    radial-gradient(60% 55% at 20% 20%, #DDE3E6 0%, rgba(221,227,230,0) 70%),
    radial-gradient(70% 80% at 90% 95%, #182331 0%, rgba(24,35,49,0) 70%),
    linear-gradient(150deg, #A9B8C6 0%, #56708C 55%, #1E2E42 100%);
}
/* ---------- live product demo ---------- */
.demo{padding:0; transition:padding .9s cubic-bezier(.2,.7,.2,1)}
/* once revealed the product fills the painting edge to edge; the painting's own radius clips the corners */
.demo .app{border-radius:16px; box-shadow:0 0 0 1px var(--line), var(--shadow); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), border-radius .9s ease}
/* intro: the painting alone, the product waiting to rise over it */
.demo.intro{padding:clamp(40px, 9vw, 120px) clamp(24px, 9vw, 120px)}
.demo.intro .app{opacity:0; transform:translateY(60px) scale(.94); border-radius:14px}
.shot{padding:0; transition:padding .9s cubic-bezier(.2,.7,.2,1)}
.shot img{transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), border-radius .9s ease}
.shot.intro{padding:clamp(28px,5vw,64px)}
.shot.plain img{border-radius:12px; box-shadow:0 0 0 1px var(--line), var(--shadow)}
.shot.intro img{opacity:0; transform:translateY(30px) scale(.95); border-radius:14px}
.app{
  --a-bg:#F7F8F6; --a-card:#FFFFFF; --a-ink:#121821; --a-ink2:#5A6472; --a-line:#E3E6EA;
  --a-navy:#182331; --a-navy2:#223146; --a-navy-ink:#E9EDF2; --a-navy-soft:#8C99AA;
  --a-green:#1F8A4C; --a-green-soft:#E3F3E9; --a-red:#B3261E; --a-red-soft:#FBE7E5;
  --a-blue:#1D5FD6; --a-blue-soft:#E6EEFC; --a-amber:#A35B0E;
  font-family:var(--f-app); color:var(--a-ink); font-size:13px; line-height:1.45;
  background:var(--a-bg); border-radius:14px; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(10,18,28,.55), 0 0 0 1px rgba(255,255,255,.25);
  width:100%; margin:0;
}
.app-bar{display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; background:#FFFFFF; border-bottom:1px solid var(--a-line)}
.app-bar i{width:11px; height:11px; border-radius:50%; background:#E2E4E7}
.app-bar i:nth-child(1){background:#F0605A}.app-bar i:nth-child(2){background:#F4BE4F}.app-bar i:nth-child(3){background:#5AC05A}
.app-bar .url{margin:0 auto; font-size:11.5px; color:var(--a-ink2); background:var(--a-bg); border:1px solid var(--a-line); border-radius:7px; padding:3px 40px}
.app-body{display:grid; grid-template-columns:220px 1fr; min-height:470px}
.side{background:var(--a-navy); color:var(--a-navy-ink); padding:20px 12px; display:flex; flex-direction:column; gap:4px}
.side .wordmark{color:#F4F6F1; align-items:flex-start; padding:0 8px}
.side .wordmark .w-saga{font-size:22px; letter-spacing:.18em}
.side .wordmark .w-sub{font-size:5.6px; letter-spacing:.6em}
.side .co{font-size:11.5px; color:var(--a-navy-soft); padding:6px 8px 14px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:8px}
.side .item{padding:8px 10px; border-radius:8px; transition:background .35s ease}
.side .item b{display:block; font-weight:600; font-size:12.5px}
.side .item small{display:block; color:var(--a-navy-soft); font-size:10.5px; line-height:1.35}
.side .item.on{background:var(--a-navy2)}
.main{position:relative; padding:28px 32px}
.scene{position:absolute; inset:28px 32px; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none}
.scene.on{opacity:1; transform:none; pointer-events:auto; position:relative; inset:auto}
.s-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px}
.s-head h4{margin:0; font-size:21px; font-weight:600; letter-spacing:-.02em}
.s-head p{color:var(--a-ink2); font-size:12.5px; margin-top:3px}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap}
.chip.gap{background:var(--a-red-soft); color:var(--a-red)}
.chip.ok{background:var(--a-green-soft); color:var(--a-green)}
.chip.new{background:var(--a-blue-soft); color:var(--a-blue)}
.chip.draft{background:#F4ECE0; color:var(--a-amber)}
.acard{background:var(--a-card); border:1px solid var(--a-line); border-radius:12px; padding:16px 18px}
.acard + .acard{margin-top:12px}
.ref{font-family:var(--f-mono); font-size:10.5px; color:var(--a-ink2); background:var(--a-bg); border:1px solid var(--a-line); border-radius:5px; padding:1px 6px}
.kv{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:14px}
.kv span{display:block; color:var(--a-ink2); font-size:11px}
.kv b{font-weight:600; font-size:12.5px}
.rows{list-style:none; margin:10px 0 0; padding:0}
.rows li{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:9px 0; border-top:1px solid var(--a-line); font-size:12.5px}
.rows li:first-child{border-top:0}
.rows .muted{color:var(--a-ink2)}
.tick{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; border:1.5px solid var(--a-green); color:var(--a-green); font-size:10px; margin-right:9px; vertical-align:-3px}
.tick.open{border-color:#C5CAD1; color:transparent}
.doc{font-size:13px; line-height:1.65}
.doc h5{margin:0 0 6px; font-size:13px; font-weight:600}
.doc del{color:var(--a-red); background:var(--a-red-soft); text-decoration-thickness:1px}
.doc ins{color:var(--a-green); background:var(--a-green-soft); text-decoration:none; border-bottom:1px solid var(--a-green)}
.abtn{display:inline-block; font:600 12px var(--f-app); padding:8px 13px; border-radius:8px; background:var(--a-navy); color:#fff}
.abtn.ghost{background:#fff; color:var(--a-ink); border:1px solid var(--a-line)}
.stamp{display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:10px; background:var(--a-green-soft); color:#135C33; font-size:12.5px}
.stamp .dot{width:26px; height:26px; border-radius:50%; background:var(--a-green); color:#fff; display:grid; place-items:center; font-size:13px; flex:none}
.big{font-size:64px; font-weight:700; letter-spacing:-.04em; line-height:1}
.bar{height:8px; background:#E8EBEE; border-radius:9px; overflow:hidden; margin-top:14px}
.bar i{display:block; height:100%; width:95%; background:var(--a-green); border-radius:9px}
.grid2{display:grid; grid-template-columns:1fr 1.25fr; gap:12px}

.demo-ctl{display:flex; align-items:stretch; justify-content:center; gap:6px; padding:18px 0 22px; flex-wrap:wrap}
.step{
  appearance:none; border:1px solid var(--line); cursor:pointer; background:transparent; color:var(--ink-2);
  font:500 .82rem var(--f-body); letter-spacing:.02em; padding:9px 16px 11px; border-radius:999px;
  position:relative; overflow:hidden;
}
.step .fill{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--btn)}
.step[aria-selected="true"]{color:var(--ink); border-color:var(--ink-3)}
.play{appearance:none; border:0; background:var(--btn); color:var(--btn-ink); border-radius:999px; font:500 .82rem var(--f-body); padding:0 16px; cursor:pointer}

@media (max-width:760px){
  .app-body{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:18px}
  .scene{inset:18px}
  .kv{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .big{font-size:48px}
  .app-bar .url{padding:3px 14px}
}

/* ---------- sections ---------- */
section.block{padding-block:clamp(88px, 12vw, 150px)}
.sec-head{max-width:760px}
.sec-head .eyebrow{display:block; margin-bottom:22px}
.sec-head .lede{margin-top:24px}
.center{text-align:center; margin-inline:auto}
.center .lede{margin-inline:auto}

/* why: a conclusion traced back to its source. No boxes: a rail, nodes, a travelling pulse */
.why{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:center}
@media (max-width:900px){ .why{grid-template-columns:1fr} }
.t-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-bottom:6px}
.t-head small{display:block; font:500 .64rem/1.2 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.t-head b{display:block; font:500 1.7rem/1.1 var(--f-display); margin-top:6px}
.t-ok{font:600 .72rem var(--f-app); color:var(--sage); background:var(--sage-soft); border-radius:99px; padding:5px 11px; white-space:nowrap}
.t-body{position:relative; display:grid; gap:16px; padding-top:22px}
.t-row{
  position:relative; display:grid; grid-template-columns:6.6em 1fr; column-gap:16px; padding-left:40px;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.t-row small{font:500 .62rem/1.2 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding-top:.5em}
.t-row b{font:400 1.02rem/1.35 var(--f-body); color:var(--ink)}
.t-det{grid-column:2; font:.74rem/1.5 var(--f-mono); color:var(--ink-2); min-height:1.5em}
.t-node{position:absolute; left:10px; top:.42em; width:11px; height:11px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink-3); transition:background .3s, border-color .3s; z-index:2}
.t-row.lit .t-node{background:var(--accent); border-color:var(--accent)}
.t-node::after{content:""; position:absolute; inset:-1.5px; border-radius:50%; border:1.5px solid var(--accent); opacity:0}
.t-row.hit .t-node::after{animation:t-ripple 1s ease-out}
@keyframes t-ripple{from{opacity:.9; transform:scale(1)} to{opacity:0; transform:scale(3.4)}}
.t-src-tag{display:inline-block; margin-left:10px; font:600 .6rem/1 var(--f-body); letter-spacing:.18em; color:var(--accent); border:1px solid var(--accent); border-radius:99px; padding:3px 7px; vertical-align:2px; opacity:0; transform:translateY(3px); transition:opacity .4s, transform .4s}
.t-row.is-src .t-src-tag{opacity:1; transform:none}
.t-rail{position:absolute; left:15px; top:0; width:1px; background:var(--line); pointer-events:none}
.t-fill{display:block; width:100%; height:0; background:linear-gradient(to bottom, transparent, var(--accent))}
.t-pulse{
  position:absolute; left:15.5px; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; z-index:3;
  background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 22px 6px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity:0; pointer-events:none;
}
.trace.playing .t-pulse{opacity:1}
.trace.playing .t-row:not(.lit){opacity:.22; transform:translateX(6px)}
.trace.fading .t-row{opacity:.22 !important; transform:none}
.trace.fading .t-pulse{opacity:0; transition:opacity .5s}
.t-ctl{display:flex; justify-content:space-between; align-items:center; margin-top:22px; color:var(--ink-3); font:.74rem var(--f-mono); letter-spacing:.02em}
.t-ctl button{appearance:none; border:0; background:none; color:var(--ink-2); padding:4px 0; font:500 .8rem var(--f-body); letter-spacing:.04em; cursor:pointer; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line)}
.t-ctl button:hover{color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .t-ctl button{display:none} }

/* audiences */
.tabs{display:flex; gap:6px; margin-top:48px; border-bottom:1px solid var(--line); overflow-x:auto}
.tab{
  appearance:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  font:500 .9rem var(--f-body); color:var(--ink-3); letter-spacing:.02em;
  padding:14px 18px; border-bottom:1.5px solid transparent; margin-bottom:-1px;
}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.panel{display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(28px,5vw,72px); align-items:center; margin-top:48px}
.panel h3{font-family:var(--f-display); font-size:clamp(2rem,3vw,2.6rem); line-height:1.05}
.panel p{color:var(--ink-2); margin-top:18px; font-weight:400}
.checks{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.checks li{display:grid; grid-template-columns:18px 1fr; gap:12px; font-size:.97rem}
.checks li::before{content:""; width:14px; height:8px; border-left:1.5px solid var(--accent); border-bottom:1.5px solid var(--accent); transform:rotate(-45deg) translate(2px,4px)}
.textlink{display:inline-block; margin-top:28px; font-weight:500; text-decoration:none}
.textlink:hover{color:var(--ink-2)}
.shot img{border-radius:0; width:100%; height:auto; aspect-ratio:1368/770; object-fit:cover}
@media (max-width:860px){ .panel{grid-template-columns:1fr} }


/* before / after: four cards that flip from "without" to "with" */
.bx-sec{position:relative}
.bx-switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; margin-top:36px; padding:4px; border-radius:99px; background:var(--paper-2); border:1px solid var(--line)}
.bx-switch button{position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer; padding:9px 20px; border-radius:99px; font:500 .86rem var(--f-body); letter-spacing:.02em; color:var(--ink-3); transition:color .3s}
.bx-switch button[aria-pressed="true"]{color:var(--btn-ink)}
.bx-thumb{position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:99px; background:var(--btn); transition:transform .45s cubic-bezier(.3,.9,.3,1)}
.bx-switch[data-state="with"] .bx-thumb{transform:translateX(100%)}
.bx-grid{margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,64px)}
@media (max-width:760px){ .bx-grid{grid-template-columns:1fr} }
.bx{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:26px 0 36px; border-top:1px solid var(--line); overflow:hidden;
  transition:border-color .5s ease calc(var(--i) * 90ms), background .5s ease calc(var(--i) * 90ms);
}
.bx-ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--ink-3); transition:color .5s ease calc(var(--i) * 90ms), border-color .5s ease calc(var(--i) * 90ms)}
.bx-faces{display:grid}
.bx-face{grid-area:1 / 1; transition:opacity .45s ease calc(var(--i) * 90ms), transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms), filter .45s ease calc(var(--i) * 90ms)}
.bx h3{font:500 1.6rem/1.1 var(--f-display)}
.bx p{color:var(--ink-2); font-weight:400; font-size:.95rem; margin-top:8px; max-width:40ch}
.bx-without h3{color:var(--ink-2)}
/* state: without */
.bx-grid[data-state="without"] .bx-with{opacity:0; transform:translateY(14px); filter:blur(4px); pointer-events:none}
.bx-grid[data-state="without"] .bx-ic{color:var(--gap)}
/* state: with */
.bx-grid[data-state="with"] .bx-without{opacity:0; transform:translateY(-14px); filter:blur(4px); pointer-events:none}
.bx-grid[data-state="with"] .bx-ic{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}

/* per-card flip: a card can show the other side than the switch */
.bx{cursor:pointer}
.bx:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.bx-flip{position:absolute; top:24px; right:0; font:500 .7rem/1 var(--f-body); letter-spacing:.04em; color:var(--ink-3); border:1px solid var(--line); border-radius:99px; padding:6px 10px; background:var(--paper); transition:color .2s, border-color .2s}
.bx:hover .bx-flip{color:var(--ink); border-color:var(--ink-3)}
.bx-flip .to-after{display:none}
.bx-grid[data-state="without"] .bx:not(.peek) .bx-flip .to-before,
.bx-grid[data-state="with"] .bx.peek .bx-flip .to-before{display:none}
.bx-grid[data-state="without"] .bx:not(.peek) .bx-flip .to-after,
.bx-grid[data-state="with"] .bx.peek .bx-flip .to-after{display:inline}
.bx-grid .bx.peek{transition-delay:0s}
.bx-grid .bx.peek .bx-face, .bx-grid .bx.peek .bx-ic{transition-delay:0s}
/* peeked card under "with" shows its "without" side */
.bx-grid[data-state="with"] .bx.peek .bx-with{opacity:0; transform:translateY(14px); filter:blur(4px)}
.bx-grid[data-state="with"] .bx.peek .bx-without{opacity:1; transform:none; filter:none}
.bx-grid[data-state="with"] .bx.peek .bx-ic{color:var(--gap); border-color:var(--line)}
/* peeked card under "without" shows its "with" side */
.bx-grid[data-state="without"] .bx.peek .bx-without{opacity:0; transform:translateY(-14px); filter:blur(4px)}
.bx-grid[data-state="without"] .bx.peek .bx-with{opacity:1; transform:none; filter:none}
.bx-grid[data-state="without"] .bx.peek .bx-ic{color:var(--accent)}
.bx h3, .bx p{padding-right:84px}
@media (max-width:520px){ .bx h3, .bx p{padding-right:0} .bx-faces{padding-top:22px} }
.bx-switch.nudge{animation:bx-nudge 1.2s ease 1}
@keyframes bx-nudge{0%,100%{box-shadow:0 0 0 0 transparent} 35%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent)}}

/* feature split */
.split{display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(28px,6vw,88px); align-items:center}
.split .facts{margin-top:34px; display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:10px 34px}
.split .facts b{display:block; font-family:var(--f-display); font-size:2.6rem; font-weight:500; line-height:1; font-variant-numeric:tabular-nums}
.split .facts span{font-size:.8rem; color:var(--ink-3); letter-spacing:.02em}
@media (max-width:860px){ .split{grid-template-columns:1fr} }

/* process */

/* trust */
.sec-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,80px); align-items:center}
.sec-strip ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.sec-strip li{background:var(--paper-2); border-radius:18px; padding:24px 24px 26px; display:flex; flex-direction:column; gap:16px}
.sec-strip .ic{width:42px; height:42px; border-radius:12px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.sec-strip .ic svg{width:19px; height:19px}
.sec-strip b{display:block; font:500 1.4rem/1.1 var(--f-display)}
.sec-strip li span:not(.ic){display:block; color:var(--ink-2); font-weight:400; font-size:.93rem; line-height:1.45; margin-top:6px}
@media (max-width:900px){ .sec-grid{grid-template-columns:1fr} }
@media (max-width:520px){ .sec-strip ul{grid-template-columns:1fr} }

/* final cta */
.final{
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(32px,4vw,48px) clamp(28px,4vw,56px); color:#F4F6F1; background:#182331; border-radius:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}
.final h2{font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.05; max-width:20ch}
.final #cta-h{max-width:none}
.final p{margin-top:12px; max-width:52ch; font-weight:400; font-size:.98rem; color:rgba(244,246,241,.78)}
.final .ctas{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.final .btn-dark{background:#F4F6F1; color:#141B17}
.final .btn-line{border-color:rgba(244,246,241,.45); color:#F4F6F1}
@media (max-width:820px){ .final{grid-template-columns:1fr} .final .ctas{justify-content:flex-start} }

/* ---------- sub pages ---------- */
.page-hero{padding-block:clamp(72px,10vw,128px) clamp(56px,7vw,88px)}
.page-hero .eyebrow{display:block; margin-bottom:22px}
.page-hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem); line-height:.98; letter-spacing:-.03em}
.page-hero .lede{margin-top:26px; font-size:clamp(1.1rem,1.5vw,1.28rem)}
.page-cta{padding-bottom:0}
.pg-cards{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.pg-cards li{background:var(--paper-2); border-radius:18px; padding:26px}
.pg-ic{width:42px; height:42px; border-radius:12px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.pg-cards h3{font:500 1.45rem/1.1 var(--f-display); margin-top:18px}
.pg-cards p{color:var(--ink-2); font-weight:400; font-size:.94rem; margin-top:8px}
@media (max-width:900px){ .pg-cards{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pg-cards{grid-template-columns:1fr} }
.pg-aud{display:grid; grid-template-columns:.9fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:center}
.pg-aud .eyebrow{display:block; margin-bottom:18px}
.pg-aud .lede{margin-top:20px}
.pg-aud.flip > div:first-child{order:2}
@media (max-width:900px){ .pg-aud{grid-template-columns:1fr} .pg-aud.flip > div:first-child{order:0} }
.pg-fw{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.pg-fw li{padding:24px 24px 26px 0; border-bottom:1px solid var(--line)}
.pg-fw b{font:.95rem var(--f-mono); color:var(--accent)}
.pg-fw p{color:var(--ink-2); font-weight:400; font-size:.95rem; margin-top:8px; max-width:34ch}
@media (max-width:900px){ .pg-fw{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pg-fw{grid-template-columns:1fr} }
.pg-ai{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.pg-ai li{border-left:2px solid var(--accent); padding:4px 0 4px 22px}
.pg-ai h3{font:500 1.55rem/1.1 var(--f-display)}
.pg-ai p{color:var(--ink-2); font-weight:400; margin-top:8px; max-width:44ch}
@media (max-width:760px){ .pg-ai{grid-template-columns:1fr} }
.pg-faq{margin-top:40px; max-width:820px; border-top:1px solid var(--line)}
.pg-faq details{border-bottom:1px solid var(--line)}
.pg-faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative; font:500 1.35rem/1.2 var(--f-display)}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{content:"+"; position:absolute; right:4px; top:50%; translate:0 -50%; font:400 1.5rem var(--f-body); color:var(--ink-3); transition:transform .25s}
.pg-faq details[open] summary::after{transform:rotate(45deg)}
.pg-faq details p{color:var(--ink-2); font-weight:400; padding:0 40px 24px 0; max-width:62ch}
.pg-note{font:.78rem var(--f-mono); color:var(--ink-3); margin-bottom:18px}
.pg-tag{display:inline-block; font:500 .66rem/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.pg-meta{display:block; font:.76rem var(--f-mono); color:var(--ink-3); margin-top:16px}
.pg-feat{background:var(--paper-2); border-radius:22px; padding:clamp(28px,4vw,48px); cursor:pointer}
.pg-feat h2{font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.05; margin-top:14px; max-width:22ch}
.pg-feat p{color:var(--ink-2); font-weight:400; margin-top:14px; max-width:56ch}
.pg-posts{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.pg-posts li{background:var(--paper-2); border-radius:18px; padding:24px 24px 26px; cursor:pointer; transition:background .2s}
.pg-posts li:hover, .pg-feat:hover{background:color-mix(in srgb, var(--paper-2) 80%, var(--line))}
.pg-posts h3{font:500 1.35rem/1.12 var(--f-display); margin-top:12px}
.pg-posts p{color:var(--ink-2); font-weight:400; font-size:.93rem; margin-top:8px}
@media (max-width:900px){ .pg-posts{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pg-posts{grid-template-columns:1fr} }
.pg-news input{height:46px; min-width:0; width:260px; max-width:100%; border-radius:99px; border:1px solid rgba(244,246,241,.35); background:rgba(255,255,255,.06); color:#F4F6F1; padding:0 18px; font:400 .95rem var(--f-body)}
.pg-news input::placeholder{color:rgba(244,246,241,.55)}
.pg-thanks{grid-column:1 / -1; margin:0; color:#A9C1DD}

/* company page */
.ph-text{outline:1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset:3px; border-radius:3px}
.ph{border:1.5px dashed var(--line); border-radius:18px; display:grid; place-items:center; align-content:center; gap:10px; color:var(--ink-3); background:var(--paper-2); text-align:center; padding:16px}
.ph span{font:.74rem var(--f-mono)}
.co-story{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:start}
.co-story-text{display:grid; gap:18px; font-size:1.08rem; font-weight:400; color:var(--ink-2); max-width:62ch; padding-top:6px}
@media (max-width:900px){ .co-story{grid-template-columns:1fr} }
.co-team{margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px)}
.co-founder{display:grid; gap:22px}
.ph-photo{aspect-ratio:4/5; width:100%}
.co-meta h3{font:500 1.9rem/1.1 var(--f-display); display:inline-block}
.co-role{display:table; margin-top:8px; font:500 .7rem/1.2 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.co-meta p{color:var(--ink-2); font-weight:400; margin-top:14px; max-width:48ch}
.co-link{display:inline-block; margin-top:14px; font-size:.92rem; text-decoration:none; border-bottom:1px solid var(--ink-3)}
@media (max-width:640px){ .co-team{grid-template-columns:1fr} }
.co-beliefs{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .co-beliefs{grid-template-columns:1fr} }
.co-contact{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,80px); align-items:start}
.co-contact .eyebrow{display:block; margin-bottom:18px}
.co-contact dl{margin:0; border-top:1px solid var(--line)}
.co-contact dl > div{display:grid; grid-template-columns:8em 1fr; gap:16px; padding:18px 0; border-bottom:1px solid var(--line)}
.co-contact dt{font:500 .7rem/1.6 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.co-contact dd{margin:0; color:var(--ink)}
@media (max-width:900px){ .co-contact{grid-template-columns:1fr} }
@media (max-width:480px){ .co-contact dl > div{grid-template-columns:1fr; gap:4px} }

/* product page: sticky section nav + one section per workspace area */
.pr-layout{display:grid; grid-template-columns:252px 1fr; gap:clamp(24px,4vw,56px); align-items:start; padding-bottom:clamp(72px,10vw,120px)}
.pr-toc{position:sticky; top:calc(96px + env(safe-area-inset-top, 0px))}
.pr-toc ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.pr-toc a{display:flex; align-items:center; gap:12px; padding:11px 16px; border-radius:12px; text-decoration:none; color:var(--ink-3); font-size:1rem; transition:background .25s, color .25s}
.pr-toc a:hover{color:var(--ink)}
.pr-dot{width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:none}
.pr-toc a.on{background:var(--paper-2); color:var(--ink)}
.pr-toc a.on .pr-dot{opacity:1; background:var(--accent)}
.pr-body{display:grid; gap:clamp(88px,12vw,150px)}
.pr-sec{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,56px); align-items:center}
.pr-tag{display:block; font:500 .66rem/1.4 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.pr-sec h2{font-size:clamp(2.4rem,4.2vw,3.6rem); line-height:1}
.pr-intro{color:var(--ink-2); font-weight:400; font-size:1.12rem; line-height:1.65; margin-top:20px; max-width:44ch}
.pr-funcs{list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line)}
.pr-funcs li{display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line)}
.pr-fi{width:30px; height:30px; border-radius:9px; border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.pr-fi svg{width:15px; height:15px}
.pr-funcs b{display:block; font-weight:500; font-size:.97rem}
.pr-funcs li span:not(.pr-fi){display:block; color:var(--ink-2); font-weight:400; font-size:.88rem; line-height:1.4}
.pr-vis{min-width:0}
@media (max-width:1100px){ .pr-sec{grid-template-columns:1fr} .pr-vis{position:static} }
@media (max-width:820px){ .pr-layout{grid-template-columns:1fr} .pr-toc{display:none} }
/* the Saga hub screen, as in the product */
.hb{display:grid; grid-template-columns:minmax(0,1fr); height:100%}
.hb-main{padding:1.8em 2em; overflow:hidden; background:#F7F8F6}
.hb-kick{font-size:.64em; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#5A6472}
.hb-h{font-size:2.1em; font-weight:700; letter-spacing:-.04em; line-height:1.05; margin-top:.25em; color:#141B17}
.hb-sub{font-size:.8em; color:#5A6472; margin-top:.5em; max-width:38em}
.hb-card{margin-top:1.3em; background:#FFFFFF; border:1px solid #E3E6EA; border-radius:1em; padding:1em}
.hb-card-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:.7em}
.hb-card-h b{font-size:.95em; font-weight:700; letter-spacing:-.02em}
.hb-count{font-size:.62em; color:#5A6472; background:#F1F2EE; border:1px solid #E3E6EA; border-radius:99px; padding:.2em .7em}
.hb-row{display:grid; grid-template-columns:2.1em 1fr auto; gap:.8em; align-items:center; padding:.65em .8em; border:1px solid #E3E6EA; border-radius:.8em; background:#F6F7F4; margin-top:.45em}
.hb-row.hl{background:#EDF3FD; border-color:#C9DAF6}
.hb-ri{width:2.1em; height:2.1em; border-radius:.5em; background:#FFFFFF; display:grid; place-items:center; color:#1D5FD6}
.hb-ri svg{width:1em; height:1em}
.hb-row b{display:block; font-size:.78em; font-weight:600}
.hb-row small{display:block; font-size:.66em; color:#5A6472}
.hb-arr{font-size:.8em; color:#5A6472}

/* solutions page */
.so-h{font-size:clamp(2.2rem,3.8vw,3.2rem); line-height:1.02; margin-top:10px}
.so-tabs{display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:28px; padding:4px; border-radius:99px; background:var(--paper-2); border:1px solid var(--line)}
.so-tabs button{appearance:none; border:0; background:none; cursor:pointer; padding:9px 18px; border-radius:99px; font:500 .86rem var(--f-body); letter-spacing:.02em; color:var(--ink-3); transition:background .25s, color .25s}
.so-tabs button[aria-selected="true"]{background:var(--btn); color:var(--btn-ink)}
.so-tabs button:not([aria-selected="true"]):hover{color:var(--ink)}
@media (max-width:620px){ .so-tabs{border-radius:18px} }
.so-roles{margin-top:34px}
.so-role{animation:lp-in .45s ease}
.so-role-h{margin-bottom:16px}
.so-role-h h3{font-size:clamp(1.8rem,2.8vw,2.4rem); line-height:1.08; max-width:24ch}
.so-role p{color:var(--ink-2); font-size:1.05rem; line-height:1.65; max-width:62ch}
.so-sits{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.so-sits li{background:var(--paper-2); border-radius:18px; padding:24px 26px 26px}
.so-sits h3{font-size:1.45rem; line-height:1.12}
.so-sits p{color:var(--ink-2); font-weight:400; font-size:.95rem; margin-top:10px}
@media (max-width:720px){ .so-sits{grid-template-columns:1fr} }
.so-sec .pg-fw{margin-top:32px; grid-template-columns:1fr 1fr}
@media (max-width:620px){ .so-sec .pg-fw{grid-template-columns:1fr} }
.so-more{margin-top:18px; color:var(--ink-3); font-size:.92rem}
.so-steps{list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.so-steps li{border-top:1px solid var(--line); padding-top:18px}
.so-steps h3{font-size:1.5rem; line-height:1.1}
.so-steps p{color:var(--ink-2); font-weight:400; font-size:.94rem; margin-top:8px}
@media (max-width:760px){ .so-steps{grid-template-columns:1fr} }

/* ---------- home (Swedish rebuild) ---------- */
.film-sec{padding-top:8px}
/* Under ytan: scattered signals pop up over the office; Saga pulls them in and puts them in order, as you scroll */
/* a film, one screen tall: it plays by itself while in view */
.cx-track{position:relative}
.cx-pin{position:relative; height:clamp(560px, 56.25vw, calc(100vh - var(--nav-h)))}
.cx-stage{position:relative; height:100%; overflow:hidden; background:#0C121B}
.cx-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 50%}
.cx-blur{filter:blur(10px) saturate(.9); transform:scale(1.06); opacity:0}
.cx-veil{position:absolute; inset:0; background:rgba(10,16,26,.4); opacity:0}
.cx-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,16,26,.6) 0%, rgba(10,16,26,.22) 36%, rgba(10,16,26,0) 58%), linear-gradient(0deg, rgba(10,16,26,.42) 0%, rgba(10,16,26,0) 42%)}
/* one heading and one line of body per phase, over the photo */
.cx-caps{position:absolute; left:5%; bottom:9%; width:min(29%, 380px); z-index:6; color:#F4F6F1}
.cx-cap{position:absolute; left:0; bottom:0; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
.cx-cap.on{opacity:1; transform:none}
.cx-cap h3{font:500 clamp(1.7rem,2.5vw,2.3rem)/1.05 var(--f-display); letter-spacing:-.02em; color:#FFFFFF}
.cx-cap p{margin-top:12px; font-size:.97rem; line-height:1.55; color:rgba(244,246,241,.84)}
/* the signals, each in its own app's look */
.cx-tiles{position:absolute; inset:0; z-index:5; pointer-events:none}
.cx-tile{position:absolute; left:0; top:0; width:218px; opacity:0; transform-origin:50% 50%; will-change:transform, opacity;
  background:#FFFFFF; border-radius:8px; padding:10px 12px; font:400 11px/1.4 "Segoe UI", -apple-system, var(--f-app); color:#242424;
  box-shadow:0 18px 38px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.05)}
.cx-tile b{display:block; font-weight:600; font-size:11.5px; color:#1B1B1B}
.cx-tile span{display:block; color:#424242}
.cx-tile img{display:block}
.cx-tile .th{display:flex; align-items:center; gap:6px; font-size:10px; color:#616161; margin-bottom:6px}
.cx-tile .th img{width:13px; height:13px}
.cx-tile .th time{margin-left:auto}
.cx-tag{width:auto; padding:9px 12px; font:500 12px/1 var(--f-mono); color:#182331; white-space:nowrap}
.t-ms, .t-cal{border-left:3px solid #0F6CBD}
.t-teams{border-top:3px solid #5B5FC7}
.t-teams .tm, .t-slack .sm{display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:start}
.t-teams .tm img{width:28px; height:28px; border-radius:50%; object-fit:cover}
.t-jira{border-radius:4px; color:#172B4D; font-family:-apple-system, "Segoe UI", Roboto, sans-serif; box-shadow:0 0 0 1px #DFE1E6, 0 16px 32px -14px rgba(9,30,66,.5)}
.t-jira .jk{display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:500; color:#0C66E4}
.t-jira .jk img{width:13px; height:13px}
.t-jira .js{margin:5px 0 8px; font-size:12px; font-weight:500; color:#172B4D}
.t-jira .jf{display:flex; justify-content:space-between; align-items:center}
.t-jira .jl{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.02em; border-radius:3px; padding:2px 5px; background:#E9F2FF; color:#0055CC}
.t-jira .jl.todo{background:#DFE1E6; color:#44546F}
.t-jira .ini{width:20px; height:20px; border-radius:50%; background:#FBE5D6; color:#9A4A1C; display:grid; place-items:center; font:700 8px/1 var(--f-app)}
.t-jira .jf img{width:20px; height:20px; border-radius:50%; object-fit:cover}
.t-file{display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:center; border-radius:6px}
.t-file .fi{width:26px; height:26px}
.t-file b, .t-sp b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.t-sp{padding:0; overflow:hidden; border-radius:6px}
.t-sp .sph{display:flex; align-items:center; gap:6px; background:#03787C; color:#FFFFFF; font-size:10.5px; font-weight:600; padding:7px 10px}
.t-sp .sph img{width:14px; height:14px; background:#FFFFFF; border-radius:3px; padding:1px}
.t-sp .spr{display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; align-items:center; padding:9px 10px}
.t-sp .spr img{width:20px; height:20px}
.t-claude{background:#FAF9F5; border-radius:14px; color:#141413; box-shadow:0 18px 38px -16px rgba(40,30,10,.5), 0 0 0 1px #E6E1D4}
.t-claude .ch{display:flex; align-items:center; gap:6px; font:500 12px/1 Georgia, "Times New Roman", serif; color:#3D3929; margin-bottom:8px}
.t-claude .ch img{width:14px; height:14px}
.t-claude .cu{margin-left:auto; width:max-content; max-width:92%; background:#F0EEE6; border-radius:10px; padding:6px 9px}
.t-drive{font-family:Roboto, Arial, sans-serif; color:#202124}
.t-drive .df{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:6px; background:#F1F3F4}
.t-drive .df svg{flex:none; width:13px; height:16px}
.t-slack{font-family:Lato, -apple-system, sans-serif; color:#1D1C1D}
.t-slack .th{font-weight:700; color:#1D1C1D}
.t-slack .sq{width:26px; height:26px; border-radius:6px; overflow:hidden; background:#E8DEF3; color:#4A154B; display:grid; place-items:center; font:700 10px/1 var(--f-app)}
.t-slack .sq img{width:100%; height:100%; object-fit:cover}
/* Saga: the whole window, as in the product */
.cx-win{position:absolute; left:37%; right:4%; top:9%; max-height:calc(100% - 24px); z-index:3; display:grid; grid-template-columns:clamp(150px,15%,196px) minmax(0,1fr);
  border-radius:14px; overflow:hidden; background:#F7F8F6; font-family:var(--f-app); color:#121821; opacity:0; transform-origin:50% 60%;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14)}
.cx-side{background:#182331; color:#E9EDF2; padding:18px 10px; display:flex; flex-direction:column; gap:2px; font-size:14px}
.cx-side .u-mark{margin-bottom:8px}
.cx-co{font-size:10.5px; color:#8C99AA; padding:4px 8px 12px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:6px}
.cx-nav{font-size:11px; font-weight:600; padding:7px 9px; border-radius:7px; color:#C9D2DD}
.cx-nav.on{background:#223146; color:#FFFFFF}
.cx-main{position:relative; min-width:0; padding:24px 26px 26px; overflow:hidden}
.cx-kick{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#5A6472}
.cx-h{font-size:21px; font-weight:700; letter-spacing:-.03em; margin-top:4px}
.cx-reqs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px}
.cx-rl{font-size:10.5px; color:#5A6472; margin-right:4px}
.cx-req-chip{font:500 10px/1 var(--f-mono); color:#3A424D; background:#FFFFFF; border:1px solid #E3E6EA; border-radius:6px; padding:5px 8px; opacity:0}
/* the map: requirements, actions and evidence, and the lines between what belongs together */
.cx-map{position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(26px,3.2vw,44px); margin-top:16px}
.cx-col{position:relative; display:grid; align-content:start; gap:8px; min-width:0}
.cx-ch{font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#5A6472; padding:0 2px 2px}
.cx-card{position:relative; min-width:0; background:#FFFFFF; border-radius:9px; padding:8px 11px; box-shadow:0 0 0 1px #E3E6EA, 0 4px 10px -8px rgba(8,14,24,.25);
  opacity:0; transition:box-shadow .35s ease, opacity .35s ease}
.cx-card b{display:block; font-size:11px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cx-kc code{display:block; font:500 9.5px/1.2 var(--f-mono); color:#5A6472; margin-bottom:2px}
.cx-ac{padding-bottom:6px}
.cx-meta{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:5px}
.cx-meta .u-chip{font-size:9px}
.cx-meta .u-chip.pop{animation:cx-pop .5s cubic-bezier(.2,.9,.3,1.35)}
@keyframes cx-pop{from{transform:scale(.55); opacity:0}}
.cx-uc{display:grid; grid-template-columns:18px minmax(0,1fr); gap:8px; align-items:center}
.cx-uc small{display:block; font-size:9.5px; color:#5A6472}
.cx-src{flex:none; width:18px; height:18px; border-radius:5px; background:#FFFFFF; box-shadow:0 0 0 1px #E3E6EA; display:grid; place-items:center}
.cx-src img{width:12px; height:12px; object-fit:contain}
.cx-av{width:18px; height:18px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font:600 7px/1 var(--f-app)}
.cx-av img{width:100%; height:100%; object-fit:cover}
.cx-av.se{background:#FBE5D6; color:#9A4A1C}
/* traceability, shown last and without lines: the clicked action opens a small card with its chain, and the linked cards light up */
.cx-trail{position:absolute; left:0; top:0; z-index:4; width:236px; background:#FFFFFF; border-radius:10px; padding:10px 12px 10px;
  box-shadow:0 0 0 1px #D5DAE0, 0 22px 40px -18px rgba(8,14,24,.45); opacity:0; transform:translateY(-6px) scale(.98); transform-origin:30% 0;
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.cx-trail.on{opacity:1; transform:none}
.cx-trh{font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#5A6472; margin-bottom:4px}
.cx-tr{display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px; align-items:center; padding:5px 0; opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .35s ease}
.cx-trail.on .cx-tr{opacity:1; transform:none; transition-delay:calc(.35s + var(--i) * .35s)}
.cx-ti{width:22px; height:22px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 1px #E3E6EA; display:grid; place-items:center; overflow:hidden; font:600 10px/1 var(--f-mono); color:#182331}
.cx-ti img{width:12px; height:12px; object-fit:contain}
.cx-ti.cx-pic img{width:100%; height:100%; object-fit:cover}
.cx-tr small{display:block; font-size:9px; line-height:1.2; color:#5A6472}
.cx-tr b{display:block; font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cx-map.tracing .cx-card:not(.hot){opacity:.38 !important}
.cx-card.hot{box-shadow:0 0 0 1.5px #182331, 0 10px 20px -12px rgba(8,14,24,.4)}
/* a cursor for the one click at the end, and a ripple where it lands */
.cx-cur{position:absolute; left:0; top:0; z-index:9; width:18px; height:18px; pointer-events:none; opacity:0;
  transition:transform var(--mv, .9s) cubic-bezier(.45,.05,.25,1), opacity .4s ease; filter:drop-shadow(0 2px 3px rgba(8,14,24,.35))}
.cx-cur.on{opacity:1}
.cx-cur svg{display:block; width:100%; height:100%; transition:transform .12s ease}
.cx-cur.press svg{transform:scale(.8)}
.cx-tap{position:absolute; left:0; top:0; z-index:8; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; pointer-events:none; opacity:0; background:rgba(24,35,49,.22)}
.cx-tap.go{animation:cx-tap .6s ease-out}
@keyframes cx-tap{0%{opacity:.9; transform:scale(.3)} 100%{opacity:0; transform:scale(1.5)}}
/* reduced motion: the ordered result as a still picture */
.cx-track.static .cx-tiles, .cx-track.static .cx-ctl{display:none}
/* the film's controls: pause or play, and how far it has come through its four parts */
.cx-ctl{position:absolute; right:20px; bottom:20px; z-index:10; display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:99px;
  background:rgba(10,16,26,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.cx-play{appearance:none; border:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.14); color:#FFFFFF}
.cx-play:hover{background:rgba(255,255,255,.24)}
.cx-play svg{width:12px; height:12px; fill:currentColor}
.cx-play .i-play, .cx-ctl.paused .cx-play .i-pause{display:none}
.cx-ctl.paused .cx-play .i-play{display:block}
.cx-prog{display:flex; gap:4px}
.cx-prog i{position:relative; width:26px; height:3px; border-radius:2px; background:rgba(255,255,255,.28); overflow:hidden}
.cx-prog i::after{content:""; position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(var(--f, 0)); background:#FFFFFF}
/* at the end of each run everything fades back to the office before it starts over */
.cx-stage.fade .cx-win, .cx-stage.fade .cx-tiles, .cx-stage.fade .cx-blur, .cx-stage.fade .cx-veil, .cx-stage.fade .cx-cur{opacity:0 !important; transition:opacity .6s ease}
.cx-stage.fade .cx-cap{opacity:0; transition:opacity .4s ease}

@media (max-width:1100px){
  .cx-win{left:34%; right:3%; grid-template-columns:124px minmax(0,1fr)}
  .cx-caps{width:27%}
  .cx-main{padding:20px 18px}
}
@media (max-width:760px){
  .cx-pin{height:max(700px, calc(100svh - var(--nav-h)))}
  .cx-ctl{right:12px; bottom:auto; top:12px; padding:4px}
  .cx-prog{display:none}
  .cx-caps{right:56px}
  .cx-caps{left:20px; right:20px; top:20px; bottom:auto; width:auto}
  .cx-cap{top:0; bottom:auto}
  .cx-cap h3{font-size:1.55rem}
  .cx-cap p{font-size:.9rem; margin-top:8px}
  .cx-scrim{background:linear-gradient(180deg, rgba(10,16,26,.72) 0%, rgba(10,16,26,.25) 34%, rgba(10,16,26,0) 55%)}
  .cx-photo{object-position:70% 50%}
  .cx-win{left:12px; right:12px; grid-template-columns:1fr}
  .cx-side{display:none}
  .cx-main{padding:14px 14px 12px}
  .cx-h{font-size:16px}
  .cx-reqs{margin-top:8px}
  .cx-rl{display:none}
  .cx-map{column-gap:14px; margin-top:12px}
  .cx-col{gap:6px}
  .cx-card{padding:6px 7px}
  .cx-card{overflow:hidden}
  .cx-card b{font-size:9.5px; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .cx-kc b{display:none}
  .cx-kc code{font-size:9px; margin:0; white-space:normal}
  .cx-uc{grid-template-columns:1fr; gap:4px}
  .cx-uc small{display:none}
  .cx-meta{margin-top:4px}
  .cx-meta .u-chip{font-size:8px}
  .cx-tile{width:172px; padding:8px 10px; font-size:10px}
  .cx-tile b{font-size:10.5px}
  .cx-tag{width:auto; font-size:11px; padding:8px 10px}
  .cx-tile.d-only{display:none}
}
/* small caption under product screens */
.ui-note{margin-top:12px; text-align:right; font-size:.7rem; color:var(--ink-3)}
/* live product view under the hero: Saga's Home view, playing a short loop */
.show-stage{position:relative}
.show-win{border-radius:14px; overflow:hidden; background:#F7F8F6; box-shadow:0 0 0 1px var(--line), 0 40px 80px -44px rgba(8,14,24,.45);
  opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.show-stage.in .show-win{opacity:1; transform:none}
.show-win .scr{aspect-ratio:1280/720}
.show-ui .u-main{transition:opacity .55s ease}
.show-ui.fade .u-main{opacity:0}
.show-ui.snap *{transition:none !important}
.show-ui .u-bar i{transition:width .3s ease}
.show-ui .anim{max-height:4.4em; overflow:hidden; transition:max-height .6s ease, opacity .5s ease, padding .6s ease, border-color .6s ease, background-color .6s ease}
.show-ui .anim.gone{max-height:0; opacity:0; padding-block:0; border-top-color:transparent}
.show-ui .u-row{transition:border-color .6s ease}
.show-ui .anim.gone + .u-row{border-top-color:transparent}
.show-ui .hl{margin-inline:-.6em; padding-inline:.6em; border-radius:.5em}
.show-ui .hl.on{background:#EDF3FD}
.show-ui .flip{display:grid}
.show-ui .flip > *{grid-area:1 / 1; justify-self:end; transition:opacity .4s ease, transform .4s ease}
.show-ui .flip .after{opacity:0; transform:scale(.85)}
.show-ui.approved .flip .before{opacity:0; transform:scale(.85)}
.show-ui.approved .flip .after{opacity:1; transform:none}
@media (max-width:760px){
  .show-stage{overflow:hidden; margin:-2px -24px -36px -2px; padding:2px 0 36px 2px}
  .show-win{width:200%; border-radius:12px 0 0 12px}
  .show-ui .u-app{grid-template-columns:1fr}
  .show-ui .u-side{display:none}
}
@media (prefers-reduced-motion: reduce){ .show-win{opacity:1; transform:none} }
/* känner du igen dig */
.rc{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.rc li{padding:0}
.rc h3{font:500 1.35rem/1.15 var(--f-display); margin-top:22px}
.rc p{color:var(--ink-2); font-weight:400; font-size:.93rem; margin-top:6px}
.rc-art{height:150px; border-radius:14px; background:#FFFFFF; color:#121821; padding:18px; display:flex; flex-direction:column; gap:10px; font-family:var(--f-app); box-shadow:0 0 0 1px var(--line), 0 16px 30px -20px rgba(6,12,22,.45)}
.rc-file{font:.84rem var(--f-mono); color:#121821; overflow-wrap:anywhere; line-height:1.3}
.rc-badge{align-self:flex-start; font:700 .6rem/1 var(--f-app); letter-spacing:.06em; color:#fff; background:#B3261E; border-radius:4px; padding:4px 6px}
.rc-badge.doc{background:#1D5FD6}
.rc-pages{margin-top:auto; font-size:.82rem; color:#8A93A0}
.rc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:3px; flex:1}
.rc-grid i{background:#EEF1EC; border-radius:2px}
.rc-grid i:nth-child(-n+4){background:#1F8A4C; opacity:.8}
.rc-mail{gap:6px}
.rc-from{font-size:.68rem; color:#8A93A0}
.rc-subj{font-size:.8rem; font-weight:600; line-height:1.3}
.rc-lines{display:grid; gap:5px; margin-top:auto}
.rc-lines i{height:6px; border-radius:3px; background:#EEF0F2}
.rc-lines i:last-child{width:60%}
.rp{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:36px clamp(28px,3.4vw,56px)}
.rp h3{font:500 1.35rem/1.15 var(--f-display)}
.rp p{color:var(--ink-2); font-size:.95rem; margin-top:8px}
@media (max-width:980px){ .rp{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .rp{grid-template-columns:1fr} }
@media (max-width:1100px){ .rc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .rc{grid-template-columns:1fr} }
/* the loop: a quiet panel, white tiles on a hairline circle (after vesence.com) */
.lp{margin-top:48px; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center;
  border-radius:22px; padding:clamp(24px,4.5vw,64px); position:relative; overflow:hidden; isolation:isolate;
  background:var(--lp-bg); border:1px solid var(--line)}
.lp::after{content:""; position:absolute; inset:0; z-index:-1; opacity:var(--lp-grain); mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.lp-ring{position:relative; width:100%; max-width:480px; aspect-ratio:1; margin-inline:auto; container-type:inline-size}
.lp-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.lp-track{fill:none; stroke:color-mix(in srgb, var(--ink) 18%, transparent); stroke-width:1}
.lp-arc{fill:none; stroke:var(--lp-arc); stroke-width:1.5; stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.45,0,.2,1)}
.lp-arc.snap{transition:none}
.lp-node{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(var(--a)) translateX(37.5cqw) rotate(calc(var(--a) * -1));
  appearance:none; border:0; background:none; padding:0; cursor:pointer; color:inherit; font:inherit}
.lp-tile{display:grid; place-items:center; width:clamp(46px,13cqw,64px); aspect-ratio:1; border-radius:28%; background:#FFFFFF; color:#1F2328;
  box-shadow:0 1px 2px rgba(10,16,24,.06), 0 12px 24px -12px rgba(10,16,24,.35); transition:box-shadow .4s ease, transform .45s cubic-bezier(.3,1.5,.5,1), background-color .4s ease, color .4s ease}
.lp-tile svg{width:42%; height:42%}
.lp-name{position:absolute; left:50%; top:calc(100% + 10px); translate:-50% 0; white-space:nowrap; font-size:.82rem; color:var(--ink-3); transition:color .3s, top .45s cubic-bezier(.3,1.5,.5,1)}
.lp-node.on .lp-tile{transform:scale(1.18); background:var(--navy); color:#F4F6F1; box-shadow:0 0 0 1px var(--lp-ring), 0 1px 2px rgba(10,16,24,.06), 0 18px 32px -12px rgba(8,14,24,.55)}
.lp-node.on .lp-name{color:var(--ink); top:calc(100% + 16px)}
.lp-node:not(.on):hover .lp-tile{transform:translateY(-2px)}
.lp-node:focus-visible{outline:none}
.lp-node:focus-visible .lp-tile{outline:2px solid var(--accent); outline-offset:4px}
.lp-side{min-height:300px; display:flex; flex-direction:column}
.lp-panel{animation:lp-in .5s ease}
@keyframes lp-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.lp-panel h3{font-size:clamp(2.3rem,3.8vw,3.2rem); margin-top:10px}
.lp-d{font-weight:400; color:var(--ink-2); margin-top:16px; max-width:44ch}
.lp-ctl{margin-top:auto; padding-top:28px; display:flex; justify-content:space-between; align-items:center; font:.72rem var(--f-mono); color:var(--ink-3)}
.lp-ctl button{appearance:none; border:0; background:none; color:var(--ink-2); cursor:pointer; font:500 .8rem var(--f-body); text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line)}
.lp-ctl button:hover{color:var(--ink)}
@media (max-width:900px){ .lp{grid-template-columns:1fr} .lp-side{min-height:0} }
@media (max-width:520px){ .lp-name{font-size:.7rem} }
@media (prefers-reduced-motion: reduce){ .lp-panel{animation:none} .lp-ctl button{display:none} .lp-arc{transition:none} }
/* worries */
.wq-grid{align-items:start}
.wq{list-style:none; margin:0; padding:0; display:grid; gap:0}
.wq li{display:grid; grid-template-columns:42px 1fr; gap:18px; padding:20px 0}
.wq-ic{width:42px; height:42px; border-radius:12px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.wq h3{font-size:1.4rem; line-height:1.15}
.wq p{color:var(--ink-2); font-weight:400; font-size:.95rem; margin-top:6px}
/* ISO */
/* the heaviest requirements, one card per industry */
/* the row starts at the content edge and runs to the viewport edge, so the next card peeks in */
.rq{--rq-pad:max(24px, calc((100% - 1180px) / 2 + 24px));
  list-style:none; margin:56px 0 0; padding:0 var(--rq-pad); display:grid; grid-auto-flow:column; grid-auto-columns:min(460px, 82%); gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--rq-pad); overscroll-behavior-x:contain; scrollbar-width:none}
.rq::-webkit-scrollbar{display:none}
.rq:focus-visible{outline:2px solid var(--accent); outline-offset:6px}
.rq li{scroll-snap-align:start}
.rq img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:16px; background:var(--paper-2)}
.rq h3{font:500 1.65rem/1.1 var(--f-display); margin-top:24px}
.rq p{color:var(--ink-2); font-size:.97rem; margin-top:10px}
.rq-foot{display:flex; justify-content:flex-end; margin-top:32px}
.rq-nav{display:flex; gap:10px; flex:none}
.rq-nav button{appearance:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, opacity .2s}
.rq-nav button:hover:not(:disabled){border-color:var(--ink-3)}
.rq-nav button:disabled{opacity:.3; cursor:default}
@media (max-width:760px){ .rq{grid-auto-columns:84%; gap:16px} .rq h3{font-size:1.5rem} .rq-foot{display:none} }

/* real app marks on the 'Känner du igen dig?' cards */
.rc-head{display:flex; align-items:center; gap:10px; min-width:0}
.rc-file.rc-wrap{white-space:normal; overflow-wrap:anywhere; line-height:1.3}
.rc-logo{width:26px; height:26px; flex:none; object-fit:contain}
.rc-lines{display:grid; gap:6px; margin-top:6px}
.rc-lines i{height:7px; border-radius:4px; background:#EEF0F2}
.rc-lines i:last-child{width:60%}
.rc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; flex:1; border:1px solid #E1E1E1; padding:2px}
.rc-grid i{background:#F3F4F6; border-radius:1px}
.rc-grid i.h{background:#217346}
.rc-grid i.bad{background:#FDECEA; box-shadow:inset 0 0 0 1px #F1B4AE}
.rc-mhead{display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center}
.rc-av{width:28px; height:28px; border-radius:50%; background:#8E6BB0; color:#FFFFFF; display:grid; place-items:center; font-size:.72rem; font-weight:600}
.rc-mhead b{font-size:.9rem; font-weight:600}
.rc-mhead time{font-size:.74rem; color:#8A93A0}
.rc-subj{font-size:.88rem; font-weight:600; color:#185ABD; margin-top:2px}
.rc-prev{font-size:.82rem; color:#6B7280; line-height:1.35; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

/* footer */
footer{padding-block:clamp(88px, 12vw, 150px) 48px} /* same rhythm as the sections above */
footer .cols{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px}
footer h4{margin:0 0 14px; font:500 .72rem var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:.93rem}
footer ul a{text-decoration:none; color:var(--ink-2)}
footer .tag{color:var(--ink-3); font-size:.9rem; margin-top:18px; max-width:30ch; font-weight:400}
footer .legal{margin-top:56px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.82rem; color:var(--ink-3)}
@media (max-width:980px){ footer .cols{grid-template-columns:repeat(4,1fr)} footer .cols > div:first-child{grid-column:1 / -1} }
@media (max-width:760px){ footer .cols{grid-template-columns:1fr 1fr} }

/* ---------- the Saga workspace (bento) ---------- */
.bento{
  margin-top:56px; display:grid; gap:20px;
  grid-template-columns:1.6fr 1fr; grid-template-areas:"desk mob" "desk con";
}
.cell{background:var(--paper-2); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; min-width:0; position:relative}
.cell-desk{grid-area:desk} .cell-mob{grid-area:mob} .cell-con{grid-area:con}
.cell-text{padding:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) 0; position:relative; z-index:2}
.cell h3{font-family:var(--f-display); font-size:clamp(1.6rem,2vw,1.95rem); line-height:1.05}
.cell p{color:var(--ink-2); font-weight:400; font-size:.95rem; line-height:1.5; margin-top:8px; max-width:40ch}
@media (max-width:900px){
  .bento{grid-template-columns:1fr; grid-template-areas:"desk" "mob" "con"}
}

/* every device screen is a size container: UI inside is set in em, 1em = 1/Nth of the screen width */
.scr{container-type:inline-size; overflow:hidden; background:#F7F8F6; position:relative}
.ui{font-family:var(--f-app); color:#121821; line-height:1.4; height:100%}
.ui-desk{font-size:calc(100cqw / 80)}     /* 1280 px virtual */
.ui-tab{font-size:calc(100cqw / 73.75)}   /* 1180 px virtual */
.ui-phone{font-size:calc(100cqw / 24.4)}  /* 390 px virtual */

/* shared app parts */
.u-app{display:grid; grid-template-columns:15em 1fr; height:100%}
.u-side{background:#182331; color:#E9EDF2; padding:1.4em .9em; display:flex; flex-direction:column; gap:.25em}
.u-mark{display:flex; flex-direction:column; align-items:center; align-self:flex-start; padding:0 .55em; color:#F4F6F1; line-height:1}
.u-mark b{font:600 1.55em/1 var(--f-display); letter-spacing:.2em; margin-right:-.2em}
.u-mark i{font:400 .416em/1 var(--f-mark); letter-spacing:.65em; margin-right:-.65em; font-style:normal}
.u-co{font-size:.78em; color:#8C99AA; padding:.55em .7em 1.1em; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:.5em}
.u-nav{padding:.55em .7em; border-radius:.55em}
.u-nav b{display:block; font-size:.84em; font-weight:600}
.u-nav small{display:block; font-size:.7em; color:#8C99AA; line-height:1.35}
.u-nav.on{background:#223146}
.u-main{padding:2em 2.2em; overflow:hidden}
.u-kicker{font-size:.72em; letter-spacing:.14em; text-transform:uppercase; color:#5A6472; font-weight:600}
.u-h{font-size:1.9em; font-weight:700; letter-spacing:-.03em; margin-top:.2em}
.u-sub{font-size:.9em; color:#5A6472; margin-top:.25em}
.u-card{background:#fff; border:1px solid #E3E6EA; border-radius:.8em; padding:1em 1.1em}
.u-chip{display:inline-block; font-size:.7em; font-weight:600; padding:.2em .65em; border-radius:99px; white-space:nowrap}
.u-chip.gap{background:#FBE7E5; color:#B3261E} .u-chip.ok{background:#E3F3E9; color:#1F8A4C}
.u-chip.new{background:#E6EEFC; color:#1D5FD6} .u-chip.wait{background:#F4ECE0; color:#A35B0E}
.u-ref{font:.68em var(--f-mono); color:#5A6472; border:1px solid #E3E6EA; border-radius:.35em; padding:.05em .45em; background:#F7F8F6; white-space:nowrap}
.u-row{display:flex; justify-content:space-between; align-items:center; gap:.8em; padding:.62em 0; border-top:1px solid #EEF0F2; font-size:.84em}
.u-row:first-of-type{border-top:0}
.u-row span small{display:block; color:#5A6472; font-size:.86em}

/* laptop screen */
.u-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.u-search{font-size:.8em; color:#5A6472; border:1px solid #E3E6EA; background:#fff; border-radius:99px; padding:.55em 1.1em; white-space:nowrap}
.u-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:.8em; margin-top:1.4em}
.u-kpi span{font-size:.76em; color:#5A6472}
.u-kpi b{display:block; font-size:2em; font-weight:700; letter-spacing:-.04em; line-height:1.1; margin-top:.15em}
.u-kpi small{font-size:.72em; color:#5A6472}
.u-bar{height:.4em; background:#E8EBEE; border-radius:9px; margin-top:.5em; overflow:hidden}
.u-bar i{display:block; height:100%; width:95%; background:#1F8A4C}
.u-cols{display:grid; grid-template-columns:1.2fr 1fr; gap:.8em; margin-top:.8em}
.u-when{font:.72em var(--f-mono); color:#5A6472; white-space:nowrap}
.u-src{display:inline-flex; align-items:center; gap:.4em; font-size:.72em; color:#5A6472; white-space:nowrap}
.u-src i{width:.55em; height:.55em; border-radius:50%; background:#1F8A4C; display:inline-block}
.u-card h5{margin:0 0 .4em; font-size:.9em; font-weight:600}

/* tablet screen: policy draft with tracked changes */
.u-doc{font-size:.9em; line-height:1.65; margin-top:1em}
.u-doc h5{margin:0 0 .4em; font-size:1em}
.u-doc del{color:#B3261E; background:#FBE7E5}
.u-doc ins{color:#1F8A4C; background:#E3F3E9; text-decoration:none; border-bottom:1px solid #1F8A4C}
.u-btns{display:flex; gap:.5em; margin-top:1em}
.u-btn{font-size:.78em; font-weight:600; padding:.6em 1em; border-radius:.6em; background:#182331; color:#fff}
.u-btn.ghost{background:#fff; color:#121821; border:1px solid #E3E6EA}

/* phone screen */
.p-status{height:3.4em; background:#182331; color:#fff; display:flex; justify-content:space-between; align-items:center; padding:0 1.9em 0 2.1em; font-weight:600; font-size:.95em}
.p-bat{width:1.55em; height:.8em; border:1.5px solid #fff; border-radius:.25em; position:relative}
.p-bat::after{content:""; position:absolute; inset:1.5px 4px 1.5px 1.5px; background:#fff; border-radius:1px}
.p-bar{background:#182331; color:#fff; display:flex; justify-content:space-between; align-items:center; padding:.5em 1em 1em}
.p-bar .ham{width:2.4em; height:2.4em; border:1px solid rgba(255,255,255,.3); border-radius:.7em; display:grid; place-items:center}
.p-bar .ham i{display:block; width:1em; height:.1em; background:#fff; box-shadow:0 .32em 0 #fff, 0 -.32em 0 #fff}
.p-bar .av{width:2.2em; height:2.2em; border-radius:50%; background:#EEF0EA; color:#182331; display:grid; place-items:center; font-weight:600; font-size:.9em}
.p-bar .u-mark{align-items:center; padding:0}
.p-bar .u-mark b{font-size:1.2em}
.p-bar .u-mark i{font-size:.33em}
.p-body{padding:1.1em 1.1em 0; display:grid; gap:.9em}
.p-tabs{display:flex; gap:.5em}
.p-tabs span{font-size:.8em; border:1px solid #E3E6EA; border-radius:.6em; padding:.35em .8em; background:#fff; color:#5A6472}
.p-tabs span.on{color:#121821; font-weight:600; background:#EEF1F5; border-color:#EEF1F5}
.p-q{justify-self:end; max-width:84%; background:#EEF1F5; border-radius:1em 1em .3em 1em; padding:.65em .85em; font-size:.88em}
.p-steps{font-size:.78em; color:#5A6472; display:grid; gap:.3em; padding-left:.2em}
.p-steps b{color:#121821; font-weight:500}
.p-a{font-size:.88em}
.p-a .u-ref{font-size:.75em}

/* ---- device frames ---- */
.frame{position:relative; background:#0A0B0E;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 1px rgba(8,14,24,.14), 0 12px 22px -12px rgba(8,14,24,.3), 0 46px 84px -38px rgba(8,14,24,.55)}
/* the metal edge: a thin ring that catches the light at the corners */
.frame::after{content:""; position:absolute; inset:-2px; padding:2px; border-radius:inherit; pointer-events:none; z-index:4;
  background:linear-gradient(135deg, #D9DCE0 0%, #5B6068 16%, #2B2E34 42%, #4C5057 70%, #A9ADB3 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
/* glass: a faint reflection across the screen */
.frame .scr::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:6; border-radius:inherit;
  background:linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,0) 40%)}
/* laptop: only the lid, bleeding off the card */
.desk-stage{flex:1; position:relative; min-height:0}
/* the lid fills the card from below the text to the bottom edge and runs off it, so the card ends where the screen does */
.lid{
  position:absolute; left:6%; right:-30%; top:clamp(28px,3.4vw,40px); bottom:0;
  border-radius:16px 16px 0 0; padding:8px 8px 0;
}
.lid::after{inset:-2.5px; padding:2.5px;
  background:linear-gradient(160deg, #F4F5F7 0%, #8D929A 10%, #3A3E45 30%, #24272C 60%, #474B52 100%)}
.lid::before{content:""; position:absolute; left:50%; top:0; translate:-50% 0; width:9%; height:clamp(10px,1.3vw,15px); background:#0A0B0E; border-radius:0 0 8px 8px; z-index:7;
  background-image:radial-gradient(circle at 50% 42%, #2A3140 0 1.6px, #14171D 2.2px 3px, transparent 3.4px)}
.lid .scr{height:100%; border-radius:6px 6px 0 0}
@media (max-width:900px){ .desk-stage{min-height:420px} .lid{right:-70%} }

/* tablet + phone: the top half of each, cut by the card's edge */
.mob-stage{position:relative; height:clamp(190px,17vw,225px); margin-top:18px}
.ipad{position:absolute; left:5%; top:22%; width:72%; border-radius:16px; padding:8px; z-index:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 1px 1px rgba(8,14,24,.14), 0 12px 22px -12px rgba(8,14,24,.3), 0 46px 84px -38px rgba(8,14,24,.55)}
/* silver aluminium edge and the front camera in the top bezel */
.ipad::after{inset:-2px; padding:2px; border-radius:18px;
  background:linear-gradient(145deg, #F7F8F9 0%, #CDD0D4 22%, #AEB2B8 50%, #C9CCD0 76%, #E6E8EA 100%)}
.ipad::before{content:""; position:absolute; left:50%; top:2.5px; translate:-50% 0; width:3.5px; height:3.5px; border-radius:50%; z-index:5;
  background:radial-gradient(circle at 40% 40%, #34405A, #0E1116 70%)}
.ipad .scr{aspect-ratio:4/3; border-radius:8px}
.iphone{position:absolute; right:7%; top:0; width:40%; border-radius:13% / 6%; padding:2.6%; z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 1px rgba(8,14,24,.14), -10px 16px 26px -14px rgba(8,14,24,.4), -22px 34px 60px -26px rgba(8,14,24,.5)}
/* titanium band, lit from both sides */
.iphone::after{inset:-3px; padding:3px; border-radius:calc(13% + 3px) / calc(6% + 3px);
  background:linear-gradient(90deg, #8E939A 0%, #3E4248 5%, #6B7077 12%, #2E3136 50%, #6B7077 88%, #3E4248 95%, #8E939A 100%)}
/* side buttons: action and volume on the left, the side button on the right */
.iphone::before{content:""; position:absolute; left:-4.5px; right:-4.5px; top:15%; height:30%; z-index:-1; border-radius:2px;
  background:
    linear-gradient(90deg, #5E636A, #33363B) left 0 top 0 / 4px 10% no-repeat,
    linear-gradient(90deg, #5E636A, #33363B) left 0 top 30% / 4px 23% no-repeat,
    linear-gradient(90deg, #5E636A, #33363B) left 0 top 78% / 4px 23% no-repeat,
    linear-gradient(90deg, #33363B, #5E636A) right 0 top 36% / 4px 36% no-repeat}
.iphone .scr{aspect-ratio:390/844; border-radius:11% / 5.1%}
.iphone .island{position:absolute; left:50%; top:1.7%; translate:-50% 0; width:31%; height:3.7%; background:#050608; border-radius:99px; z-index:7}


/* connections: a tidy grid of tool logos */
.tool-grid{list-style:none; margin:22px clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px); padding:0; flex:1; display:grid; grid-template-columns:repeat(5,44px); gap:18px 22px; justify-content:center; align-content:center}
.tool{width:44px; height:44px; background:#FFFFFF; border-radius:28%; display:grid; place-items:center; box-shadow:0 0 0 1px var(--line), 0 10px 22px -12px rgba(6,12,22,.4)}
.tool img, .tool svg{width:56%; height:56%; object-fit:contain}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- app windows for audiences + incident (coded UI, scales with its width) ---------- */
.win{border-radius:14px; overflow:hidden; background:#F7F8F6; box-shadow:0 0 0 1px var(--line), 0 30px 60px -32px rgba(8,14,24,.45)}
.win-bar{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#FFFFFF; border-bottom:1px solid #E3E6EA}
.win-bar i{width:9px; height:9px; border-radius:50%; background:#E2E4E7}
.win .scr{background:#F7F8F6}
.ui-win{font-size:calc(100cqw / 55)}                     /* ~880 px virtual */
.w-head{display:flex; align-items:center; gap:1.2em; background:#182331; color:#E9EDF2; padding:.75em 1.4em}
.w-head .u-mark b{font-size:1.15em} .w-head .u-mark i{font-size:.3em}
.w-crumb{font-size:.78em; color:#8C99AA}
.w-crumb b{color:#E9EDF2; font-weight:600}
.w-av{margin-left:auto; width:1.9em; height:1.9em; border-radius:50%; background:#EEF0EA; color:#182331; display:grid; place-items:center; font-weight:600; font-size:.8em}
.w-body{padding:1.4em 1.6em 1.6em}
.w-title{display:flex; justify-content:space-between; align-items:flex-end; gap:1em}
.w-filters{display:flex; gap:.4em; margin-top:1em; flex-wrap:wrap}
.w-filters span{font-size:.72em; padding:.3em .8em; border-radius:99px; border:1px solid #E3E6EA; background:#fff; color:#5A6472}
.w-filters span.on{background:#182331; color:#fff; border-color:#182331}
.w-table{margin-top:1em; background:#fff; border:1px solid #E3E6EA; border-radius:.8em; overflow:hidden}
.w-tr{display:grid; align-items:center; gap:.9em; padding:.7em 1em; border-top:1px solid #EEF0F2; font-size:.8em}
.w-tr:first-child{border-top:0}
.w-th{font-size:.66em; letter-spacing:.1em; text-transform:uppercase; color:#5A6472; font-weight:600; background:#FAFBFA}
.w-tr small{display:block; color:#5A6472; font-size:.86em}
.w-tr .muted{color:#5A6472}
.w-find{grid-template-columns:2.6fr 1fr .7fr 1.1fr .9fr}
.w-port{grid-template-columns:2fr .7fr 1.3fr 1.5fr .6fr .5fr}
.w-bar2{display:flex; align-items:center; gap:.5em}
.w-bar2 .u-bar{flex:1; margin:0}
.w-bar2 .u-bar i.warn{background:#A35B0E} .w-bar2 .u-bar i.bad{background:#B3261E}
.w-tags{display:flex; gap:.3em; flex-wrap:wrap}
.w-tags span{font:.78em var(--f-mono); color:#5A6472; border:1px solid #E3E6EA; border-radius:.35em; padding:0 .35em; background:#F7F8F6}
.up{color:#1F8A4C; font-weight:600} .down{color:#B3261E; font-weight:600} .flat{color:#5A6472; font-weight:600}
.w-sum{display:grid; grid-template-columns:repeat(3,1fr); gap:.8em; margin-top:1em}
.w-sum .u-card span{font-size:.72em; color:#5A6472}
.w-sum .u-card b{display:block; font-size:1.7em; font-weight:700; letter-spacing:-.03em; margin-top:.1em}
/* board brief: reads like a one-page document */
.w-doc{background:#fff; border:1px solid #E3E6EA; border-radius:.6em; padding:1.6em 1.8em; margin-top:0}
.w-doc-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #E3E6EA; padding-bottom:.9em}
.w-doc-head h5{margin:0; font:600 1.35em/1.1 var(--f-display); color:#121821; letter-spacing:.01em}
.w-doc-head small{display:block; font-size:.72em; color:#5A6472; margin-top:.3em}
.w-brief{display:grid; grid-template-columns:1fr 1.25fr; gap:1.6em; margin-top:1.2em}
.w-big{font-size:3.4em; font-weight:700; letter-spacing:-.05em; line-height:1}
.w-spark{width:100%; height:auto; margin-top:.6em; display:block}
.w-sec{font-size:.66em; letter-spacing:.12em; text-transform:uppercase; color:#5A6472; font-weight:600; margin-bottom:.3em}
/* incident */
.w-inc{display:grid; grid-template-columns:1.4fr 1fr; gap:.8em; margin-top:1em}
.w-clock{font-size:2.9em; font-weight:700; color:#B3261E; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.w-steps{list-style:none; margin:.4em 0 0; padding:0; display:grid; gap:.45em; font-size:.8em}
.w-steps li{display:flex; align-items:center; gap:.6em}
.w-steps li::before{content:""; width:.7em; height:.7em; border-radius:50%; background:#D5DAE0}
.w-steps li.done::before{background:#1F8A4C}
.w-steps li.now{font-weight:600}
.w-steps li.now::before{background:#fff; border:2px solid #A35B0E; width:.55em; height:.55em}
.w-kv{display:grid; grid-template-columns:repeat(3,1fr); gap:.6em; margin-top:.6em; font-size:.8em}
.w-kv span{display:block; color:#5A6472; font-size:.86em}
.w-kv b{font-weight:600}
.w-time{font:.8em var(--f-mono); color:#5A6472; width:3.6em; flex:none}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}
/* straight (lining) figures in the display face */
h1, h2, h3, .display{font-variant-numeric:lining-nums !important}
/* ---------- nav: the Produkt menu, a clean panel in one column ---------- */
.nav-dd{position:relative}
.nav-dd-top{display:inline-flex; align-items:center; gap:6px}
.nav-chev{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease}
.nav-dd:hover .nav-chev, .nav-dd:focus-within .nav-chev{transform:rotate(180deg)}
.dd{position:absolute; left:-30px; top:100%; padding-top:20px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s}
.nav-dd:hover .dd, .nav-dd:focus-within .dd{opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease}
.nav-dd.shut .dd{opacity:0; visibility:hidden}
.nav-dd.shut .nav-chev{transform:none}
.nav .dd-list{display:grid; gap:2px; width:412px; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)}
.nav .dd-list a{display:grid; grid-template-columns:22px minmax(0,1fr); gap:18px; align-items:start; padding:14px 16px 15px; border-radius:10px;
  color:var(--ink); text-decoration:none; transition:background .2s}
.nav .dd-list a:hover, .nav .dd-list a:focus-visible{background:var(--paper-2); color:var(--ink)}
.nav .dd-list a[aria-current="page"]{color:var(--ink); text-decoration:none}
.dd-ic svg{display:block; width:22px; height:22px; margin-top:3px; stroke-width:1.3}
.dd-list b{display:block; font:500 1.32rem/1.1 var(--f-display); letter-spacing:-.005em}
.dd-list small{display:block; margin-top:5px; font:400 .84rem/1.45 var(--f-body); color:var(--ink-2)}

/* ---------- product: an overview, then one page per part of Saga ---------- */
section.block.pt0{padding-top:0}
.pr-solo .pr-sec{padding-bottom:0}
.hubs{list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px clamp(24px,3.4vw,48px)}
.hubs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hubs a{display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none}
.hub-ic{width:40px; height:40px; border-radius:11px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent); transition:border-color .25s ease}
.hub-ic svg{width:18px; height:18px}
.hubs a:hover .hub-ic{border-color:var(--ink-3)}
.hubs h3{font:500 1.55rem/1.1 var(--f-display); letter-spacing:-.015em; margin-top:20px}
.hubs p{color:var(--ink-2); font-weight:400; font-size:.95rem; line-height:1.55; margin-top:10px; max-width:34ch}
.hub-meta{margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-3); transition:color .2s ease}
.hub-meta .arr{transition:transform .2s ease}
.hubs a:hover .hub-meta{color:var(--ink)}
.hubs a:hover .hub-meta .arr{transform:translateX(3px)}
@media (max-width:980px){ .hubs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .hubs.three{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ .hubs{grid-template-columns:minmax(0,1fr); gap:36px} }

.feat{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,5vw,72px); align-items:center}
.feat.flip{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.feat.flip > .feat-text{order:2}
.feat-text .lede{margin-top:24px}
@media (max-width:980px){ .feat, .feat.flip{grid-template-columns:minmax(0,1fr)} .feat.flip > .feat-text{order:0} }

/* play/pause for the small product films */
.film-row{display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px}
.film-row .ui-note{margin-top:0}
.fbtn{appearance:none; flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; transition:color .2s, border-color .2s}
.fbtn:hover{color:var(--ink); border-color:var(--ink-3)}
.fbtn svg{width:12px; height:12px; fill:currentColor}
.fbtn .i-play, .fbtn.paused .i-pause{display:none}
.fbtn.paused .i-play{display:block}
.fbtn[hidden]{display:none}

/* hub hero: the Saga window with Ask Saga open on the right, doing one thing */
.hs .scr{height:auto}
.ui-hs{font-size:calc(100cqw / 75); height:43em; display:grid; grid-template-columns:14.6em minmax(0,1fr) 23em}
.ui-hs .sh-side{font-size:.8333em}
.hs-main{padding:2em 2.2em; background:#F7F8F6; overflow:hidden; min-width:0}
.hs-main .hb-card{margin-top:1.1em}
.hs-cn{font-size:1.02em; font-weight:700; letter-spacing:-.02em}
.hs-tags{display:flex; flex-wrap:wrap; gap:.4em; margin-top:.6em}
.hs-tags span{font-size:.66em; padding:.25em .7em; border-radius:99px; background:#F1F2EE; border:1px solid #E3E6EA; color:#3A424D}
.hs-fw{display:grid; grid-template-columns:9.6em minmax(0,1fr) auto; gap:.8em; align-items:center; padding:.62em .8em; margin-top:.45em;
  border:1px solid #E3E6EA; border-radius:.8em; background:#F6F7F4; transition:background .5s ease, border-color .5s ease}
.hs-fw code{font:500 .76em var(--f-mono); color:#23446B}
.hs-fw small{font-size:.7em; color:#5A6472; min-width:0}
.hs-fw .st-b{display:none}
.hs.done .hs-nis{background:#EDF3FD; border-color:#C9DAF6}
.hs.done .hs-nis .st-a{display:none}
.hs.done .hs-nis .st-b{display:revert}
.u-chip.no{background:#ECEEF1; color:#4A5361}
.hs-chat{display:flex; flex-direction:column; min-width:0; background:#FFFFFF; border-left:1px solid #E3E6EA}
.hs-ch-h{display:flex; align-items:center; gap:.7em; padding:1.05em 1.2em; border-bottom:1px solid #E3E6EA}
.hs-ch-h b{display:block; font-size:1em; font-weight:700; letter-spacing:-.01em}
.hs-ch-h small{display:block; font-size:.68em; color:#5A6472}
.hs-body{flex:1; position:relative; display:flex; flex-direction:column; gap:.85em; padding:1.1em 1.2em; overflow:hidden}
.hs-empty{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.7em; padding:2em; text-align:center; font-size:.78em; color:#5A6472; transition:opacity .4s ease}
.hs.asked .hs-empty{opacity:0}
.hs-m{opacity:0; transform:translateY(.6em); transition:opacity .45s ease, transform .45s ease}
.hs-m.on{opacity:1; transform:none}
.hs-lbl{font-size:.6em; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5A6472; margin-bottom:.5em}
.hs-you{align-self:flex-end; max-width:88%; text-align:right}
.hs-you p{display:inline-block; text-align:left; padding:.65em 1em; border-radius:1em; background:#2457E0; color:#FFFFFF; font-size:.8em; line-height:1.4}
.hs-upd{padding:.75em .9em; border-radius:.9em; background:#F3F4F1; border:1px solid #E3E6EA; font-size:.74em; line-height:1.45}
.hs-upd b{display:block; font-weight:600; color:#5A6472}
.hs-upd p{margin-top:.25em}
.hs-upd small{display:block; margin-top:.35em; color:#7A838E}
.hs-ans p{font-size:.8em; line-height:1.5}
.hs-src{display:inline-flex; gap:.45em; margin-top:.55em; padding:.28em .75em; border-radius:99px; background:#EDF3FD; color:#1D5FD6; font-size:.64em; font-weight:600}
.hs-ok{padding:.8em .9em; border-radius:.9em; background:#F3F4F1; border:1px solid #E3E6EA}
.hs-ok p{font-size:.76em; font-weight:600; line-height:1.4}
.hs-btns{display:flex; gap:.5em; margin-top:.65em}
.hs-btns span{font-size:.7em; font-weight:600; padding:.45em 1.05em; border-radius:.6em; border:1px solid #C9DAF6; background:#FFFFFF; color:#1D3F8F}
.hs-btns .hs-pri{background:#2457E0; border-color:#2457E0; color:#FFFFFF; transition:transform .15s ease, background .15s ease}
.hs.press .hs-btns .hs-pri{transform:scale(.93); background:#1B45B8}
.hs-ok small{display:block; margin-top:.6em; font-size:.62em; color:#7A838E}
.hs-ok .hs-fin{display:none; font-size:.76em; font-weight:600; color:#1F8A4C}
.hs.done .hs-ok .hs-q{display:none}
.hs.done .hs-ok .hs-fin{display:block}
.hs-in{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.35em .6em; margin:0 1.2em 1.1em; padding:.8em .9em .7em;
  border:1px solid #E3E6EA; border-radius:1.1em; background:#FAFAF8}
.hs-in .hs-tx{grid-column:1 / -1; min-height:2.9em; font-size:.76em; line-height:1.4; color:#8A929C}
.hs-in .hs-tx .hs-ty{display:none; color:#121821}
.hs.typing .hs-in .hs-tx .hs-ph{display:none}
.hs.typing .hs-in .hs-tx .hs-ty{display:inline}
.hs.typing .hs-in .hs-tx .hs-ty::after{content:""; display:inline-block; width:1px; height:1.1em; margin-left:1px; vertical-align:-.2em; background:#121821; animation:hs-caret 1s steps(1) infinite}
@keyframes hs-caret{50%{opacity:0}}
.hs-in small{font-size:.62em; font-weight:600; color:#5A6472}
.hs-send{width:2.1em; height:2.1em; border-radius:50%; background:#9DB4EE; color:#FFFFFF; display:grid; place-items:center; transition:background .2s}
.hs.typing .hs-send{background:#2457E0}
.hs-send svg{width:1em; height:1em}
@container (max-width:980px){
  .ui-hs{font-size:calc(100cqw / 58); grid-template-columns:minmax(0,1fr) 23em}
  .ui-hs .sh-side{display:none}
}
@container (max-width:640px){
  .ui-hs{font-size:calc(100cqw / 24); height:35em; grid-template-columns:minmax(0,1fr)}
  .hs-main{display:none}
  .hs-chat{border-left:0}
}

/* the library film, shot as if on a real desk: scattered papers sorted to where they live in Saga */
.lib{position:relative; aspect-ratio:5 / 4; border-radius:22px; overflow:hidden; background:#CBBFAE; container-type:inline-size; font-family:var(--f-app); color:#121821}
.lib-bg{position:absolute; inset:-8%; background:url(../img/office-2.jpg) 50% 40% / cover; filter:blur(16px) saturate(.75) brightness(1.08)}
.lib-in{position:absolute; inset:0; font-size:calc(100cqw / 57); perspective:95em; perspective-origin:50% 8%}
.lib-plane{position:absolute; left:50%; top:62%; width:56em; height:38em; margin:-19em 0 0 -28em; transform-style:preserve-3d; will-change:transform}
.lib-desk{position:absolute; left:-70em; right:-70em; top:-9em; bottom:-60em; background:radial-gradient(70em 40em at 30% 10%, rgba(255,250,238,.42), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0022 0.085' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.40 0 0 0 0 0.28 0 0 0 0 0.16 0.85 0 0 0 -0.32'/%3E%3C/filter%3E%3Crect width='480' height='480' fill='%23D9C7A9'/%3E%3Crect width='480' height='480' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 30em 30em, #D9C7A9;
  box-shadow:0 -.35em 0 #B9A587, 0 -.5em 1.2em rgba(40,28,14,.35)}
.lib-f{position:absolute; width:12.6em; height:16.4em; margin:-.6em 0 0 -.6em; border-radius:.35em; background:linear-gradient(160deg, #22324A, #182331 60%);
  box-shadow:0 .15em .1em rgba(20,14,8,.35), 0 .6em 1.4em rgba(20,14,8,.25); transform:translateZ(.05em)}
.lib-f > span{position:absolute; left:.9em; bottom:100%; padding:.45em .9em .35em; border-radius:.45em .45em 0 0; background:#182331; color:#E9EDF2; font-size:.78em; font-weight:600; letter-spacing:.16em}
.lib-s{position:absolute; left:0; top:0; width:10.4em; height:14.2em; margin:.1em 0 0 .1em; border-radius:.3em; background:rgba(38,24,10,.55); filter:blur(.45em); will-change:transform, opacity}
.lib-p{position:absolute; left:0; top:0; width:10.4em; height:14.2em; border-radius:.12em; overflow:hidden; will-change:transform;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 8em 8em, linear-gradient(155deg, #FFFFFF, #F6F4EF 70%, #EDEAE3); box-shadow:0 0 0 1px rgba(60,50,40,.08); transition:opacity .5s ease}
.pp{position:absolute; inset:0; padding:.95em .95em .8em; color:#2A2F36}
.pp p{margin-top:.35em; font-size:.36em; line-height:1.42; color:#4A4F57}
.pp-hd{display:flex; align-items:center; gap:.35em; font-size:.38em; font-weight:600; color:#3C4652; margin-bottom:1.3em}
.pp-logo{width:1.4em; height:1.4em; border-radius:.2em; background:#182331}
.pp-t{display:block; font-size:.66em; font-weight:700; line-height:1.18; letter-spacing:-.01em; color:#151A21}
.pp-m{display:block; margin-top:.4em; font-size:.36em; color:#6A707A}
.pp-h{display:block; margin-top:.9em; font-size:.4em; font-weight:700; color:#2A2F36}
.pp-c{text-align:center}
.pp-scan{background:linear-gradient(170deg, rgba(0,0,0,.05), rgba(0,0,0,0) 30%, rgba(0,0,0,.07)); filter:grayscale(1) contrast(1.15); transform:rotate(-1.2deg)}
.pp-agr .pp-t{margin-top:.7em; font-size:.52em; letter-spacing:.06em}
.pp-sigs{position:absolute; left:.95em; right:.95em; bottom:.8em; display:grid; grid-template-columns:1fr 1fr; gap:.8em}
.pp-sigs div{border-top:1px solid #9AA0A8; padding-top:.15em; position:relative}
.pp-sigs span{display:block; font-size:.3em; color:#6A707A}
.pp-sig{position:absolute; left:0; bottom:100%; width:4.2em; height:1.2em}
.pp-clip{position:absolute; left:1.6em; top:-.4em; width:.75em; height:2em}
.pp-mail .pp-mh{display:grid; gap:.25em; padding-bottom:.6em; border-bottom:1px solid #D9D6CF}
.pp-mh b{font-size:.5em}
.pp-mh span{font-size:.32em; color:#5C626B}
.pp-cert{padding:.5em}
.pp-frame{position:absolute; inset:.5em; border:.18em double #8A7340; padding:1em .8em; display:flex; flex-direction:column; align-items:center; text-align:center}
.pp-k{font-size:.42em; font-weight:700; letter-spacing:.32em; color:#8A7340}
.pp-cert .pp-t{margin-top:.6em; font-size:.7em}
.pp-co{display:block; margin:.35em 0 .1em; font:600 .62em/1.2 var(--f-display); color:#151A21}
.pp-v{display:block; margin-top:auto; font-size:.32em; color:#5C626B}
.pp-cf{display:flex; align-items:flex-end; justify-content:space-between; width:100%; margin-top:.4em}
.pp-seal{width:2.3em; height:2.3em}
.pp-cf .pp-sig{position:static; width:4em}
.pp-rep{padding-top:0}
.pp-band{margin:0 -.95em 1.1em; padding:1em .95em .9em; background:#0B3D5C; color:#DCE8F0}
.pp-rep2 .pp-band{background:#3B2A5C}
.pp-band span{font-size:.36em; font-weight:700; letter-spacing:.24em}
.pp-rep .pp-t{font-size:.72em}
.lib-dof{position:absolute; left:0; right:0; top:0; height:46%; pointer-events:none; backdrop-filter:blur(2.2px); -webkit-backdrop-filter:blur(2.2px);
  -webkit-mask-image:linear-gradient(#000 0%, #000 38%, transparent 100%); mask-image:linear-gradient(#000 0%, #000 38%, transparent 100%)}
.lib-light{position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 70% at 18% 0%, rgba(255,246,228,.22), transparent 60%), radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(24,16,8,.38))}
.lib-grain{position:absolute; inset:-20%; pointer-events:none; opacity:.09; mix-blend-mode:overlay; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 14em 14em; animation:lib-grain .8s steps(5) infinite}
@keyframes lib-grain{0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}}
.lib-ov{position:absolute; inset:0; pointer-events:none; font-size:calc(100cqw / 52)}
.lib-tag{position:absolute; opacity:0; white-space:nowrap}
.lib-tag > div{padding:.7em .85em .75em; border-radius:.8em; background:rgba(255,255,255,.96); box-shadow:0 0 0 1px rgba(20,27,36,.06), 0 1em 2em -.8em rgba(10,8,4,.45)}
.lib-tag small{display:block; font-size:.6em; font-weight:600; letter-spacing:.06em; color:#6A707A}
.lib-tag b{display:block; margin-top:.2em; font-size:.9em; font-weight:700; letter-spacing:-.01em}
.lib-r{display:flex; align-items:center; gap:.45em; margin-top:.45em}
.lib-tag code{font:500 .62em var(--f-mono); padding:.18em .45em; border-radius:.3em; background:#EDF1F6; color:#23446B}
.lib-av{width:1.5em; height:1.5em; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:#D9DEE5; color:#41506A; font-size:.66em; font-weight:700}
.lib-av img{width:100%; height:100%; object-fit:cover}
.lib-tag .u-chip{font-size:.62em}
.lib-note{position:absolute; opacity:0; transform:translate(-50%,-100%); white-space:nowrap; padding:.45em .9em; border-radius:99px; background:#182331; color:#FFFFFF; font-size:.72em; font-weight:600}
.lib .fbtn{position:absolute; right:14px; bottom:14px; z-index:2; border-color:rgba(255,255,255,.4); background:rgba(20,16,10,.35); color:#FFFFFF; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.lib.fade .lib-p, .lib.fade .lib-s, .lib.fade .lib-tag, .lib.fade .lib-note{opacity:0 !important; transition:opacity .5s ease}
@media (prefers-reduced-motion: reduce){ .lib-grain{animation:none} }
@container (max-width:520px){
  .lib-ov{font-size:calc(100cqw / 36)}
  .lib-tag.m-off{display:none}
}
/* vendors and data, as Saga shows it: requests to suppliers, then the vendor list */
.vd .scr{height:auto}
.ui-vd{font-size:calc(100cqw / 55); height:auto; padding:1.8em 2.2em 1.9em; background:#F7F7F5; color:#141B24}
.vd-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1.5em}
.vd-h1{font-size:2.1em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.vd-sub{max-width:42em; margin-top:.55em; font-size:.84em; line-height:1.45; color:#5A6472}
.vd-add{flex:none; padding:.65em 1.1em; border-radius:.6em; background:#2457E0; color:#FFFFFF; font-size:.82em; font-weight:600; white-space:nowrap}
.vd-tabs{display:flex; gap:2em; margin-top:1.1em; border-bottom:1px solid #E3E6EA}
.vd-tabs span{margin-bottom:-1px; padding:.55em .25em .65em; font-size:.92em; color:#6A707A}
.vd-tabs span.on{color:#141B24; box-shadow:inset 0 -2px 0 #2457E0}
.vd-td{margin-top:.8em; font-size:.78em; color:#5A6472}
.vd-card{margin-top:.8em; border-radius:1em; background:#FFFFFF; border:1px solid #E3E6EA; overflow:hidden}
.vd-ch{display:flex; justify-content:space-between; align-items:center; gap:1em; padding:.9em 1.1em}
.vd-ch b{display:block; font-size:.92em; font-weight:700}
.vd-ch small{display:block; margin-top:.2em; font-size:.72em; color:#5A6472}
.vd-btn{flex:none; padding:.45em .9em; border:1px solid #D9DCE0; border-radius:.55em; background:#FFFFFF; font-size:.76em; font-weight:500}
.vd-rq{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1em; padding:.65em 1.1em; border-top:1px solid #EEEFEC; transition:background .5s ease}
.vd-rq b{display:block; font-size:.8em; font-weight:600}
.vd-rq small{display:block; font-size:.7em; color:#5A6472}
.vd-rq .u-chip{font-size:.68em}
.vd-rq .s-b{display:none}
.vd.got .vd-live{background:#EDF3FD}
.vd.got .vd-live .s-a{display:none}
.vd.got .vd-live .s-b{display:inline-block}
.vd-tr{display:grid; grid-template-columns:1.25fr 1.15fr .85fr .8fr .7fr; gap:.8em; align-items:center; padding:.6em 1.1em; border-top:1px solid #EEEFEC; font-size:.76em}
.vd-th{border-top:0; background:#FAFAF8; font-size:.6em; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5A6472}
.vd-tr b{font-weight:600}
.vd-tr span{color:#3A424D}
.vd-tr .u-chip{justify-self:start; font-size:.9em}
.vd-risk{display:inline-flex; align-items:center; gap:.45em}
.vd-risk i{width:.55em; height:.55em; border-radius:50%}
@container (max-width:520px){
  .ui-vd{font-size:calc(100cqw / 28); padding:1.5em 1.3em 1.6em}
  .vd-top{flex-direction:column; gap:.8em}
  .vd-td{display:none}
  .vd-tr{grid-template-columns:minmax(0,1fr) auto}
  .vd-tr > :nth-child(2), .vd-tr > :nth-child(4), .vd-tr > :nth-child(5){display:none}
}

/* everything in a part of Saga, listed the way the app lists it */
.fl{margin-top:56px}
.fl ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px clamp(28px,4vw,56px)}
.fl.c4 ul{grid-template-columns:repeat(4,minmax(0,1fr))}
.fl li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:18px; align-items:start; align-content:start}
.fl-ic{width:40px; height:40px; border-radius:11px; background:var(--paper); border:1px solid var(--line); display:grid; place-items:center; color:var(--accent)}
.fl-ic svg{width:18px; height:18px}
.fl b{display:block; margin-top:1px; font-size:1.02rem; font-weight:500; line-height:1.3; color:var(--ink)}
.fl small{display:block; margin-top:6px; max-width:34ch; font-size:.92rem; line-height:1.55; color:var(--ink-2)}
.fl.c4 li{grid-template-columns:minmax(0,1fr); gap:16px}
@media (max-width:980px){ .fl ul, .fl.c4 ul{grid-template-columns:repeat(2,minmax(0,1fr))} .fl.c4 li{grid-template-columns:40px minmax(0,1fr); gap:18px} }
@media (max-width:620px){ .fl ul, .fl.c4 ul{grid-template-columns:minmax(0,1fr); gap:30px} }

/* what you can ask Saga: the app's own chat, with example questions drifting past */
.ask{margin-top:48px; padding:24px 0 22px; border-radius:24px; background:#FFFFFF; border:1px solid #E3E6EA; font-family:var(--f-app); color:#121821; overflow:hidden}
.ask-h{display:grid; justify-items:center; gap:3px; padding:0 24px; text-align:center}
.ask-h b{font-size:1.06rem; font-weight:700; letter-spacing:-.01em}
.ask-h small{font-size:.8rem; color:#5A6472}
.ask-rows{display:grid; gap:12px; margin-top:22px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent)}
.ask-row{display:flex; width:max-content; animation:ask-l 90s linear infinite}
.ask-row.r{animation-name:ask-r; animation-duration:100s}
.ask-rows:hover .ask-row{animation-play-state:paused}
.ask-row ul{display:flex; gap:12px; margin:0; padding:0 12px 0 0; list-style:none}
.ask-row li{flex:none; width:272px; min-height:68px; display:flex; align-items:center; padding:12px 18px; border:1px solid #E3E6EA; border-radius:14px; background:#FFFFFF; font-size:.9rem; line-height:1.4; color:#2B323B}
@keyframes ask-l{to{transform:translateX(-50%)}}
@keyframes ask-r{from{transform:translateX(-50%)} to{transform:none}}
.ask-in{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:4px 12px; margin:26px 24px 0; padding:14px 16px 12px;
  border:1px solid #E3E6EA; border-radius:18px; background:#FAFAF8}
.ask-in > span{grid-column:1 / -1; min-height:2.6em; font-size:.92rem; color:#8A929C}
.ask-in small{font-size:.74rem; font-weight:600; color:#5A6472}
.ask-in i{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#9DB4EE; color:#FFFFFF}
.ask-in i svg{width:15px; height:15px}
@media (max-width:560px){ .ask{padding-top:20px} .ask-row li{width:232px; font-size:.86rem} .ask-in{margin-inline:14px} }
@media (prefers-reduced-motion: reduce){ .ask-row{animation:none} .ask-rows{overflow-x:auto} }

/* kretsloppet: each step points to where it lives in Saga */
.lp-more{display:inline-flex; align-items:center; gap:.4em; margin-top:16px; font-size:.92rem; color:var(--accent); text-decoration:none}
.lp-more:hover{text-decoration:underline; text-underline-offset:4px}
/* Översikt: Saga's Home, as the app shows it */
.sh-win{margin-top:48px}
.sh-win .scr{height:auto}
.ui-home{font-size:calc(100cqw / 90); height:52em; display:grid; grid-template-columns:17.5em minmax(0,1fr); background:#F7F7F5; overflow:hidden}
.sh-side{display:flex; flex-direction:column; min-width:0; padding:1.4em 0 1.1em; background:#1B2636; color:#DCE2EA}
.sh-side svg{width:1.3em; height:1.3em; flex:none}
.sh-top{display:flex; justify-content:space-between; align-items:flex-start; padding:0 1.2em 1.1em; border-bottom:1px solid rgba(255,255,255,.1)}
.sh-top .u-mark{font-size:1.3em; padding:0; margin-left:-.1em}
.sh-co{margin-top:.55em; font-size:.8em; color:#AEB8C5}
.sh-bell{color:#AEB8C5; padding-top:.4em}
.sh-it{display:flex; align-items:center; gap:.8em; padding:.8em 1.4em; font-size:.95em}
.sh-sep{height:1px; margin:0 .8em; background:rgba(255,255,255,.1)}
.sh-search{padding:.8em .8em .9em}
.sh-search b{display:flex; justify-content:space-between; align-items:center; padding:0 .45em .75em; font-size:.92em; font-weight:600; color:#FFFFFF}
.sh-search b svg{width:1.1em; height:1.1em}
.sh-box{display:flex; align-items:center; gap:.6em; padding:.8em .85em; border-radius:.7em; background:#22324A; border:1px solid rgba(255,255,255,.16); font-size:.88em; color:#C9D2DD}
.sh-box svg{width:1.15em; height:1.15em}
.sh-box kbd{margin-left:auto; font:500 .82em var(--f-app); color:#AEB8C5}
.sh-nav{display:grid; gap:.15em; padding:.7em .7em}
.sh-nav > div{display:grid; grid-template-columns:1.4em minmax(0,1fr); gap:.75em; padding:.62em .75em; border-radius:.75em}
.sh-nav > div.on{background:#2C3A50}
.sh-nav svg{margin-top:.1em}
.sh-nav b{display:block; font-size:.95em; font-weight:600; color:#FFFFFF}
.sh-nav small{display:block; margin-top:.25em; font-size:.76em; line-height:1.35; color:#9AA6B5}
.sh-foot{display:grid; gap:.9em; margin-top:auto; padding:.9em 1.4em 0; border-top:1px solid rgba(255,255,255,.1); font-size:.88em}
.sh-main{position:relative; min-width:0; overflow:hidden; padding:0 4.6em 0 5em; color:#141B24}
.sh-scroll{padding:3.2em 0 3em; will-change:transform}
.sh-h1{font-size:3.1em; font-weight:700; letter-spacing:-.045em; line-height:1}
.sh-in{margin:2.4em 0 0 3.4em}
.sh-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1em}
.sh-card{padding:1.3em 1.4em 1.2em; border-radius:1.2em; background:#FFFFFF; border:1px solid #E5E6E3}
.sh-card > small{font-size:.86em; color:#5A6472}
.sh-card > b{display:block; margin-top:.6em; font-size:1.75em; font-weight:500; letter-spacing:-.03em; line-height:1.1}
.sh-card > p{margin-top:.55em; font-size:.84em; color:#5A6472}
.sh-bar{height:.45em; margin-top:1.3em; border-radius:9px; background:#EEEEEA; overflow:hidden}
.sh-bar i{display:block; height:100%; border-radius:inherit; background:#1D5FD6}
.sh-link{margin-top:1.1em; font-size:.86em; font-weight:600; color:#3A424D; white-space:nowrap}
.sh-rings{display:flex; align-items:center; gap:.8em; margin-top:1em}
.sh-rings svg{width:2.1em; height:2.1em}
.sh-rings .sh-link{margin:0 0 0 auto}
.sh-today{margin-top:2em; padding:2.2em 2.4em; border-radius:1.6em; background:#1B2636; color:#FFFFFF; box-shadow:0 1.6em 3em -1.6em rgba(10,16,26,.55)}
.sh-today > small{font-size:.9em; font-weight:600; color:#C9D2DD}
.sh-th{margin-top:.7em; font-size:2.2em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.sh-today > p{max-width:48em; margin-top:.8em; font-size:1em; line-height:1.55; color:#C9D2DD}
.sh-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5em; margin-top:1.6em}
.sh-cols small{display:block; font-size:.82em; color:#9AA6B5}
.sh-cols b{display:block; margin-top:.35em; font-size:1em; font-weight:600}
.sh-btn{display:inline-block; margin-top:1.6em; padding:.85em 1.4em; border-radius:.75em; background:#FFFFFF; color:#141B24; font-size:.98em; font-weight:600}
.sh-sec{margin-top:2.6em; padding:2em 2.2em .6em; border-radius:1.6em; background:#FFFFFF; border:1px solid #E5E6E3}
.sh-ph{font-size:2.1em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.sh-sub, .sh-sh p{margin-top:.55em; font-size:.92em; color:#5A6472}
.sh-sub, .sh-sh{padding-bottom:1.2em; border-bottom:1px solid #E5E6E3}
.sh-sh{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.sh-sh .sh-link{margin-top:.6em}
.sh-op{padding:1.3em 0 1.2em}
.sh-op b{display:block; font-size:.95em; font-weight:600}
.sh-op small{display:block; margin-top:.3em; font-size:.86em; color:#5A6472}
.sh-big{margin-top:.5em; font-size:2.8em; font-weight:500; letter-spacing:-.03em; line-height:1.1}
.sh-30{display:block; font-size:.86em; color:#5A6472; padding-bottom:.6em}
.sh-row.sh-date{grid-template-columns:5em minmax(0,1fr)}
.sh-date span{font-size:.86em; color:#5A6472}
.sh-you{margin-top:1.4em; text-align:right}
.sh-you small{display:block; font-size:.66em; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5A6472}
.sh-you p{display:inline-block; margin-top:.45em; padding:.7em 1.1em; border-radius:1.1em; background:#2457E0; color:#FFFFFF; font-size:.92em}
.sh-ans{margin-top:1em; max-width:44em; font-size:.95em; line-height:1.5}
.sh-cmp{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.4em .8em; margin:1.5em 0 1.6em; padding:.9em 1em .8em; border:1px solid #E5E6E3; border-radius:1.1em; background:#FAFAF8}
.sh-cmp span{grid-column:1 / -1; min-height:2.4em; font-size:.88em; color:#8A929C}
.sh-cmp small{font-size:.7em; font-weight:600; color:#5A6472}
.sh-cmp i{width:2.3em; height:2.3em; border-radius:50%; display:grid; place-items:center; background:#9DB4EE; color:#FFFFFF}
.sh-cmp i svg{width:1.05em; height:1.05em}
.sh-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1em; align-items:center; padding:1.1em 0; border-bottom:1px solid #EEEEEA}
.sh-row:last-child{border-bottom:0}
.sh-sec > .sh-row > small{margin-top:0; white-space:nowrap}
.sh-row b{display:block; font-size:1em; font-weight:600}
.sh-row small{display:block; margin-top:.3em; font-size:.86em; color:#5A6472}
.sh-row .u-chip{font-size:.78em}
@container (max-width:760px){
  .ui-home{font-size:calc(100cqw / 30); height:54em; grid-template-columns:minmax(0,1fr)}
  .sh-sec > .sh-row, .sh-sec > .sh-row.sh-date{grid-template-columns:minmax(0,1fr); gap:.5em}
  .sh-row .u-chip{justify-self:start}
  .sh-sh .sh-link{display:none}
  .sh-side{display:none}
  .sh-main{padding:0 1.5em}
  .sh-scroll{padding-top:2em}
  .sh-in{margin-left:0}
  .sh-cards, .sh-cols{grid-template-columns:minmax(0,1fr)}
  .sh-today{padding:1.8em 1.6em}
}
/* more of Saga: a slim row of shortcuts to the other parts */
section.block:has(+ .more){padding-bottom:clamp(64px, 8vw, 104px)}
.more{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px 48px; padding-bottom:clamp(64px, 8vw, 104px)}
.more h2{font-size:clamp(1.5rem, 2.2vw, 1.9rem); line-height:1.1; letter-spacing:-.015em}
.more ul{display:flex; flex-wrap:wrap; gap:14px 40px; margin:0; padding:0; list-style:none}
.more a{display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:1rem}
.more .hub-ic{width:36px; height:36px; border-radius:10px}
.more .hub-ic svg{width:16px; height:16px}
.more .arr{color:var(--ink-3); transition:transform .2s ease, color .2s ease}
.more a:hover .hub-ic{border-color:var(--ink-3)}
.more a:hover .arr{color:var(--ink); transform:translateX(3px)}
@media (max-width:760px){ .more{flex-direction:column; align-items:flex-start} .more ul{flex-direction:column; gap:14px} }
/* Efterlevnadsarbete, hero: the ordered work list */
.wk-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.wk-cal{display:inline-flex; align-items:center; gap:.45em; margin-top:1.3em; padding:.5em .85em; border:1px solid #D9DCE0; border-radius:.6em; background:#FFFFFF; font-size:.72em; font-weight:600}
.wk-cal svg{width:1.2em; height:1.2em}
.wk-list{counter-reset:wk}
.wk-r{display:grid; grid-template-columns:1.4em minmax(0,1fr) auto; gap:.7em; align-items:center; margin-top:.45em; padding:.6em .8em; border:1px solid #E3E6EA; border-radius:.8em; background:#F6F7F4; counter-increment:wk}
.wk-n{font-size:.7em; font-weight:700; color:#8A929C; text-align:center}
.wk-n::before{content:counter(wk)}
.wk-r b{display:block; font-size:.76em; font-weight:600}
.wk-r small{display:block; font-size:.64em; color:#5A6472}
.hs .wk-new, .hs .wk-c6, .hs.done .wk-c4{display:none}
.hs.done .wk-c6{display:inline}
.hs.done .wk-new{display:grid; background:#EDF3FD; border-color:#C9DAF6; animation:wk-in .6s ease}
@keyframes wk-in{from{opacity:0; transform:translateY(-.4em)}}

/* Efterlevnadsarbete: the compliance calendar, as Saga shows it */
.cal .scr, .fd .scr{height:auto}
.ui-cal{font-size:calc(100cqw / 60); height:auto; padding:1.9em 2em 2em; background:#F7F7F5; color:#141B24}
.cc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1.4em}
.cc-h1{font-size:2em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.cc-sub{max-width:40em; margin-top:.5em; font-size:.8em; line-height:1.45; color:#5A6472}
.cc-btns{flex:none; display:flex; gap:.6em}
.cc-btns span{padding:.6em 1.05em; border:1px solid #D9DCE0; border-radius:.6em; background:#FFFFFF; font-size:.8em; font-weight:600; white-space:nowrap}
.cc-btns .pri{border-color:#2457E0; background:#2457E0; color:#FFFFFF}
.cc-seg{display:inline-flex; gap:.15em; margin-top:1.3em; padding:.3em; border:1px solid #E3E6EA; border-radius:99px; background:#FFFFFF}
.cc-cats{display:flex; gap:.15em; margin-top:.7em; padding:.3em; border:1px solid #E3E6EA; border-radius:1.2em; background:#FFFFFF; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent)}
.cc-seg > span, .cc-cats > span{flex:none; display:inline-flex; align-items:center; gap:.45em; padding:.45em .9em; border-radius:99px; font-size:.78em; color:#5A6472; white-space:nowrap}
.cc-seg > span.on, .cc-cats > span.on{background:#1B2636; color:#FFFFFF}
.cc-seg i, .cc-cats i{min-width:1.7em; padding:.1em .45em; border-radius:99px; background:#EDEEEA; color:#5A6472; font-size:.85em; font-style:normal; text-align:center}
.cc-seg .on i, .cc-cats .on i{background:#3A4658; color:#FFFFFF}
.cc-card{margin-top:1em; border-radius:1em; background:#FFFFFF; border:1px solid #E3E6EA; overflow:hidden}
.cc-ch{display:flex; justify-content:space-between; align-items:center; padding:.9em 1.2em; border-bottom:1px solid #E3E6EA}
.cc-ch b{font-size:.95em; font-weight:700}
.cc-ch small{font-size:.75em; color:#5A6472}
.cc-g{display:flex; justify-content:space-between; padding:.9em 1.9em .35em; font-size:.6em; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#5A6472}
.cc-r{display:grid; grid-template-columns:3.6em minmax(0,1fr) auto 1em; gap:.9em; align-items:center; padding:.45em 1.2em}
.cc-d{display:grid; justify-items:center; padding:.4em 0 .35em; border:1px solid #E3E6EA; border-radius:.6em; background:#F3F4F1}
.cc-d b{font-size:1.05em; font-weight:700; line-height:1}
.cc-d small{margin-top:.3em; font-size:.48em; letter-spacing:.08em; color:#5A6472; white-space:nowrap}
.cc-t b{display:block; font-size:.86em; font-weight:700; letter-spacing:-.01em}
.cc-t small{display:block; margin-top:.15em; font-size:.72em; color:#5A6472}
.cc-chips{display:flex; gap:.4em}
.cc-chips span{padding:.25em .7em; border:1px solid; border-radius:99px; font-size:.68em; font-weight:500; white-space:nowrap}
.cc-chips .st{background:#EDF2FD; border-color:#C9D6F6; color:#1D3F8F}
.cc-chips .in{background:#EEF0F2; border-color:#DCDFE3; color:#3A424D}
.cc-chips .ct{background:#F4EEF9; border-color:#E2D3F0; color:#5B3B8A}
.cc-chips .ok{background:#E9F6EE; border-color:#C7E8D3; color:#1F8A4C}
.cc-chips .od{background:#FBE7E5; border-color:#F2C9C4; color:#B3261E}
.cc-chev{font-size:.85em; color:#5A6472}
.cc-r:last-child{padding-bottom:1em}
@container (max-width:520px){
  .ui-cal{font-size:calc(100cqw / 30); padding:1.4em 1.2em 1.5em}
  .cc-top{flex-direction:column; gap:.9em}
  .cc-cats, .cc-chev, .cc-chips span:first-child{display:none}
  .cc-seg{max-width:100%; overflow:hidden}
  .cc-r{grid-template-columns:3.2em minmax(0,1fr) auto; padding:.45em .9em}
  .cc-g{padding-inline:1.4em}
}

/* Efterlevnadsarbete: findings and remediation, as Saga shows it, with the event history growing */
.fd{position:relative; padding:0 0 3.5em}
.fd .scr{height:auto}
.ui-fd{font-size:calc(100cqw / 56); height:auto; padding:1.8em 2em 2.2em; background:#F7F7F5; color:#141B24}
.fr-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1.2em}
.fr-h1{font-size:2em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.fr-sub{max-width:24em; margin-top:.5em; font-size:.8em; line-height:1.45; color:#5A6472}
.fr-acts{flex:none; display:flex; gap:.5em}
.fr-acts span, .fr-btn{padding:.55em .95em; border:1px solid #D9DCE0; border-radius:.6em; background:#FFFFFF; font-size:.76em; font-weight:600; white-space:nowrap}
.fr-acts .pri{border-color:#2457E0; background:#2457E0; color:#FFFFFF}
.fr-tabs{display:flex; gap:1.8em; margin-top:1.2em; border-bottom:1px solid #E3E6EA}
.fr-tabs span{margin-bottom:-1px; padding:.5em .25em .6em; font-size:.88em; color:#6A707A}
.fr-tabs span.on{color:#141B24; box-shadow:inset 0 -2px 0 #2457E0}
.fr-pills{display:flex; gap:.5em; margin-top:1em}
.fr-pills > span{padding:.45em .85em; border:1px solid #D9DCE0; border-radius:.6em; background:#FFFFFF; font-size:.76em; color:#5A6472; white-space:nowrap}
.fr-pills > span.on{border-color:#C9D6F6; background:#EDF2FD; color:#1D5FD6}
.fr-pills i{font-style:normal}
.fr-card{margin-top:1em; border-radius:1em; background:#FFFFFF; border:1px solid #E3E6EA; overflow:hidden}
.fr-ch{display:flex; justify-content:space-between; align-items:center; padding:.8em 1.1em; border-bottom:1px solid #E3E6EA}
.fr-ch b{font-size:.95em; font-weight:700}
.fr-ch > span{display:flex; align-items:center; gap:.8em}
.fr-ch small{font-size:.75em; color:#5A6472}
.fr-r{display:grid; grid-template-columns:minmax(0,2fr) .85fr 1fr .95fr .65fr 5.6em; gap:.7em; align-items:center; padding:.55em 1.1em; border-top:1px solid #EEEFEC; transition:background .5s ease}
.fr-th{border-top:0; background:#F3F4F1; font-size:.72em; color:#5A6472}
.fr-r > b{font-size:.78em; font-weight:600; line-height:1.3}
.fr-r > span{font-size:.74em; color:#5A6472}
.fr-r .u-chip{font-size:.9em}
.fr-r .fr-btn{font-size:.9em; color:#141B24}
.fr-a{background:#F4F8FF}
.fr-done{color:#1F8A4C; font-weight:700}
.fd .ph1, .fd .ph2, .fd[data-p="1"] .ph0, .fd[data-p="2"] .ph0, .fd[data-p="2"] .ph1{display:none}
.fd[data-p="1"] .ph1, .fd[data-p="2"] .ph2{display:inline}
.eh{position:absolute; right:-28px; bottom:0; width:38%; padding:.2em 0 .6em; border-radius:14px; background:#FFFFFF; font-family:var(--f-app); color:#141B24;
  box-shadow:0 0 0 1px #E3E6EA, 0 24px 48px -24px rgba(8,14,24,.35)}
.eh-h{display:flex; justify-content:space-between; align-items:center; gap:.6em; padding:.75em 1em; border-bottom:1px solid #E3E6EA}
.eh-h b{font-size:.84rem; font-weight:700}
.eh-h span{padding:.2em .65em; border:1px solid #DCE3D6; border-radius:99px; background:#EEF2EA; font-size:.68rem; color:#4E5A48; white-space:nowrap}
.eh-l{padding:.4em 1em 0}
.eh-e{display:none; grid-template-columns:.6em minmax(0,1fr); gap:.7em; padding:.45em 0}
.eh-e.on{display:grid; animation:eh-in .5s ease}
@keyframes eh-in{from{opacity:0; transform:translateY(-.3em)}}
.eh-e i{width:.55em; height:.55em; margin-top:.35em; border-radius:50%; background:#2457E0}
.eh-e b{display:block; font-size:.8rem; font-weight:700}
.eh-e small{display:block; font-size:.7rem; line-height:1.4; color:#5A6472}
@container (max-width:520px){
  .ui-fd{font-size:calc(100cqw / 30); padding:1.4em 1.2em 1.5em}
  .fr-top{flex-direction:column; gap:.8em}
  .fr-sub{max-width:none}
  .fr-pills > span:nth-child(n+4){display:none}
  .fr-r{grid-template-columns:minmax(0,1fr) auto}
  .fr-r > :nth-child(2), .fr-r > :nth-child(4), .fr-r > :nth-child(5), .fr-r > :nth-child(6){display:none}
  .fr-ch > span small{display:none}
}
@media (max-width:980px){ .fd{padding-bottom:0} .eh{position:static; width:auto; margin-top:14px} }
/* Granskning och bevis, hero: the Proof page, as Saga shows it */
.pv-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.pv-top .hb-sub{max-width:27em}
.pv-acts{flex:none; display:grid; justify-items:end; gap:.55em; margin-top:.35em}
.pv-link{font-size:.7em; color:#1D5FD6; text-decoration:underline; text-underline-offset:.15em}
.pv-add{padding:.5em .9em; border-radius:.55em; background:#2457E0; color:#FFFFFF; font-size:.7em; font-weight:600}
.pv-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6em; margin-top:1em}
.pv-stats > div{padding:.65em .8em; border:1px solid #E3E6EA; border-radius:.8em; background:#FFFFFF}
.pv-stats small{display:block; font-size:.62em; color:#5A6472}
.pv-stats b{display:block; margin:.15em 0 .1em; font-size:1.35em; font-weight:700; letter-spacing:-.02em}
.pv-tabs{display:flex; gap:.4em; margin-top:.9em}
.pv-tabs > span{padding:.4em .75em; border:1px solid #D9DCE0; border-radius:.55em; background:#FFFFFF; font-size:.68em; font-weight:500}
.pv-tabs > span.on{border-color:#2457E0; background:#2457E0; color:#FFFFFF}
.pv-stats i, .pv-tabs i{font-style:normal}
.pv-card{margin-top:.8em}
.pv-r{display:grid; grid-template-columns:minmax(0,1fr) auto auto 4.4em; gap:.6em; align-items:center; margin-top:.45em; padding:.55em .7em; border:1px solid #E3E6EA; border-radius:.8em; background:#F6F7F4; transition:background .5s ease, border-color .5s ease}
.pv-r b{display:block; font-size:.72em; font-weight:600}
.pv-r small{display:block; margin-top:.1em; font-size:.6em; color:#5A6472; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-r u{color:#1D5FD6; text-underline-offset:.15em}
.pv-ev{max-width:10em; padding:.25em .6em; border-radius:99px; font-size:.58em; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-ev.file{border:1px solid #DCDFE3; background:#EEF0F2; color:#3A424D}
.pv-ev.warn{border:1px solid #F2DFA7; background:#FBF3DC; color:#8A5A0B}
.pv-r .u-chip{font-size:.6em}
.pv-pp{justify-self:end; padding:.35em .6em; border:1px solid #D9DCE0; border-radius:.5em; background:#FFFFFF; font-size:.6em; font-weight:600}
.pv-part{justify-self:end; font-size:.58em; line-height:1.3; color:#5A6472; text-align:right}
.hs .pv-b, .hs .pv-r .st-b, .hs.done .pv-a, .hs.done .pv-r .st-a{display:none}
.hs.done .pv-b{display:inline}
.hs.done .pv-r .st-b{display:inline-block}
.hs.done .pv-ok{background:#EEF8F1; border-color:#C7E8D3}

/* Granskning och bevis: approving an exact version, as a fingerprint drawn from the policy's own sentences */
.fp{position:relative; aspect-ratio:5 / 4; border-radius:22px; overflow:hidden; container-type:inline-size; color:#E9EDF2; font-family:var(--f-app);
  background:radial-gradient(70% 60% at 50% 46%, #22324A, #141D2A 70%, #0E1520); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.fp-svg{position:absolute; left:50%; top:50%; height:90%; transform:translate(-50%,-52%)}
.fp-r{fill:none; stroke:rgba(190,204,224,.42); stroke-width:1.05; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0}
.fp-t{font:500 5.1px var(--f-app); letter-spacing:.02em}
.fp-t .lo{fill:rgba(190,204,224,.5)}
.fp-t .hl{fill:#9DBBFF}
.fp-t .fp-sep{fill:rgba(190,204,224,.35)}
.fp-ring{fill:none; stroke:rgba(157,187,255,.32); stroke-width:.9; stroke-dasharray:1; stroke-dashoffset:0}
.fp-rail{position:absolute; left:6%; top:7%; display:flex; gap:1.1em; font:500 calc(100cqw / 52) var(--f-mono); color:rgba(190,204,224,.5)}
.fp-rail span{display:inline-flex; align-items:center; gap:.45em}
.fp-rail i{width:.55em; height:.55em; border-radius:50%; background:rgba(190,204,224,.35)}
.fp-rail .on{color:#FFFFFF}
.fp-rail .on i{background:#9DBBFF; box-shadow:0 0 0 .3em rgba(157,187,255,.18)}
.fp-tag{position:absolute; right:5%; bottom:6%; display:grid; gap:.3em; padding:1.1em 1.25em; border-radius:14px; font-size:calc(100cqw / 44);
  background:rgba(14,21,32,.72); border:1px solid rgba(157,187,255,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.fp-tag small{font-size:.66em; color:rgba(190,204,224,.75)}
.fp-tag b{font:500 1.5em/1.05 var(--f-display); letter-spacing:-.01em; color:#FFFFFF}
.fp-tag code{font:500 .62em var(--f-mono); color:#9DBBFF}
.fp-ok{margin-top:.25em; font-size:.7em; font-weight:600; color:#8FD3A8}
@media (max-width:560px){ .fp-tag{font-size:calc(100cqw / 38); right:3.5%; bottom:3.5%; padding:.8em .9em} .fp-rail{font-size:calc(100cqw / 34)} }
/* drawn when it comes into view; without motion it is simply there */
.fp.armed .fp-r, .fp.armed .fp-ring{stroke-dashoffset:1}
.fp.armed .fp-t, .fp.armed .fp-tag, .fp.armed .fp-ok{opacity:0}
.fp.armed .fp-tag{transform:translateY(.6em)}
.fp.armed .fp-rail .on{color:rgba(190,204,224,.5)}
.fp.armed .fp-rail .on i{background:rgba(190,204,224,.35); box-shadow:none}
.fp.go .fp-r{stroke-dashoffset:0; transition:stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1) var(--d)}
.fp.go .fp-t{opacity:1; transition:opacity 1s ease var(--d)}
.fp.go .fp-ring{stroke-dashoffset:0; transition:stroke-dashoffset 1.4s ease 1.9s}
.fp.go .fp-rail .on{color:#FFFFFF; transition:color .5s ease 1.7s}
.fp.go .fp-rail .on i{background:#9DBBFF; box-shadow:0 0 0 .3em rgba(157,187,255,.18); transition:background .5s ease 1.7s, box-shadow .5s ease 1.7s}
.fp.go .fp-tag{opacity:1; transform:none; transition:opacity .7s ease 2.5s, transform .7s ease 2.5s}
.fp.go .fp-ok{opacity:1; transition:opacity .6s ease 3.3s}

/* Granskning och bevis: the decision log, as Saga shows it */
.dl .scr{height:auto}
.ui-dl{font-size:calc(100cqw / 58); height:auto; padding:1.8em 2em 2em; background:#F7F7F5; color:#141B24}
.dg-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1.2em}
.dg-h1{font-size:2em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.dg-sub{max-width:34em; margin-top:.5em; font-size:.78em; line-height:1.45; color:#5A6472}
.dg-acts{flex:none; display:grid; gap:.5em; justify-items:end}
.dg-acts span{padding:.55em .95em; border:1px solid #D9DCE0; border-radius:.6em; background:#FFFFFF; font-size:.76em; font-weight:600; white-space:nowrap}
.dg-acts .pri{border-color:#2457E0; background:#2457E0; color:#FFFFFF}
.dg-seg{display:inline-flex; gap:.15em; margin-top:1em; padding:.3em; border:1px solid #E3E6EA; border-radius:99px; background:#FFFFFF}
.dg-seg span{padding:.45em .95em; border-radius:99px; font-size:.78em; color:#5A6472}
.dg-seg b{margin-left:.35em; font-weight:700}
.dg-seg .on{background:#1B2636; color:#FFFFFF}
.dg-stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:.9em; border:1px solid #E3E6EA; border-radius:1em; background:#FFFFFF; overflow:hidden}
.dg-stats > div{padding:.75em 1em; border-left:1px solid #E3E6EA}
.dg-stats > div:first-child{border-left:0}
.dg-stats small{display:block; font-size:.68em; color:#5A6472}
.dg-stats b{display:block; margin-top:.25em; font-size:1.3em; font-weight:700}
.dg-card{margin-top:.9em; border:1px solid #E3E6EA; border-radius:1em; background:#FFFFFF; overflow:hidden}
.dg-ch{display:flex; justify-content:space-between; align-items:center; gap:1em; padding:.85em 1.1em; border-bottom:1px solid #E3E6EA}
.dg-ch b{display:block; font-size:.92em; font-weight:700}
.dg-ch small{display:block; margin-top:.15em; font-size:.7em; color:#5A6472}
.dg-n{padding:.2em .7em; border:1px solid #E3E6EA; border-radius:99px; background:#F1F2EE; font-size:.68em; color:#5A6472; white-space:nowrap}
.dg-rec{display:grid; grid-template-columns:2.3em minmax(0,1fr) auto; gap:.8em; align-items:start; padding:.85em 1.1em; border-top:1px solid #EEEFEC}
.dg-rec:first-of-type{border-top:0}
.dg-ic{width:2.3em; height:2.3em; display:grid; place-items:center; border-radius:.6em; background:#EDF2FD; color:#1D5FD6; font-size:.95em; font-weight:700}
.dg-main b{display:block; font-size:.82em; font-weight:700; letter-spacing:-.01em}
.dg-chips, .dg-tags{display:flex; flex-wrap:wrap; gap:.35em; margin-top:.4em}
.dg-chips span, .dg-tags span{padding:.18em .6em; border:1px solid #E3E6EA; border-radius:99px; background:#F1F2EE; font-size:.62em; color:#4A5361; white-space:nowrap}
.dg-chips .dg-cat.ap{border-color:#C9D6F6; background:#EDF2FD; color:#1D3F8F}
.dg-chips .dg-cat.rk{border-color:#F2DFA7; background:#FBF3DC; color:#8A5A0B}
.dg-chips .dg-cat.cl{border-color:#E2D3F0; background:#F4EEF9; color:#5B3B8A}
.dg-main p{margin-top:.45em; font-size:.7em; line-height:1.45; color:#5A6472}
.dg-read{padding:.45em .8em; border:1px solid #D9DCE0; border-radius:.55em; background:#FFFFFF; font-size:.68em; font-weight:600; white-space:nowrap}
@container (max-width:520px){
  .ui-dl{font-size:calc(100cqw / 30); padding:1.4em 1.2em 1.5em}
  .dg-top{flex-direction:column; gap:.7em}
  .dg-acts{grid-auto-flow:column; justify-items:start}
  .dg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dg-stats > div:nth-child(3){border-left:0}
  .dg-stats > div:nth-child(n+3){border-top:1px solid #E3E6EA}
  .dg-rec{grid-template-columns:2.3em minmax(0,1fr)}
  .dg-read, .dg-tags span:nth-child(n+3){display:none}
}
/* Dela, hero: the Reports page, as Saga shows it */
.rl-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.rl-top .hb-sub{max-width:26em}
.rl-acts{flex:none; display:flex; gap:.45em; margin-top:.3em}
.rl-acts span{padding:.45em .8em; border:1px solid #D9DCE0; border-radius:.55em; background:#FFFFFF; font-size:.66em; font-weight:600; white-space:nowrap}
.rl-acts .pri{border-color:#2457E0; background:#2457E0; color:#FFFFFF}
.rl-lbl{margin:1.1em 0 .5em; font-size:.6em; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#5A6472}
.rl-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55em}
.rl-card{display:flex; flex-direction:column; align-items:flex-start; padding:.75em .85em .7em; border:1px solid #E3E6EA; border-radius:.9em; background:#FFFFFF; transition:border-color .5s ease, background .5s ease}
.rl-canon, .rl-st{align-self:stretch; padding:.18em .6em; border:1px solid #E3E6EA; border-radius:99px; background:#EEF0EA; font-size:.56em; color:#5A6472}
.rl-st{border-color:#F2DFA7; background:#FBF6E6; color:#8A5A0B}
.rl-st.pub{border-color:#C7E8D3; background:#EEF8F1; color:#1F8A4C}
.rl-card b{margin-top:.5em; font-size:.8em; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.rl-card em{margin-top:.2em; font-size:.66em; font-style:normal; font-weight:600; color:#6A707A}
.rl-card small{margin-top:.35em; font-size:.56em; font-weight:500; color:#6A707A}
.rl-link{margin-top:.55em; font-size:.62em; color:#141B24}
.rl-btn{align-self:stretch; margin-top:.5em; padding:.35em; border:1px solid #D9DCE0; border-radius:.5em; font-size:.6em; text-align:center}
.hs .rl-live .st-b, .hs.done .rl-live .st-a{display:none}
.hs.done .rl-live .st-b{display:block}
.hs.done .rl-live{border-color:#C7E8D3; background:#F7FCF8}

/* Dela: compliance rooms, as Saga shows them */
.cr .scr{height:auto}
.ui-cr{font-size:calc(100cqw / 56); height:auto; padding:1.8em 2em 2em; background:#F7F7F5; color:#141B24}
.cr-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1.2em}
.cr-h1{font-size:2em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.cr-sub{max-width:32em; margin-top:.5em; font-size:.78em; line-height:1.45; color:#5A6472}
.cr-acts{flex:none; display:grid; gap:.45em; justify-items:start}
.cr-acts span{padding:.5em .9em; border:1px solid #D9DCE0; border-radius:.6em; background:#FFFFFF; font-size:.72em; font-weight:600; white-space:nowrap}
.cr-acts .pri{border-color:#2457E0; background:#2457E0; color:#FFFFFF}
.cr-info{display:grid; grid-template-columns:1fr 1fr; gap:1.2em; margin-top:1em; padding:.9em 1.1em; border:1px solid #E3E6EA; border-radius:1em; background:#FFFFFF}
.cr-info b{display:block; font-size:.78em; font-weight:700}
.cr-info p{margin-top:.3em; font-size:.68em; line-height:1.45; color:#5A6472}
.cr-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6em; margin-top:.8em}
.cr-room{padding:.85em 1em .75em; border:1px solid #E3E6EA; border-radius:1em; background:#FFFFFF; transition:border-color .5s ease, background .5s ease}
.cr-rh{display:flex; flex-direction:column; align-items:flex-start; gap:.4em}
.cr-rh b{font-size:.8em; font-weight:700; letter-spacing:-.01em; line-height:1.25}
.cr-chips{display:flex; flex-wrap:wrap; gap:.3em}
.cr-chips span{padding:.18em .55em; border:1px solid #E3E6EA; border-radius:99px; background:#EEF0EA; font-size:.56em; color:#5A6472; white-space:nowrap}
.cr-chips .cr-kind.int{border-color:#F2DFA7; background:#FBF6E6; color:#8A5A0B}
.cr-chips .pub{border-color:#C7E8D3; background:#EEF8F1; color:#1F8A4C}
.cr-topic{margin-top:.35em; font-size:.68em; color:#5A6472}
.cr-scope{margin-top:.5em; font-size:.66em; color:#5A6472}
.cr-ft{display:flex; justify-content:space-between; gap:.6em; margin-top:.6em; padding-top:.55em; border-top:1px solid #EEEFEC; font-size:.62em; color:#5A6472}
.cr-open{color:#1D5FD6; font-weight:500; white-space:nowrap}
.cr .cr-live .st-b, .cr.got .cr-live .st-a{display:none}
.cr.got .cr-live .st-b{display:inline}
.cr.got .cr-live{border-color:#C7E8D3; background:#F7FCF8}
@container (max-width:520px){
  .ui-cr{font-size:calc(100cqw / 30); padding:1.4em 1.2em 1.5em}
  .cr-top{flex-direction:column; gap:.7em}
  .cr-acts{grid-auto-flow:column}
  .cr-info, .cr-grid{grid-template-columns:minmax(0,1fr)}
  .cr-room:nth-child(n+3){display:none}
}

/* Dela: the board gets one page; every figure is footnoted, with a straight line down to its record in Saga. A still image. */
.bd{position:relative; padding:5.5% 6% 5%; border-radius:22px; overflow:hidden; container-type:inline-size; color:#E9EDF2; font-family:var(--f-app);
  background:radial-gradient(85% 60% at 50% 32%, #22324A, #141D2A 68%, #0E1520); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.bd::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(190,204,224,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(190,204,224,.06) 1px, transparent 1px);
  background-size:26px 26px; background-position:center; -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent); mask-image:radial-gradient(70% 60% at 50% 45%, #000, transparent)}
.bd-doc{position:relative; z-index:1; padding:4.4% 5.2% 3.4%; border-radius:8px; background:#FFFFFF; color:#141B24; font:400 calc(100cqw / 50) var(--f-app);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.3), 0 14px 28px -10px rgba(0,0,0,.5), 0 44px 80px -30px rgba(0,0,0,.7)}
.bd-hd{display:flex; justify-content:space-between; gap:1em; padding-bottom:.75em; border-bottom:1px solid #E6E8EC; font-size:.62em; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#6B727C}
.bd-hd span:first-child{color:#141B24}
.bd-t{margin-top:.6em; font:500 2.75em/1 var(--f-display); letter-spacing:-.015em; color:#0F1826}
.bd-sum{margin-top:.4em; font-size:.82em; line-height:1.45; color:#4A525D}
.bd-kpis{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5em; margin-top:1.1em}
.bd-kpi{padding-top:.75em; border-top:2px solid #E6E8EC}
.bd-num{display:flex; align-items:flex-start; gap:.45em}
.bd-num b{font:500 3.5em/.85 var(--f-display); letter-spacing:-.02em; color:#0F1826}
.bd-num small{margin-left:.12em; font-size:.56em}
.bd-fn{flex:none; width:1.55em; height:1.55em; display:inline-grid; place-items:center; border-radius:50%; border:1px solid #2457E0; color:#2457E0;
  font:600 .6em/1 var(--f-app); font-style:normal}
.bd-kpi > span{display:block; margin-top:.55em; font-size:.74em; color:#4A525D}
.bd-viz{display:flex; align-items:center; gap:.55em; height:1.7em; margin-top:.5em}
.bd-viz svg{height:100%; width:auto; overflow:visible}
.bd-viz em{font-style:normal; font-size:.66em; font-weight:600; color:#1F7A45; white-space:nowrap}
.bd-sp .ar{fill:url(#bdSpG)}
.bd-sp .ln{fill:none; stroke:#2457E0; stroke-width:1.5; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.bd-sp circle{fill:#2457E0; stroke:#FFFFFF; stroke-width:1.2}
.bd-bars rect{fill:#D5DAE1}
.bd-bars .now{fill:#2457E0}
.bd-pend{display:inline-flex; align-items:center; gap:.45em; padding:.3em .65em; border-radius:99px; background:#FBF3DC; color:#8A5A0B; font-size:.64em; font-weight:600; white-space:nowrap}
.bd-pend i{width:.5em; height:.5em; border-radius:50%; background:#C27A12}
.bd-row{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:1.7em; margin-top:1.3em}
.bd-h{display:block; margin-bottom:.45em; font-size:.6em; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#6B727C}
.bd-ar{display:grid; grid-template-columns:minmax(0,1fr) 30% 2.9em; gap:.9em; align-items:center; padding:.34em 0; border-top:1px solid #EEF0F2; font-size:.72em}
.bd-ar > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bd-ar small{margin-left:.55em; font-size:.88em; font-weight:600; color:#A5650C}
.bd-ar i{position:relative; height:3px; border-radius:2px; background:#E8EBEF; overflow:hidden}
.bd-ar i::after{content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--v) * 100%); border-radius:inherit; background:#1B2636}
.bd-ar.a i::after{background:#C27A12}
.bd-ar em{font-style:normal; font-weight:600; text-align:right}
.bd-ar.a em{color:#A5650C}
.bd-dec{display:flex; flex-direction:column; padding:.95em 1.1em; border-radius:6px; background:#0F1826; color:#FFFFFF}
.bd-dec small{font-size:.6em; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:#9DBBFF}
.bd-dec p{margin-top:.45em; font:500 1.12em/1.25 var(--f-display); letter-spacing:-.005em}
.bd-dec span{margin-top:auto; padding-top:.8em; font-size:.64em; color:rgba(233,237,242,.6)}
.bd-foot{display:flex; justify-content:space-between; gap:1em; margin-top:1.1em; padding-top:.65em; border-top:1px solid #E6E8EC; font-size:.6em; color:#8A9099}
.bd-under{position:relative; z-index:1}
.bd-th{display:block; width:100%; height:calc(100cqw / 10)}
.bd-th path{fill:none; stroke:rgba(157,187,255,.45); stroke-width:2}
.bd-srcs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1em; font-size:calc(100cqw / 50)}
.bd-src{display:flex; align-items:flex-start; gap:.65em; padding:.8em .85em; border-radius:10px; border:1px solid rgba(157,187,255,.16); background:rgba(255,255,255,.035)}
.bd-src .bd-fn{border-color:rgba(157,187,255,.6); color:#9DBBFF; font-size:.66em}
.bd-src small{display:block; font:500 .6em/1.2 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:#9DBBFF}
.bd-src span{display:block; margin-top:.3em; font-size:.72em; line-height:1.35; color:#E9EDF2}
@container (max-width:520px){
  .bd{padding:6% 6% 5.5%}
  .bd-th path{stroke-width:3}
  .bd-doc{font-size:calc(100cqw / 30); padding:5.5% 5.5% 4.5%}
  .bd-hd span:last-child, .bd-viz, .bd-areas{display:none}
  .bd-kpis{gap:.9em}
  .bd-num{gap:.3em}
  .bd-num b{font-size:2.6em}
  .bd-row{grid-template-columns:minmax(0,1fr)}
  .bd-foot span:last-child{display:none}
  .bd-srcs{font-size:calc(100cqw / 30); gap:.5em}
  .bd-src{flex-direction:column; gap:.4em; padding:.65em .6em}
}
/* Lösningar, Branscher: one Saga view per industry */
.ix .scr{height:auto}
.ui-ix{font-size:calc(100cqw / 56); height:auto; padding:1.7em 1.9em 1.9em; background:#F7F7F5; color:#141B24}
.ix-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1.2em}
.ix-co{font-size:.7em; font-weight:600; color:#5A6472}
.ix-h1{margin-top:.25em; font-size:2em; font-weight:700; letter-spacing:-.045em; line-height:1.05}
.ix-sub{max-width:34em; margin-top:.45em; font-size:.76em; line-height:1.45; color:#5A6472}
.ix-btn{flex:none; padding:.55em .95em; border-radius:.6em; background:#2457E0; color:#FFFFFF; font-size:.74em; font-weight:600; white-space:nowrap}
.ix-pills{display:flex; flex-wrap:wrap; gap:.4em; margin-top:1em}
.ix-pills span{padding:.4em .85em; border:1px solid #D9DCE0; border-radius:99px; background:#FFFFFF; font-size:.7em; color:#5A6472; white-space:nowrap}
.ix-pills .on{border-color:#1B2636; background:#1B2636; color:#FFFFFF}
.ix-pills b{margin-left:.3em; font-weight:700}
.ix-ban{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em .7em; margin-top:.9em; padding:.7em 1em; border-radius:.8em; background:#FBF3DC; border:1px solid #F2DFA7; color:#6B4708; font-size:.74em}
.ix-ban b{font-weight:700}
.ix-card{margin-top:.9em; border:1px solid #E3E6EA; border-radius:1em; background:#FFFFFF; overflow:hidden}
.ix-ch{display:flex; justify-content:space-between; align-items:center; gap:1em; padding:.8em 1.1em; border-bottom:1px solid #E3E6EA}
.ix-ch b{display:block; font-size:.88em; font-weight:700}
.ix-ch small{display:block; margin-top:.15em; font-size:.68em; color:#5A6472}
.ix-n{padding:.2em .7em; border:1px solid #E3E6EA; border-radius:99px; background:#F1F2EE; font-size:.66em; color:#5A6472; white-space:nowrap}
.ix-r{display:grid; grid-template-columns:2em minmax(0,1fr) auto 3.6em; gap:.8em; align-items:center; padding:.72em 1.1em; border-top:1px solid #EEEFEC}
.ix-ch + .ix-r{border-top:0}
.ix-main{min-width:0}
.ix-main b{display:block; font-size:.8em; font-weight:600; letter-spacing:-.005em}
.ix-main small{display:block; margin-top:.2em; font-size:.68em; color:#5A6472}
.ix-r .u-chip{font-size:.64em}
.ix-d{font-size:.68em; color:#5A6472; text-align:right; white-space:nowrap}
.ix-m{width:2em; height:2em; border-radius:50%; display:grid; place-items:center}
.ix-m svg{width:1em; height:1em}
.ix-m.ok{background:#E3F3E9; color:#1F8A4C}
.ix-m.gap{background:#FBE7E5; color:#B3261E}
.ix-m.wait{background:#F4ECE0; color:#A35B0E}
.ix-m.new{background:#E6EEFC; color:#1D5FD6}
.ix-m.no{background:#ECEEF1; color:#4A5361}
@container (max-width:520px){
  .ui-ix{font-size:calc(100cqw / 30); padding:1.3em 1.1em 1.4em}
  .ix-top{flex-direction:column; gap:.7em}
  .ix-sub, .ix-d, .ix-n, .ix-pills span:nth-child(n+3){display:none}
  .ix-r{grid-template-columns:2em minmax(0,1fr) auto; padding:.7em .9em}
  .ix-r:nth-child(n+5){display:none}
}
/* Lösningar, Översikt: the ways in with a live preview, the two ways Saga is used, and a band for getting started */
.sx-ix{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(28px,4.4vw,64px); margin-top:52px}
.sx-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.sx-list li{border-bottom:1px solid var(--line)}
.sx-list a{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr) 20px; gap:18px; align-items:center; padding:22px 2px; color:inherit; text-decoration:none}
.sx-list .hub-ic{width:40px; height:40px; border-radius:11px; color:var(--ink-3); transition:background .3s ease, border-color .3s ease, color .3s ease}
.sx-list b{display:block; font:500 1.7rem/1.05 var(--f-display); letter-spacing:-.015em; color:var(--ink-3); transition:color .3s ease}
.sx-list small{display:block; margin-top:6px; font-size:.92rem; line-height:1.5; color:var(--ink-3); transition:color .3s ease}
.sx-list .arr{color:var(--ink); opacity:0; transform:translateX(-6px); transition:opacity .3s ease, transform .3s ease}
.sx-list a > i{position:absolute; left:0; bottom:-1px; height:2px; width:calc(var(--p, 0) * 100%); background:var(--ink)}
.sx-list a.on b{color:var(--ink)}
.sx-list a.on small{color:var(--ink-2)}
.sx-list a.on .hub-ic{background:var(--btn); border-color:var(--btn); color:var(--btn-ink)}
.sx-list a.on .arr, .sx-list a:focus-visible .arr{opacity:1; transform:none}
.sx-pv{--pvpad:clamp(22px,2.8vw,34px); display:grid; min-height:420px; padding:var(--pvpad); border-radius:24px; background:var(--paper-2); border:1px solid var(--line); overflow:hidden}
.sx-pane{grid-area:1 / 1; display:flex; flex-direction:column; justify-content:center; min-width:0; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s}
.sx-pane.on{opacity:1; visibility:visible; transition:opacity .35s ease}
.sx-pane .st{opacity:0; transform:translateY(10px); transition:opacity 0s .4s, transform 0s .4s}
.sx-pane.on .st{opacity:1; transform:none; transition:opacity .5s ease calc(140ms + var(--k, 0) * 90ms), transform .5s ease calc(140ms + var(--k, 0) * 90ms)}
@media (max-width:900px){
  .sx-ix{grid-template-columns:minmax(0,1fr)}
  .sx-pv{min-height:0}
}
@media (max-width:520px){
}
.sx-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:52px}
.sx-p{--pad:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; padding:var(--pad) var(--pad) 0; border-radius:24px; background:var(--paper-2); border:1px solid var(--line); overflow:hidden}
.sx-p h3{font:500 clamp(1.7rem,2.4vw,2.15rem)/1.02 var(--f-display); letter-spacing:-.02em}
.sx-p > p{margin-top:10px; color:var(--ink-2); font-size:.96rem; line-height:1.55; max-width:44ch}
.sx-go{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin:14px 0 26px; color:var(--ink); font-size:.94rem; text-decoration:none}
.sx-go .arr{transition:transform .2s ease}
.sx-go:hover .arr{transform:translateX(3px)}
.sx-p.dk{background:radial-gradient(120% 80% at 85% 0%, #25364F, #182331 62%); border-color:rgba(255,255,255,.06); color:#F4F6F1}
.sx-p.dk > p{color:rgba(244,246,241,.72)}
.sx-p.dk .sx-go{color:#F4F6F1}
.sx-mini{margin-top:auto; border-radius:14px 14px 0 0; transform:translateY(1px)}
.sx-p .win{box-shadow:0 0 0 1px rgba(20,27,36,.08), 0 -10px 40px -24px rgba(8,14,24,.35)}
.sx-p.dk .win{box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 -12px 44px -20px rgba(0,0,0,.6)}
.sx-mini .scr{height:auto; overflow:hidden}
.ui-mini{height:auto; background:#F7F7F5; color:#141B24}
.ui-mini.hm, .ui-mini.pf{font-size:calc(100cqw / 50); padding:2.4em 2.5em 2.6em}
.pf-card:nth-child(n+5){display:none}
.hm .sh-h1{font-size:2.7em}
.hm .sh-in{margin:1.5em 0 0}
.hm .sh-cards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9em}
.hm .sh-card .sh-rings .sh-link{display:none}
.hm .sh-card{padding:1.1em 1.15em 1em}
.hm .sh-card > b{font-size:1.5em}
.hm .sh-today{margin-top:1.3em; padding:1.7em 1.9em}
.hm .sh-th{font-size:1.75em}
.pf-top{display:flex; justify-content:space-between; align-items:flex-start; gap:1em}
.pf-h1{font-size:2.7em; font-weight:700; letter-spacing:-.045em; line-height:1}
.pf-btn{flex:none; padding:.6em 1.05em; border:1px solid #D9DCE0; border-radius:.7em; background:#FFFFFF; font-size:.92em; font-weight:500}
.pf-sub{margin-top:.75em; max-width:44em; font-size:.92em; line-height:1.45; color:#5A6472}
.pf-h{margin-top:1.3em; font-size:1.45em; font-weight:700; letter-spacing:-.03em}
.pf-h span{margin-left:.15em; font-weight:500; color:#8A929C}
.pf-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9em; margin-top:.8em}
.pf-card{display:grid; grid-template-columns:4.6em minmax(0,1fr); gap:1em; align-items:start; padding:1.2em 1.2em 1.15em; border-radius:1.3em; background:#FFFFFF; border:1px solid #E5E6E3}
.pf-ring{position:relative; display:block; width:4.6em; height:4.6em}
.pf-ring svg{display:block; width:100%; height:100%}
.pf-ring span{position:absolute; inset:0; display:grid; place-items:center; font-size:.98em; font-weight:600}
.pf-card b{display:block; font-size:1.05em; font-weight:700; letter-spacing:-.02em}
.pf-st{display:block; margin-top:.45em; font-size:.84em; font-weight:600}
.pf-card small{display:block; margin-top:.6em; font-size:.76em; color:#5A6472}
.pf-chips{display:flex; flex-wrap:wrap; gap:.35em; margin-top:.45em}
.pf-chips .u-chip{font-size:.72em; font-weight:500; padding:.3em .75em; box-shadow:inset 0 0 0 1px currentColor}
@media (max-width:860px){ .sx-two{grid-template-columns:minmax(0,1fr)} }
@container (max-width:440px){
  .ui-mini.hm, .ui-mini.pf{font-size:calc(100cqw / 30); padding:1.8em 1.6em 0}
  .hm .sh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm .sh-card:nth-child(2){display:none}
  .pf-grid{grid-template-columns:minmax(0,1fr)}
  .pf-card:nth-child(n+3){display:none}
  .pf-sub{display:none}
}
.sx-band{padding-block:clamp(52px,6vw,80px); background:var(--paper-2); border-block:1px solid var(--line)}
.sx-band .sec-head .lede{margin-top:16px}
.sx-band + .page-cta{padding-top:clamp(88px,12vw,150px)}
.sx-steps{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; counter-reset:sx}
.sx-steps li{position:relative; counter-increment:sx}
.sx-steps li::before{content:counter(sx); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--paper); border:1px solid var(--line);
  font:500 1.2rem/1 var(--f-display); color:var(--ink)}
.sx-steps li:not(:last-child)::after{content:""; position:absolute; left:58px; right:-24px; top:21px; height:1px; background:var(--line)}
.sx-steps h3{margin-top:18px; font:500 clamp(1.5rem,2vw,1.75rem)/1.08 var(--f-display); letter-spacing:-.015em}
.sx-steps p{margin-top:8px; color:var(--ink-2); font-size:.96rem; line-height:1.55; max-width:34ch}
@media (max-width:760px){
  .sx-steps{grid-template-columns:minmax(0,1fr); gap:26px}
  .sx-steps li{padding-left:62px}
  .sx-steps li::before{position:absolute; left:0; top:0}
  .sx-steps li:not(:last-child)::after{left:21px; right:auto; top:50px; bottom:-22px; width:1px; height:auto}
  .sx-steps h3{margin-top:6px}
}
/* Lösningar, Översikt: Branscher as an accordion of the six industry photos */
.sx-pane.sx-full{margin:calc(var(--pvpad) * -1); justify-content:stretch}
.sxv-acc{display:flex; gap:3px; height:100%; min-height:420px; background:var(--paper-2); container-type:inline-size}
.sxv-s{position:relative; flex:1 1 0; min-width:0; overflow:hidden; transition:flex-grow .8s cubic-bezier(.65,0,.25,1)}
.sxv-s.on{flex-grow:7}
.sxv-s img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 7s ease-out}
.sxv-s.on img{transform:scale(1.04)}
.sxv-s::after{content:""; position:absolute; inset:0; z-index:1; background:rgba(12,18,27,.5); transition:background .7s ease}
.sxv-s.on::after{background:linear-gradient(to top, rgba(10,16,26,.92) 0%, rgba(10,16,26,.66) 26%, rgba(10,16,26,.18) 56%, rgba(10,16,26,0) 78%)}
.sxv-v{position:absolute; z-index:2; left:50%; bottom:18px; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg);
  color:#FFFFFF; font-size:.84rem; font-weight:500; letter-spacing:.04em; white-space:nowrap; transition:opacity .35s ease}
.sxv-s.on .sxv-v{opacity:0}
.sxv-cap{position:absolute; z-index:2; left:24px; bottom:22px; width:calc(58cqw - 48px); opacity:0; transition:opacity .3s ease}
.sxv-s.on .sxv-cap{opacity:1; transition:opacity .5s ease .35s}
.sxv-cap b{display:block; font:500 clamp(1.6rem,2.3vw,2rem)/1 var(--f-display); letter-spacing:-.015em; color:#FFFFFF; white-space:nowrap; text-shadow:0 1px 12px rgba(0,0,0,.35)}
.sxv-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.sxv-tags span{padding:5px 11px; border-radius:99px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#FFFFFF; font-size:.8rem; white-space:nowrap;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transform:translateY(6px)}
.sxv-s.on .sxv-tags span{opacity:1; transform:none; transition:opacity .45s ease calc(.5s + var(--k) * .1s), transform .45s ease calc(.5s + var(--k) * .1s)}
@media (max-width:600px){
  .sxv-acc{flex-direction:column; min-height:440px}
  .sxv-v{left:18px; top:50%; bottom:auto; writing-mode:horizontal-tb; transform:translateY(-50%)}
  .sxv-cap{left:20px; bottom:18px; width:calc(100cqw - 40px)}
}
/* Lösningar, Översikt: Regelverk, a wall of the real regulations Saga keeps track of */
.sxd{position:relative; height:100%; min-height:420px; overflow:hidden; background:radial-gradient(120% 90% at 50% 30%, #EEF1F4, #D8DEE5); container-type:inline-size}
.sxd-wall{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) perspective(1600px) rotateX(14deg) rotateZ(-6deg)}
.sxd-grid{display:grid; grid-template-columns:repeat(8, 15cqw); gap:1.6cqw 1.8cqw; transform:translate(1.5%, 2%)}
.sx-pane.on .sxd-grid{animation:sxd-pan 7.5s linear both}
@keyframes sxd-pan{from{transform:translate(2.5%, 3%)} to{transform:translate(-2.5%, -3%)}}
.sxd-doc{position:relative; font-size:1.05cqw; color:#1B2330}
.sxd-doc .pg{position:relative; aspect-ratio:1 / 1.414; overflow:hidden; padding:.9em .95em; background:#FFFFFF; border-radius:2px;
  box-shadow:0 0 0 1px rgba(20,30,45,.06), 0 1px 2px rgba(20,30,45,.12), 0 10px 22px -12px rgba(20,30,45,.45); transition:box-shadow 0s .4s, transform 0s .4s}
.sxd-doc .cap{display:block; margin-top:.75em; font-size:1.45em; font-weight:500; color:#3A4350; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sxd-doc .h{display:flex; justify-content:space-between; gap:.6em; padding-bottom:.45em; border-bottom:1px solid #1B2330; font-size:.62em; font-weight:500}
.sxd-doc .k{margin-top:1.1em; font-size:.98em; font-weight:700; letter-spacing:.01em; line-height:1.2}
.sxd-doc .ti{margin-top:.55em; font-size:.74em; line-height:1.35; color:#2A3240}
.sxd-doc p{margin-top:.9em; font-size:.5em; line-height:1.45; color:#5A6472}
.sxd-doc .ln{display:grid; gap:.45em; margin-top:.8em}
.sxd-doc .ln i{display:block; height:.32em; border-radius:1px; background:#D9DDE3}
.sxd-doc .ln i.s{width:62%}
.sxd-doc.eu .k{text-align:center}
.sxd-doc.eu .ti{text-align:center}
.sxd-doc.eu p{text-align:center}
.sxd-doc.sfs .h{justify-content:center; font:500 .78em var(--f-display); letter-spacing:.02em; border-bottom-width:2px}
.sxd-doc.sfs .k{text-align:center; font-size:.9em}
.sxd-doc.sfs .ti{text-align:center; font:600 .86em/1.3 var(--f-display)}
.sxd-doc.fs .pg{display:flex; flex-direction:column; color:#FFFFFF}
.sxd-doc.fs .h{border-bottom-color:rgba(255,255,255,.55); font-size:.6em}
.sxd-doc.fs .k{margin-top:auto; font-size:1.25em}
.sxd-doc.fs .ti{color:rgba(255,255,255,.9); font-size:.7em}
.sxd-doc.fs.t .pg{background:linear-gradient(160deg, #1F6E6B, #154F4D)}
.sxd-doc.fs.o .pg{background:linear-gradient(160deg, #D2702A, #A9511A)}
.sxd-doc.fs.p .pg{background:linear-gradient(160deg, #5B3F78, #432C5A)}
.sxd-doc.fs.q .pg{background:linear-gradient(160deg, #7B5A9A, #5E4279)}
.sxd-doc.fs.g .pg{background:linear-gradient(160deg, #3E7A3A, #2C5A29)}
.sxd-doc.iso .pg{display:flex; flex-direction:column; background:linear-gradient(180deg, #F4F5F7, #E7EAEE)}
.sxd-doc.iso .h{border-bottom:0; font-size:.58em; letter-spacing:.14em}
.sxd-doc.iso .k{margin-top:.8em; font-size:1.55em; letter-spacing:-.01em}
.sxd-doc.iso .ed{font-size:.58em; color:#5A6472}
.sxd-doc.iso .ti{margin-top:1.1em; font-size:.66em}
.sxd-doc.iso .ref{margin-top:auto; font-size:.5em; color:#5A6472; text-align:right}
.sxd-doc .tag{position:absolute; top:-.9em; right:-.7em; display:inline-flex; align-items:center; gap:.4em; padding:.45em .85em; border-radius:99px; background:#2457E0; color:#FFFFFF;
  font-size:1.25em; font-weight:600; white-space:nowrap; box-shadow:0 8px 18px -8px rgba(36,87,224,.7); opacity:0; transform:scale(.7); transition:opacity 0s .4s, transform 0s .4s}
.sxd-doc .tag::before{content:""; width:.5em; height:.5em; border-radius:50%; background:#7BE0A8}
.sx-pane.on .sxd-doc.hit .pg{transform:translateY(-.5em) scale(1.04); box-shadow:0 0 0 2px #2457E0, 0 18px 34px -14px rgba(36,87,224,.55);
  transition:box-shadow .35s ease var(--t), transform .45s cubic-bezier(.3,1.4,.5,1) var(--t)}
.sx-pane.on .sxd-doc.hit .tag{opacity:1; transform:none; transition:opacity .3s ease var(--t), transform .45s cubic-bezier(.3,1.6,.5,1) var(--t)}
.sxd-cnt{position:absolute; left:18px; bottom:18px; padding:12px 16px 13px; border-radius:14px; background:rgba(255,255,255,.86); color:#141B24;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 0 0 1px rgba(20,30,45,.06), 0 16px 34px -18px rgba(20,30,45,.5)}
.sxd-cnt b{display:block; font-size:1rem; font-weight:600}
.sxd-n{display:inline-block; min-width:.7em; font:500 1.7rem/1 var(--f-display); color:#2457E0}
.sxd-cnt small{display:block; margin-top:4px; font-size:.82rem; color:#5A6472}
@media (prefers-reduced-motion: reduce){ .sx-pane.on .sxd-grid{animation:none} }
@container (max-width:440px){
  .sxd-grid{grid-template-columns:repeat(8, 24cqw); gap:2.4cqw 2.6cqw}
  .sxd-doc{font-size:1.65cqw}
  .sxd-cnt{left:12px; bottom:12px; padding:10px 13px}
}
/* Lösningar, Översikt: Roller as a full-bleed photo mosaic; parents take the top half, the rest fill the row below */
.sxr{position:relative; height:100%; min-height:420px; overflow:hidden; background:#0B111B; color:#FFFFFF}
.sxr-st{position:absolute; inset:0}
.sxr-n{position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); width:calc(var(--w) * 1%); height:calc(var(--h) * 1%); opacity:var(--o);
  overflow:hidden; container-type:inline-size; background:#141D2A;
  transition:left .95s cubic-bezier(.65,0,.25,1), top .95s cubic-bezier(.65,0,.25,1), width .95s cubic-bezier(.65,0,.25,1), height .95s cubic-bezier(.65,0,.25,1), opacity .6s ease}
.sxr[data-s="0"] .sxr-n{--x:var(--x0); --y:var(--y0); --w:var(--w0); --h:var(--h0); --o:var(--o0)}
.sxr[data-s="1"] .sxr-n{--x:var(--x1); --y:var(--y1); --w:var(--w1); --h:var(--h1); --o:var(--o1)}
.sxr[data-s="2"] .sxr-n{--x:var(--x2); --y:var(--y2); --w:var(--w2); --h:var(--h2); --o:var(--o2)}
.sxr-n img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform 7s ease-out}
.sxr-n::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,20,.86) 0%, rgba(8,12,20,.32) 38%, rgba(8,12,20,0) 62%)}
.sx-pane.on .sxr-n img{transform:scale(1.1)}
.sxr-n .lb{position:absolute; z-index:2; left:clamp(10px, 5cqw, 26px); right:clamp(8px, 4cqw, 22px); bottom:clamp(10px, 4.5cqw, 22px)}
.sxr-n b{display:block; font:500 clamp(.92rem, 6cqw, 2.1rem)/1.05 var(--f-display); letter-spacing:-.01em; color:#FFFFFF; text-shadow:0 1px 14px rgba(0,0,0,.35)}
.sxr-n small{display:block; margin-top:.35em; font-size:clamp(.64rem, 2.8cqw, .86rem); line-height:1.3; color:rgba(255,255,255,.78)}
.sxr-n small span{display:none}
.sxr[data-s="0"] .sxr-n small .t0, .sxr[data-s="1"] .sxr-n small .t1, .sxr[data-s="2"] .sxr-n small .t2{display:inline}
.sxr-n .rg{position:absolute; z-index:2; top:clamp(8px, 4cqw, 18px); right:clamp(8px, 4cqw, 18px); display:grid; place-items:center;
  width:clamp(30px, 11cqw, 48px); height:clamp(30px, 11cqw, 48px); border-radius:50%; background:rgba(10,16,26,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.sxr-n .rg svg{position:absolute; inset:0; width:100%; height:100%}
.sxr-n .rg span{position:relative; font-size:clamp(.62rem, 3.4cqw, .9rem); font-weight:600; font-variant-numeric:tabular-nums}
.sxr-n::before{content:""; position:absolute; inset:0 0 auto; z-index:1; height:min(100%, 230px); opacity:0; transition:opacity .6s ease;
  background:linear-gradient(to bottom, rgba(8,12,20,.86) 0%, rgba(8,12,20,.5) 45%, rgba(8,12,20,0) 100%)}
.sxr[data-s="0"] .sxr-n:nth-child(1)::before, .sxr[data-s="1"] .sxr-n:nth-child(1)::before, .sxr[data-s="2"] .sxr-n:nth-child(5)::before{opacity:1}
.sxr-tt{position:absolute; z-index:5; left:clamp(18px,2.6vw,28px); top:clamp(16px,2.3vw,24px); right:clamp(70px,9vw,96px); pointer-events:none}
.sxr-tts{position:relative; min-height:72px}
.sxr-tts > div{position:absolute; left:0; top:0; right:0; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease}
.sxr[data-s="0"] .sxr-tts > div:nth-child(1), .sxr[data-s="1"] .sxr-tts > div:nth-child(2), .sxr[data-s="2"] .sxr-tts > div:nth-child(3){opacity:1; transform:none; transition-delay:.15s}
.sxr-tt b{display:block; font:500 clamp(1.4rem,2.1vw,1.75rem)/1.05 var(--f-display); letter-spacing:-.015em; color:#FFFFFF}
.sxr-tt p{margin-top:5px; max-width:32em; font-size:.86rem; line-height:1.45; color:rgba(255,255,255,.8)}
.sxr-dots{display:flex; gap:6px; margin-bottom:10px}
.sxr-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s ease}
.sxr[data-s="0"] .sxr-dots i:nth-child(1), .sxr[data-s="1"] .sxr-dots i:nth-child(-n+2), .sxr[data-s="2"] .sxr-dots i{background:#FFFFFF}
.sxr-n .rg, .sxr-n .lb{transition:opacity .4s ease}
@media (max-width:520px){
  .sxr-tt p{display:none}
  .sxr-tts{min-height:36px}
}
/* Lösningar, Översikt: Situationer, the six situations open one by one on navy strips */
.sxa{display:flex; gap:3px; height:100%; min-height:420px; background:#0B111B; container-type:inline-size}
.sxa-s{position:relative; flex:1 1 0; min-width:0; overflow:hidden; color:#FFFFFF; background:linear-gradient(180deg, #1C293B, #131C29); transition:flex-grow .8s cubic-bezier(.65,0,.25,1)}
.sxa-s:nth-child(even){background:linear-gradient(180deg, #19253A, #111A26)}
.sxa-s.on{flex-grow:7}
.sxa-s::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .7s ease;
  background:radial-gradient(90% 60% at 15% 0%, rgba(108,140,255,.32), transparent 62%), radial-gradient(70% 50% at 100% 100%, rgba(47,164,99,.12), transparent 70%)}
.sxa-s.on::before{opacity:1}
.sxa-s .n{position:absolute; top:18px; left:50%; transform:translateX(-50%); font:500 .72rem var(--f-mono); letter-spacing:.04em; color:rgba(233,237,242,.5); transition:left .7s ease, transform .7s ease, color .4s ease}
.sxa-s.on .n{left:26px; transform:none; color:#9DBBFF}
.sxa-s .v{position:absolute; left:50%; bottom:20px; writing-mode:vertical-rl; transform:translateX(-50%) rotate(180deg); font-size:.84rem; font-weight:500; letter-spacing:.04em;
  color:rgba(233,237,242,.82); white-space:nowrap; transition:opacity .35s ease}
.sxa-s.on .v{opacity:0}
.sxa-s .wm{position:absolute; right:-.06em; top:-.2em; font:500 clamp(7rem,13vw,10rem)/1 var(--f-display); letter-spacing:-.04em; color:rgba(157,187,255,.07);
  opacity:0; transition:opacity 0s}
.sxa-s.on .wm{opacity:1; transition:opacity .8s ease .3s}
.sxa-s .ic{position:absolute; left:26px; top:52px; width:46px; height:46px; color:#9DBBFF; opacity:0; transform:translateY(6px); transition:opacity 0s, transform 0s}
.sxa-s .ic svg{width:100%; height:100%}
.sxa-s.on .ic{opacity:1; transform:none; transition:opacity .5s ease .35s, transform .5s ease .35s}
.sxa-cap{position:absolute; left:26px; bottom:26px; width:calc(58cqw - 52px); opacity:0; transform:translateY(8px); transition:opacity 0s, transform 0s}
.sxa-s.on .sxa-cap{opacity:1; transform:none; transition:opacity .55s ease .45s, transform .55s ease .45s}
.sxa-cap b{display:block; font:500 clamp(1.6rem,2.5vw,2.1rem)/1.06 var(--f-display); letter-spacing:-.015em; color:#FFFFFF}
.sxa-cap p{margin-top:12px; font-size:.9rem; line-height:1.55; color:rgba(233,237,242,.74)}
@media (max-width:600px){
  .sxa{flex-direction:column; min-height:470px}
  .sxa-s .n{top:50%; left:16px; transform:translateY(-50%)}
  .sxa-s.on .n{top:16px; left:20px; transform:none}
  .sxa-s .v{left:52px; top:50%; bottom:auto; writing-mode:horizontal-tb; transform:translateY(-50%)}
  .sxa-s .ic{left:20px; top:40px; width:34px; height:34px}
  .sxa-cap{left:20px; bottom:18px; width:calc(100cqw - 40px)}
  .sxa-cap p{font-size:.84rem}
  .sxa-s .wm{font-size:6rem}
}
/* Lösningar, Branscher: a photo mosaic, eight examples with a floating Saga card, and a wall for every other industry */
.brm{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(2, clamp(170px, 18vw, 250px)); gap:8px; border-radius:22px; overflow:hidden}
.brm figure{position:relative; margin:0; overflow:hidden; background:#141D2A}
.brm img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.brm figure::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,20,.6), rgba(8,12,20,0) 45%)}
.brm figcaption{position:absolute; z-index:1; left:16px; bottom:13px; font-size:.8rem; font-weight:500; letter-spacing:.04em; color:#FFFFFF}
.brm-a{grid-column:1 / 3; grid-row:1 / 3}
.brm-b{grid-column:3; grid-row:1} .brm-c{grid-column:4; grid-row:1} .brm-d{grid-column:3; grid-row:2} .brm-e{grid-column:4; grid-row:2}
.brm-a figcaption{font-size:.92rem}
@media (max-width:700px){
  .brm{grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:200px repeat(2, 140px)}
  .brm-a{grid-column:1 / 3; grid-row:1} .brm-b{grid-column:1; grid-row:2} .brm-c{grid-column:2; grid-row:2} .brm-d{grid-column:1; grid-row:3} .brm-e{grid-column:2; grid-row:3}
}
.brg{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(48px,6vw,72px) clamp(28px,3.4vw,48px); margin-top:56px}
.brg-ph{position:relative; aspect-ratio:3 / 2; border-radius:20px; overflow:hidden; background:#141D2A}
.brg-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.brg-i:hover .brg-ph img{transform:scale(1.03)}
.br-chip{position:absolute; left:16px; right:16px; bottom:16px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:11px; align-items:center; max-width:420px;
  padding:11px 13px; border-radius:14px; background:rgba(255,255,255,.9); color:#141B24; font-family:var(--f-app);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 0 0 1px rgba(20,30,45,.06), 0 18px 36px -18px rgba(8,14,24,.55)}
.br-chip small{display:block; font-size:.68rem; font-weight:600; color:#5A6472}
.br-chip b{display:block; margin-top:1px; font-size:.84rem; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.br-chip .u-chip{font-size:.7rem}
.br-m{width:28px; height:28px; border-radius:50%; display:grid; place-items:center}
.br-m svg{width:14px; height:14px}
.br-m.ok{background:#E3F3E9; color:#1F8A4C} .br-m.gap{background:#FBE7E5; color:#B3261E} .br-m.wait{background:#F4ECE0; color:#A35B0E}
.brg-i h3{margin-top:26px; font-size:clamp(1.7rem,2.4vw,2.15rem); line-height:1.05; letter-spacing:-.015em}
.brg-i p{margin-top:12px; max-width:52ch; color:var(--ink-2); font-size:1rem; line-height:1.6}
@media (max-width:760px){
  .brg{grid-template-columns:minmax(0,1fr)}
  .br-chip{left:12px; right:12px; bottom:12px}
}
.brw-list{display:flex; flex-wrap:wrap; gap:4px .95em; margin-top:44px; max-width:1060px; font:500 clamp(1.45rem,2.4vw,2.2rem)/1.3 var(--f-display); letter-spacing:-.01em; color:var(--ink-3)}
.brw-list span{white-space:nowrap}
.brw-list span:nth-child(3n+1){color:var(--ink)}
.brw-go{display:inline-flex; align-items:center; gap:10px; margin-top:36px; color:var(--ink); font-size:1rem; text-decoration:none}
.brw-go .arr{transition:transform .2s ease}
.brw-go:hover .arr{transform:translateX(3px)}
/* Lösningar, Regelverk: the catalogue. Search, filters with counts, cards with a document cover per type, a side panel per regulation */
.rk{padding-bottom:clamp(72px,9vw,120px)}
.rk-bar{display:flex; align-items:center; flex-wrap:wrap; gap:14px 20px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.rk-q{position:relative; flex:1 1 340px; max-width:560px}
.rk-q svg{position:absolute; left:19px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
.rk-q input{width:100%; height:52px; padding:0 20px 0 48px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink);
  font:400 1rem var(--f-body); outline:none; -webkit-appearance:none; appearance:none; transition:border-color .2s ease, box-shadow .2s ease}
.rk-q input::placeholder{color:var(--ink-3)}
.rk-q input:focus{border-color:var(--ink-3); box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 7%, transparent)}
.rk-ftog{display:none; align-items:center; gap:8px; height:42px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink);
  font:500 .92rem var(--f-body); cursor:pointer}
.rk-ftog svg{width:17px; height:17px}
.rk-fn:empty{display:none}
.rk-fn{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--ink); color:var(--paper); font-size:.72rem; font-weight:600}
.rk-cnt{margin:0 0 0 auto; font-size:.92rem; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.rk-sort{display:inline-flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink-3)}
.rk-sort select{height:42px; padding:0 36px 0 16px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font:500 .92rem var(--f-body); cursor:pointer;
  -webkit-appearance:none; appearance:none; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238A94A3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px}
.rk-sort select:focus-visible, .rk-ftog:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.rk-body{display:grid; grid-template-columns:216px minmax(0,1fr); gap:clamp(32px,4vw,56px); margin-top:32px}
.rk-side{align-self:start}
.rk-fg + .rk-fg{margin-top:28px; padding-top:26px; border-top:1px solid var(--line)}
.rk-fg h2{margin:0 0 10px; font:600 .72rem var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.rk-fg ul{display:grid; gap:1px; margin:0; padding:0; list-style:none}
.rk-o{position:relative; display:flex; align-items:center; gap:10px; padding:7px 0; font-size:.94rem; line-height:1.3; color:var(--ink); cursor:pointer}
.rk-o input{position:absolute; left:0; top:50%; width:18px; height:18px; margin:-9px 0 0; opacity:0; cursor:pointer}
.rk-bx{flex:none; display:grid; place-items:center; width:18px; height:18px; border:1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius:5px;
  transition:background .15s ease, border-color .15s ease}
.rk-bx::after{content:""; width:9px; height:5px; border:2px solid var(--paper); border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg); opacity:0}
.rk-o:hover .rk-bx{border-color:var(--ink-3)}
.rk-o input:checked + .rk-bx{background:var(--ink); border-color:var(--ink)}
.rk-o input:checked + .rk-bx::after{opacity:1}
.rk-o input:focus-visible + .rk-bx{outline:2px solid var(--accent); outline-offset:2px}
.rk-on{flex:1; min-width:0}
.rk-oc{font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.rk-o.off{color:var(--ink-3); cursor:default}
.rk-o.off input{cursor:default}
.rk-o.off .rk-bx{opacity:.45}
.rk-o .rk-mk{margin-right:-2px}
.rk-atog{margin-top:6px; padding:4px 0; border:0; background:none; color:var(--ink-2); font:500 .86rem var(--f-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.rk-atog:hover{color:var(--ink)}
.rk-mk{flex:none; display:inline-block; width:11px; height:14px; background:var(--ink-2); -webkit-mask:var(--m) no-repeat center / 100% 100%; mask:var(--m) no-repeat center / 100% 100%}
.rk-mk.r{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='.5' y='.5' width='10' height='13' rx='1' fill='none' stroke='%23000'/%3E%3Cpath d='M3 4.5h5M3.5 7.5h4' stroke='%23000'/%3E%3C/svg%3E")}
.rk-mk.d{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='.5' y='.5' width='10' height='13' rx='1' fill='none' stroke='%23000' stroke-dasharray='2 1.2'/%3E%3Cpath d='M3 4.5h5' stroke='%23000'/%3E%3C/svg%3E")}
.rk-mk.l{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='.5' y='.5' width='10' height='13' rx='1' fill='none' stroke='%23000'/%3E%3Cpath d='M2.5 3.5h6' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.rk-mk.f{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='.5' y='.5' width='10' height='13' rx='1' fill='%23000'/%3E%3C/svg%3E")}
.rk-mk.s{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='.5' y='.5' width='10' height='13' rx='1' fill='%23000' fill-opacity='.35'/%3E%3C/svg%3E")}
.rk-chips{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px}
.rk-chip{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 12px 0 14px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink);
  font:500 .86rem var(--f-body); cursor:pointer}
.rk-chip svg{width:12px; height:12px; color:var(--ink-3)}
.rk-chip:hover{border-color:var(--ink-3)}
.rk-clear{margin-left:4px; padding:0; border:0; background:none; color:var(--ink-2); font:500 .86rem var(--f-body); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.rk-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:18px; margin:0; padding:0; list-style:none}
.rk-c{position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--card); container-type:inline-size;
  transition:border-color .2s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
.rk-c:hover{border-color:color-mix(in srgb, var(--ink) 20%, transparent); box-shadow:0 22px 44px -30px rgba(20,27,36,.5); transform:translateY(-2px)}
.rk-cv{display:grid; place-items:center; aspect-ratio:16 / 10; background:var(--paper-2); border-bottom:1px solid var(--line)}
.rk-cv .rk-d{--w:34cqw}
.rk-c:hover .rk-cv .rk-d{transform:translateY(-3px); box-shadow:0 1px 2px rgba(20,27,36,.1), 0 18px 30px -14px rgba(20,27,36,.5)}
.rk-ct{display:flex; flex:1; flex-direction:column; padding:18px 20px 18px}
.rk-ty{display:flex; align-items:center; gap:8px; margin:0; font-size:.78rem; font-weight:500; color:var(--ink-2)}
.rk-up{display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:.74rem; color:var(--ink-2); white-space:nowrap}
.rk-up::before{content:""; width:6px; height:6px; border-radius:50%; background:#D9922E}
.rk-h{margin:12px 0 0; font:500 clamp(1.3rem, 7.6cqw, 1.7rem)/1.08 var(--f-display); letter-spacing:-.015em}
.rk-h button{padding:0; border:0; background:none; color:var(--ink); font:inherit; letter-spacing:inherit; text-align:left; cursor:pointer}
.rk-h button::after{content:""; position:absolute; inset:0; border-radius:18px}
.rk-h button:focus{outline:none}
.rk-h button:focus-visible::after{outline:2px solid var(--accent); outline-offset:-2px}
.rk-sub{margin:6px 0 0; font-size:.85rem; line-height:1.4; color:var(--ink-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rk-k{margin:12px 0 0; font-size:.9rem; line-height:1.5; color:var(--ink-2)}
.rk-no{margin:auto 0 0; padding-top:16px; font:500 .76rem var(--f-mono); color:var(--ink-3)}
.rk-empty{padding:56px 0; text-align:center; color:var(--ink-2)}
.rk-empty .btn{margin-top:18px}
.rk-moreb{margin-top:32px; text-align:center}
.rk-miss{margin-top:56px; padding-top:28px; border-top:1px solid var(--line)}
.rk-miss p{margin:0; font-size:1.02rem; color:var(--ink-2)}
.rk-miss b{color:var(--ink); font-weight:500}
.rk-miss a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.rk-miss a:hover{text-decoration-color:var(--ink-3)}
.rk-miss a .arr{display:inline-block; text-decoration:none; transition:transform .2s ease}
.rk-miss a:hover .arr{transform:translateX(3px)}
.rk-miss .rk-note{margin-top:10px; font-size:.84rem; color:var(--ink-3)}
/* a document cover, scaled by --w: EU in Official Journal style, SFS with a serif head, agency covers in colour, standards in grey */
.rk-d{--w:120px; position:relative; display:flex; flex-direction:column; width:var(--w); aspect-ratio:1 / 1.414; padding:.9em .95em; overflow:hidden; background:#FFFFFF; color:#1B2330;
  border-radius:2px; font-size:calc(var(--w) / 14); line-height:1.2; text-align:left;
  box-shadow:0 1px 2px rgba(20,27,36,.1), 0 12px 26px -14px rgba(20,27,36,.45); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.rk-d > span{display:block}
.rk-d .h{display:flex; justify-content:space-between; gap:.6em; padding-bottom:.45em; border-bottom:1px solid #1B2330; font-size:.6em; font-weight:500}
.rk-d .k{margin-top:1.1em; font-size:.95em; font-weight:700; letter-spacing:.01em}
.rk-d .ti{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin-top:.55em; font-size:.72em; line-height:1.35; color:#2A3240}
.rk-d .p{margin-top:.9em; font-size:.5em; line-height:1.45; color:#5A6472}
.rk-d .ln{display:grid; gap:.45em; margin-top:.8em}
.rk-d .ln i{display:block; height:.32em; border-radius:1px; background:#D9DDE3}
.rk-d .ln i.s{width:62%}
.rk-d.eu{text-align:center}
.rk-d.eu .h{justify-content:center}
.rk-d.sfs{text-align:center}
.rk-d.sfs .h{justify-content:center; font:500 .78em var(--f-display); letter-spacing:.02em; border-bottom-width:2px}
.rk-d.sfs .k{font-size:.9em}
.rk-d.sfs .ti{font:600 .86em/1.3 var(--f-display)}
.rk-d.fs{color:#FFFFFF}
.rk-d.fs .h{display:block; border-bottom-color:rgba(255,255,255,.55); font-size:.56em}
.rk-d.fs .ti{-webkit-line-clamp:5; margin-top:1em; font-size:.7em; color:rgba(255,255,255,.9)}
.rk-d.fs .k{margin-top:auto; font-size:1.2em}
.rk-d.fs.t{background:linear-gradient(160deg, #1F6E6B, #154F4D)}
.rk-d.fs.o{background:linear-gradient(160deg, #D2702A, #A9511A)}
.rk-d.fs.p{background:linear-gradient(160deg, #5B3F78, #432C5A)}
.rk-d.fs.q{background:linear-gradient(160deg, #7B5A9A, #5E4279)}
.rk-d.fs.g{background:linear-gradient(160deg, #3E7A3A, #2C5A29)}
.rk-d.fs.b{background:linear-gradient(160deg, #2F5486, #213C62)}
.rk-d.fs.k{background:linear-gradient(160deg, #3A4250, #262C36)}
.rk-d.std{background:linear-gradient(180deg, #F4F5F7, #E7EAEE)}
.rk-d.std .h{display:block; border-bottom:0; font-size:.48em; letter-spacing:.14em}
.rk-d.std .k{margin-top:.7em; font-size:1.3em; letter-spacing:-.01em}
.rk-d.std .ti{margin-top:1em; font-size:.62em}
.rk-d.std .ref{margin-top:auto; font-size:.48em; color:#5A6472; text-align:right}
/* side panel */
html.rk-lock{overflow:hidden}
.rk-dlg{position:fixed; inset:0; z-index:100}
.rk-scrim{position:absolute; inset:0; background:rgba(8,12,18,.46); opacity:0; transition:opacity .35s ease}
.rk-dlg.on .rk-scrim{opacity:1}
.rk-pnl{position:absolute; top:0; right:0; bottom:0; width:min(520px, 100%); overflow-y:auto; overscroll-behavior:contain; background:var(--paper);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.45); transform:translateX(100%); transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.rk-dlg.on .rk-pnl{transform:none}
.rk-x{position:absolute; top:16px; right:16px; z-index:2; display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--ink); cursor:pointer}
.rk-x svg{width:16px; height:16px}
.rk-x:hover{border-color:var(--ink-3)}
.rk-x:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.rk-pst{display:grid; place-items:center; height:250px; background:var(--paper-2); border-bottom:1px solid var(--line)}
.rk-pst .rk-d{--w:132px}
.rk-pb{padding:28px 36px 48px}
.rk-pb h2{margin-top:12px; font-size:clamp(2rem, 4vw, 2.6rem); line-height:1.02; letter-spacing:-.02em}
.rk-pfn{margin-top:8px; font-size:1rem; line-height:1.45; color:var(--ink-2)}
.rk-dl{margin:26px 0 0; border-top:1px solid var(--line)}
.rk-dl div{display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.92rem; line-height:1.45}
.rk-dl dt{color:var(--ink-3)}
.rk-dl dd{margin:0; color:var(--ink)}
.rk-pb h3{margin-top:28px; font:600 .72rem var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.rk-pb h3 + p{margin-top:10px; font-size:1rem; line-height:1.6; color:var(--ink)}
@media (prefers-reduced-motion: reduce){ .rk-pnl, .rk-scrim, .rk-c, .rk-d{transition:none} }
@media (max-width:900px){
  .rk-body{grid-template-columns:minmax(0,1fr); gap:20px; margin-top:20px}
  .rk-ftog{display:inline-flex}
  .rk-side{display:none; padding:22px 22px 18px; border:1px solid var(--line); border-radius:18px; background:var(--card)}
  .rk-side.open{display:block}
  .rk-fg[data-g="a"] ul{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); column-gap:24px}
}
@media (max-width:600px){
  .rk-bar{gap:12px 10px; padding-bottom:18px}
  .rk-q{flex-basis:100%}
  .rk-q input{height:48px}
  .rk-sort span{display:none}
  .rk-cnt{order:3; flex-basis:100%; margin:0; font-size:.86rem}
  .rk-sort{margin-left:auto}
  .rk-grid{gap:12px}
  .rk-c{flex-direction:row}
  .rk-cv{flex:none; width:96px; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line)}
  .rk-cv .rk-d{--w:60px}
  .rk-ct{padding:14px 16px 14px}
  .rk-ty{font-size:.74rem}
  .rk-h{margin-top:8px; font-size:1.35rem}
  .rk-k{margin-top:8px; font-size:.86rem}
  .rk-no{padding-top:10px}
  .rk-pst{height:210px}
  .rk-pb{padding:24px 20px 40px}
  .rk-dl div{grid-template-columns:108px minmax(0,1fr); gap:12px}
}
/* locked previews: a blurred piece of Saga with a lock, the detail is in the product */
.lk-pv{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--card)}
.lk-rows{padding:14px 18px 10px; filter:blur(3.2px); user-select:none; pointer-events:none}
.lk-hd{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); font-family:var(--f-app)}
.lk-hd b{font-size:.9rem; font-weight:600; color:var(--ink)}
.lk-hd small{font-size:.74rem; color:var(--ink-3)}
.lk-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font:500 .82rem/1.3 var(--f-app); color:var(--ink)}
.lk-row:last-child{border-bottom:0}
.lk-row span{flex:1; min-width:0}
.lk-row i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--ink-3)}
.lk-row i.ok{background:var(--sage)}
.lk-row i.wip{background:#C98A2B}
.lk-row em{flex:none; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--paper-2); font-style:normal; font-size:.64rem; color:var(--ink-2)}
.lk-row small{flex:none; width:44px; text-align:right; font-size:.74rem; color:var(--ink-3)}
.lk-row b{flex:none; padding:3px 9px; border-radius:99px; background:var(--paper-2); font-size:.72rem; font-weight:500; color:var(--ink-3)}
.lk-row b.on{background:var(--sage-soft); color:var(--sage)}
.lk-ic{position:absolute; left:50%; top:50%; display:grid; place-items:center; width:48px; height:48px; margin:-24px 0 0 -24px; border:1px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--ink); box-shadow:0 10px 26px -12px rgba(0,0,0,.4)}
.lk-ic svg{width:19px; height:19px}
.rk-pb .rk-src{display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:var(--ink); font-size:.92rem; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.rk-pb .rk-src:hover{text-decoration-color:var(--ink-3)}
.rk-lk{margin-top:32px; padding:20px 20px 24px; border-radius:18px; background:var(--paper-2)}
.rk-pb h3.rk-lkh{margin-top:22px; font:500 1.65rem/1.08 var(--f-display); letter-spacing:-.015em; text-transform:none; color:var(--ink)}
.rk-lk p{color:var(--ink-2)}
.rk-lk .btn{margin-top:20px}
.rk-lk .btn .arr{transition:transform .2s ease}
.rk-lk .btn:hover .arr{transform:translateX(3px)}
.brt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,5vw,72px); padding:clamp(28px,4vw,48px); border-radius:24px; background:var(--paper-2)}
.brt .lede{margin-top:18px}
.brt-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.brt-pv .lk-rows{filter:blur(2.6px)}
.sxd-go{display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#141B24; font-size:.82rem; font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(20,27,36,.3)}
.sxd-go .arr{transition:transform .2s ease}
.sxd-go:hover .arr{transform:translateX(3px)}
@media (max-width:900px){ .brt{grid-template-columns:minmax(0,1fr)} }
/* Lösningar, Bolag och ägare: one company, a group, a portfolio, as big still photo mosaics with readiness rings */
.bo-sec{scroll-margin-top:96px}
.bo-v{position:relative; margin-top:44px}
.bo-m{display:grid; gap:6px; overflow:hidden; border-radius:22px}
.bo-m.c3{grid-template-columns:repeat(3, minmax(0,1fr))}
.bo-m.c5{grid-template-columns:repeat(5, minmax(0,1fr))}
.bo-t{position:relative; overflow:hidden; aspect-ratio:3 / 2; background:#141D2A; container-type:inline-size}
.bo-m .bo-t.top{grid-column:1 / -1; aspect-ratio:2.8 / 1}
.bo-m.c5 .bo-t:not(.top){aspect-ratio:4 / 5}
.bo-one .bo-t{aspect-ratio:2.2 / 1; border-radius:22px}
.bo-t img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.bo-t:hover img{transform:scale(1.03)}
.bo-t::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,20,.84) 0%, rgba(8,12,20,.3) 40%, rgba(8,12,20,0) 66%)}
.bo-t .lb{position:absolute; z-index:2; left:clamp(14px, 6cqw, 32px); right:clamp(14px, 6cqw, 32px); bottom:clamp(12px, 5cqw, 28px)}
.bo-t .lb b{display:block; font:500 clamp(1.05rem, 7cqw, 2.4rem)/1.05 var(--f-display); letter-spacing:-.01em; color:#FFFFFF; text-shadow:0 1px 14px rgba(0,0,0,.35)}
.bo-t .lb small{display:block; margin-top:.4em; font-size:clamp(.72rem, 3cqw, .92rem); line-height:1.3; color:rgba(255,255,255,.8)}
.bo-t .rg{position:absolute; z-index:2; top:clamp(10px, 4cqw, 20px); right:clamp(10px, 4cqw, 20px); display:grid; place-items:center; width:clamp(38px, 12cqw, 54px); height:clamp(38px, 12cqw, 54px);
  border-radius:50%; background:rgba(10,16,26,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.bo-t .rg svg{position:absolute; inset:0; width:100%; height:100%}
.bo-t .rg span{position:relative; color:#FFFFFF; font-size:clamp(.72rem, 3.6cqw, .95rem); font-weight:600; font-variant-numeric:tabular-nums}
.bo-card{position:absolute; z-index:3; right:clamp(14px, 2vw, 24px); bottom:clamp(14px, 2vw, 24px); width:min(360px, 44%); padding:14px 16px 4px; border-radius:16px;
  background:rgba(255,255,255,.92); color:#141B24; font-family:var(--f-app); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(20,30,45,.06), 0 18px 36px -18px rgba(8,14,24,.55)}
.bo-card .hd{display:flex; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1px solid #E3E6EA}
.bo-card .hd b{font-size:.88rem; font-weight:600}
.bo-card .hd small{margin-left:auto; font-size:.72rem; color:#5A6472}
.bo-card .r{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid #EEF0F2; font-size:.8rem; line-height:1.3}
.bo-card .r:last-child{border-bottom:0}
.bo-card .r small{flex:none; color:#5A6472}
.bo-card .r b{font-weight:600; text-align:right}
.bo-v .bo-chip{left:clamp(14px, 2vw, 24px); right:auto; bottom:auto; top:clamp(14px, 2vw, 24px); width:min(400px, 44%); max-width:none}
@media (max-width:760px){
  .bo-v{margin-top:28px}
  .bo-one .bo-t{aspect-ratio:4 / 3}
  .bo-one .bo-t img{object-position:20% 42% !important}
  .bo-m.c3{grid-template-columns:minmax(0,1fr)}
  .bo-m.c3 .bo-t{aspect-ratio:16 / 9}
  .bo-m.c3 .bo-t.top, .bo-m.c5 .bo-t.top{aspect-ratio:4 / 3}
  .bo-m.c5{grid-template-columns:repeat(2, minmax(0,1fr))}
  .bo-m.c5 .bo-t:not(.top){aspect-ratio:1 / 1}
  .bo-m.c5 .bo-t:last-child{grid-column:1 / -1; aspect-ratio:2 / 1}
  .bo-card, .bo-v .bo-chip{position:static; width:auto; margin-top:10px; box-shadow:0 0 0 1px var(--line)}
}
/* Lösningar, Situationer: one row per situation; text on the left, a card in the accordion's language on the right */
.si-jump{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.si-jump a{display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 16px 0 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:.92rem; text-decoration:none;
  transition:border-color .2s ease, background .2s ease}
.si-jump a:hover{border-color:var(--ink-3); background:var(--paper-2)}
.si-jump svg{width:18px; height:18px; color:var(--ink-2)}
.si-sec{scroll-margin-top:72px}
.si-row{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(32px, 6vw, 88px); align-items:center; padding:clamp(48px, 6vw, 80px) 0; border-top:1px solid var(--line)}
#si-myndighet .si-row{border-bottom:1px solid var(--line)}
.si-tx .lede{margin-top:18px; font-size:1.05rem; line-height:1.6}
.si-p{position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:clamp(300px, 25vw, 350px); padding:clamp(22px, 2.2vw, 28px) clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px);
  border-radius:20px; color:#FFFFFF; background:linear-gradient(180deg, #1C293B, #131C29)}
.si-p::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 60% at 15% 0%, rgba(108,140,255,.32), transparent 62%), radial-gradient(70% 50% at 100% 100%, rgba(47,164,99,.12), transparent 70%)}
.si-p > *{position:relative}
.si-n{font:500 .74rem var(--f-mono); letter-spacing:.04em; color:#9DBBFF}
.si-p > .si-wm{position:absolute; right:-.06em; top:-.2em; font:500 clamp(6rem, 9vw, 8rem)/1 var(--f-display); letter-spacing:-.04em; color:rgba(157,187,255,.07); pointer-events:none}
.si-ic{display:block; width:38px; height:38px; margin-top:18px; color:#9DBBFF}
.si-ic svg{width:100%; height:100%}
.si-cap{margin-top:auto; padding-top:28px}
.si-q{margin:0; max-width:15em; font:500 clamp(1.55rem, 2.2vw, 1.95rem)/1.08 var(--f-display); letter-spacing:-.015em; color:#FFFFFF}
.si-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:16px 0 0}
.si-meta small{font-size:.78rem; color:rgba(233,237,242,.55)}
.si-clk{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px; background:rgba(255,255,255,.07); color:#FFD9A0; font:500 .78rem var(--f-mono)}
.si-clk::before{content:""; width:6px; height:6px; border-radius:50%; background:#F2B65A}
.si-steps{display:flex; flex-wrap:wrap; align-items:center; gap:8px 0; margin:18px 0 0; padding:0; list-style:none; font:500 .74rem var(--f-mono); letter-spacing:.02em; color:rgba(233,237,242,.38)}
.si-steps li{display:inline-flex; align-items:center; white-space:nowrap}
.si-steps li:not(:last-child)::after{content:""; width:18px; height:1px; margin:0 10px; background:rgba(255,255,255,.16)}
.si-steps li.ok{color:rgba(233,237,242,.88)}
.si-steps li.ok:has(+ li.ok)::after{background:rgba(157,187,255,.6)}
.si-steps li.next{color:rgba(233,237,242,.7)}
.si-steps li.next::before{content:""; width:5px; height:5px; margin-right:8px; border-radius:50%; background:#9DBBFF}
.si-p[data-at="1"] .si-steps li.next::before{background:#F2B65A}
@media (max-width:860px){
  .si-row{grid-template-columns:minmax(0,1fr); gap:28px}
}
@media (max-width:760px){
  .si-jump a{height:38px; padding:0 13px 0 11px; font-size:.86rem}
  .si-p{min-height:290px}
  .si-ic{width:34px; height:34px}
  .si-q{font-size:1.55rem}
  .si-p > .si-wm{font-size:5.5rem}
}
/* the last card in the row: a way on to Branscher */
.rq-end a{display:flex; flex-direction:column; aspect-ratio:4 / 3; padding:clamp(24px, 3vw, 36px); border-radius:16px; background:var(--paper-2); color:var(--ink); text-decoration:none;
  border:1px solid var(--line); transition:border-color .2s ease}
.rq-end a:hover{border-color:var(--ink-3)}
.rq-end h3{margin-top:0; font-size:clamp(1.9rem, 2.6vw, 2.4rem)}
.rq-end p{max-width:30ch}
.rq-go{display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-size:.97rem; font-weight:500}
.rq-go .arr{transition:transform .2s ease}
.rq-end a:hover .rq-go .arr{transform:translateX(3px)}
@media (max-width:760px){ .rq-end a{aspect-ratio:auto; min-height:280px; padding:24px} .rq-go{padding-top:20px} }
/* Säkerhet: an informative, document-like page. Facts in short, a contents rail, short sections */
.sk-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); align-items:center; gap:clamp(32px, 5vw, 72px); padding-bottom:clamp(40px, 5vw, 64px)}
.sk-fig{margin:0}
.sk-map{position:relative; overflow:hidden; aspect-ratio:4 / 3; border-radius:20px; background:linear-gradient(180deg, #1C293B, #131C29)}
.sk-map::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(80% 70% at 0% 0%, rgba(108,140,255,.36), transparent 62%), radial-gradient(60% 50% at 100% 100%, rgba(47,164,99,.14), transparent 70%)}
.sk-map img{position:absolute; inset:0; width:100%; height:100%}
.sk-pin{position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 22px 7px rgba(108,140,255,.6)}
.sk-pin::before, .sk-pin::after{content:""; position:absolute; left:50%; top:50%; border:1px solid rgba(157,187,255,.75); border-radius:50%; transform:translate(-50%, -50%)}
.sk-pin::before{width:26px; height:26px}
.sk-pin::after{width:46px; height:46px; border-color:rgba(157,187,255,.32)}
.sk-pin b{position:absolute; left:50%; bottom:34px; transform:translateX(-50%); padding:7px 12px 8px; border:1px solid rgba(157,187,255,.3); border-radius:10px; background:rgba(11,17,27,.8);
  color:#FFFFFF; font:500 1.08rem/1 var(--f-display); letter-spacing:0; white-space:nowrap; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.sk-fig figcaption{margin-top:14px; font:500 .76rem var(--f-mono); letter-spacing:.02em; color:var(--ink-3)}
@media (max-width:860px){ .sk-hero{grid-template-columns:minmax(0,1fr)} }
.sk-upd{margin-top:22px; font:500 .76rem var(--f-mono); letter-spacing:.04em; color:var(--ink-3)}
.sk-lab{font:600 .72rem var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.sk-facts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 clamp(28px, 4vw, 64px); margin:18px 0 0; padding:0; list-style:none}
.sk-facts li{padding:24px 0 36px; border-top:1px solid var(--line)}
.sk-facts b{display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; font:500 1.4rem/1.15 var(--f-display); letter-spacing:-.01em; color:var(--ink)}
.sk-facts .t{display:block; margin-top:8px; max-width:34ch; font-size:.95rem; line-height:1.5; color:var(--ink-2)}
.sk-chip{padding:3px 9px; border:1px solid var(--line); border-radius:99px; font:500 .68rem/1.3 var(--f-body); font-style:normal; letter-spacing:.02em; color:var(--ink-2)}
.sk-doc{display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(32px, 6vw, 96px); padding-block:clamp(64px, 8vw, 104px)}
.sk-toc{position:sticky; top:calc(var(--nav-h, 80px) + 32px); align-self:start}
.sk-toc ol{display:grid; margin:0; padding:0; list-style:none; border-left:1px solid var(--line)}
.sk-toc a{display:block; margin-left:-1px; padding:8px 0 8px 18px; border-left:1px solid transparent; color:var(--ink-3); font-size:.92rem; line-height:1.35; text-decoration:none; transition:color .2s ease, border-color .2s ease}
.sk-toc a:hover{color:var(--ink)}
.sk-toc a.on{border-left-color:var(--ink); color:var(--ink)}
.sk-body > section{scroll-margin-top:calc(var(--nav-h, 80px) + 32px)}
.sk-body > section + section{margin-top:clamp(52px, 6vw, 80px)}
.sk-body h2{font-size:clamp(1.7rem, 2.4vw, 2.1rem); line-height:1.1; letter-spacing:-.015em}
.sk-body p{margin-top:14px; max-width:64ch; color:var(--ink-2); font-size:1.03rem; line-height:1.65}
.sk-req{max-width:680px; margin:24px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.sk-req li{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line); color:var(--ink)}
.sk-req a, .sk-go{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:.94rem; font-weight:500; text-decoration:none; white-space:nowrap}
.sk-go{margin-top:20px}
.sk-req a .arr, .sk-go .arr{transition:transform .2s ease}
.sk-req a:hover .arr, .sk-go:hover .arr{transform:translateX(3px)}
@media (max-width:860px){
  .sk-doc{grid-template-columns:minmax(0,1fr); padding-block:56px}
  .sk-toc{display:none}
}
@media (max-width:700px){
  .sk-facts{grid-template-columns:minmax(0,1fr)}
  .sk-facts li{padding:20px 0 24px}
}
/* Insikter: a regulatory calendar, guide cards in the accordion's language, and plain reading pages for the guides */
.ik-cal{margin-top:32px}
.ik-yr{display:flex; justify-content:space-between; margin:0; padding:0 0 10px; font:600 .72rem var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.ik-cal ol + .ik-yr{margin-top:34px}
.ik-cal ol{margin:0; padding:0; list-style:none; border-bottom:1px solid var(--line)}
.ik-cal li{display:grid; grid-template-columns:76px minmax(0,1fr) auto auto; align-items:center; gap:10px 26px; padding:16px 0; border-top:1px solid var(--line)}
/* the date tile, as in Saga's own calendar */
.ik-d{display:grid; place-items:center; align-content:center; gap:4px; width:76px; height:60px; border:1px solid var(--line); border-radius:11px; background:var(--paper-2)}
.ik-d b{font:700 1.3rem/1 var(--f-app); letter-spacing:-.01em; color:var(--ink)}
.ik-d small{font:600 .58rem/1 var(--f-app); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
.ik-n b{display:block; font:500 1.3rem/1.15 var(--f-display); letter-spacing:-.005em; color:var(--ink)}
.ik-n .t{display:block; max-width:60ch; margin-top:5px; color:var(--ink-2); font-size:.97rem; line-height:1.5}
.ik-ch{display:flex; align-items:center; gap:8px}
.ik-ty, .ik-in{display:inline-flex; align-items:center; height:26px; padding:0 10px; border:1px solid var(--line); border-radius:99px; background:var(--paper-2); color:var(--ink-2); font:600 .74rem/1 var(--f-app); white-space:nowrap}
.ik-in{border-color:color-mix(in srgb, var(--sage) 32%, transparent); background:var(--sage-soft); color:var(--sage)}
.ik-in.now{border-color:var(--line); background:var(--paper-2); color:var(--ink-3)}
.ik-in:empty{display:none}
.ik-cal a{display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:.92rem; font-weight:500; text-decoration:none; white-space:nowrap}
.ik-cal a .arr, .ik-g .arr, .ik-more .arr{transition:transform .2s ease}
.ik-cal a:hover .arr, .ik-g:hover .arr, .ik-more a:hover .arr{transform:translateX(3px)}
.ik-guides{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:44px}
.ik-g{position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:340px; padding:26px 28px 28px; border-radius:20px; color:#FFFFFF; text-decoration:none;
  background:linear-gradient(180deg, #1C293B, #131C29); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ik-g:hover{transform:translateY(-3px)}
.ik-g::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(90% 60% at 15% 0%, rgba(108,140,255,.32), transparent 62%), radial-gradient(70% 50% at 100% 100%, rgba(47,164,99,.12), transparent 70%)}
.ik-g > *{position:relative}
.ik-g small{font:500 .74rem var(--f-mono); letter-spacing:.04em; color:#9DBBFF}
.ik-g .ic{display:block; width:38px; height:38px; margin-top:18px; color:#9DBBFF}
.ik-g .ic svg{width:100%; height:100%}
.ik-g b{margin-top:auto; padding-top:28px; font:500 clamp(1.45rem, 2vw, 1.8rem)/1.08 var(--f-display); letter-spacing:-.012em}
.ik-g .go{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:.9rem; color:rgba(233,237,242,.75)}
.ik-art{max-width:788px; padding-top:clamp(48px, 7vw, 88px); padding-bottom:clamp(64px, 8vw, 104px)}
.ik-back{display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-size:.92rem; text-decoration:none}
.ik-back:hover{color:var(--ink)}
.ik-meta{margin-top:30px; font:500 .76rem var(--f-mono); letter-spacing:.04em; color:var(--ink-3)}
.ik-art h1{margin-top:14px; font-size:clamp(2.3rem, 4.6vw, 3.5rem); line-height:1.03; letter-spacing:-.025em}
.ik-art > .lede{max-width:none; margin-top:22px; font-size:1.2rem; line-height:1.55}
.ik-art section{margin-top:44px}
.ik-art section h2, .ik-saga h2{font-size:clamp(1.6rem, 2.2vw, 1.95rem); line-height:1.1; letter-spacing:-.015em}
.ik-art section p{margin-top:12px; color:var(--ink-2); font-size:1.07rem; line-height:1.7}
.ik-tbl{width:100%; margin-top:40px; border-collapse:collapse; font-size:.97rem}
.ik-tbl th{padding:0 18px 12px 0; border-bottom:1px solid var(--line); text-align:left; font:600 .72rem var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.ik-tbl td{padding:16px 18px 16px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); line-height:1.5}
.ik-tbl td:first-child{color:var(--ink); font-weight:500; white-space:nowrap}
.ik-tbl td:last-child, .ik-tbl th:last-child{padding-right:0}
.ik-saga{margin-top:56px; padding:28px 30px 30px; border-radius:20px; background:var(--paper-2)}
.ik-saga p{margin-top:10px; color:var(--ink-2); font-size:1.03rem; line-height:1.6}
.ik-saga .btn{margin-top:20px}
.ik-disc{margin-top:26px; font-size:.86rem; color:var(--ink-3)}
.ik-more{margin-top:56px; padding-top:28px; border-top:1px solid var(--line)}
.ik-more h2{font:600 .72rem var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.ik-more ul{display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none}
.ik-more a{display:inline-flex; align-items:baseline; gap:10px; color:var(--ink); font:500 1.3rem/1.2 var(--f-display); text-decoration:none}
@media (max-width:900px){
  .ik-guides{grid-template-columns:minmax(0,1fr)}
  .ik-g{min-height:260px}
}
@media (max-width:700px){
  .ik-cal li{grid-template-columns:76px minmax(0,1fr); gap:12px 16px; align-items:start; padding:18px 0 20px}
  .ik-ch, .ik-cal a{grid-column:2}
  .ik-tbl, .ik-tbl tbody, .ik-tbl tr, .ik-tbl td{display:block}
  .ik-tbl thead{display:none}
  .ik-tbl tr{padding:16px 0; border-bottom:1px solid var(--line)}
  .ik-tbl td{padding:2px 0; border:0}
  .ik-tbl td:first-child{white-space:normal; font-size:1.02rem}
}