@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@500;600;700;800;900&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@500;600;700&family=Allura&display=swap");
:root{
--navy:#020b1a;
--navy-2:#06152c;
--ink:#0a1626;
--muted:#5c6b80;
--muted-2:#6f7f95;
--line:#e0e9f5;
--soft:#f4f8fd;
--blue:#1a74ff;
--blue-2:#0d5fe0;
--blue-ink:#0d62df;
--card:#ffffff;
--shadow:0 22px 60px rgba(9,26,56,.10);
--shadow-sm:0 10px 30px rgba(8,24,53,.06);
--radius:16px;
--disp:'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
--body:'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono:'JetBrains Mono', ui-monospace, monospace;
--hdr-h:70px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4,.brand,.disp{font-family:var(--disp);letter-spacing:-.03em}
.wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
.center{text-align:center}
.muted{color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--blue);margin-bottom:16px}
/* ---- Icons (inline SVG line icons) ---- */
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* ============================ HEADER ============================ */
.site-header{position:fixed;left:0;right:0;top:0;z-index:60;background:linear-gradient(180deg,#020d20,#020913);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 8px 30px rgba(0,0,0,.22);transition:background .3s ease,box-shadow .3s ease}
.site-header.transparent{background:linear-gradient(180deg,rgba(2,10,23,.86),rgba(2,10,23,.34),rgba(2,10,23,0));border-bottom-color:transparent;box-shadow:none}
.nav{height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;font-size:21px;font-weight:800;letter-spacing:-.02em}
.brand-mark{width:auto;height:30px;flex:none;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600}
.nav-links a{color:rgba(255,255,255,.82);cursor:pointer;padding:6px 0;position:relative;transition:color .18s ease}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:#fff}
.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--blue)}
.nav-actions{display:flex;align-items:center;gap:18px}
.login{color:#fff;font-size:14px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.55);cursor:pointer;padding-bottom:1px}
.login:hover{border-bottom-color:#fff}
.btn{border:1px solid transparent;border-radius:10px;padding:11px 18px;font-family:var(--body);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn .ic{font-size:16px;stroke-width:2.1}
.btn-primary{background:linear-gradient(180deg,#2f86ff,#1063e8);color:#fff;box-shadow:0 12px 24px rgba(14,101,232,.3)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(14,101,232,.38)}
.btn-secondary{background:rgba(6,20,46,.5);color:#fff;border-color:rgba(120,175,255,.55);backdrop-filter:blur(8px)}
.btn-secondary:hover{background:rgba(10,28,60,.7)}
.btn-outline{border-color:#bcd8ff;color:var(--blue-ink);background:#fff}
.btn-outline:hover{border-color:var(--blue);background:#f4f9ff}
.langtog{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.05)}
.lang-btn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;padding:7px 11px;border:0;background:none;color:rgba(255,255,255,.72);cursor:pointer;transition:.18s ease;line-height:1}
.lang-btn.on{background:linear-gradient(180deg,#2f86ff,#1063e8);color:#fff}
.lang-btn:not(.on):hover{color:#fff}
.mobile-menu{display:none;align-items:center;justify-content:center;gap:7px;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:9px 11px;background:rgba(255,255,255,.05);cursor:pointer;font-family:var(--body);font-weight:600;font-size:13px}
.mobile-menu .ic{font-size:16px}
/* ============================ VIEWS ============================ */
.view{display:none}
.view.active{display:block;animation:viewIn .32s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* ---- Platform hero ---- */
.hero{position:relative;overflow:hidden;background:#020b1a;color:#fff;padding:calc(var(--hdr-h) + 66px) 0 108px}
.hero:before{content:"";position:absolute;inset:0;background:
radial-gradient(72% 55% at 80% 32%,rgba(32,122,255,.22),transparent 60%),
linear-gradient(90deg,#020b1a 0%,#03122b 30%,rgba(2,10,24,.72) 55%,rgba(2,10,24,.08) 100%),
url("assets/hero-refinery.jpg");background-size:cover;background-position:center right}
.hero:after{content:"";position:absolute;left:-2%;right:-2%;bottom:-1px;height:96px;background:#fff;clip-path:polygon(0 74%,100% 38%,100% 100%,0 100%)}
.hero-inner{position:relative;z-index:2}
/* The headline is now two full sentences rather than four stub lines, so it
needs a wider measure and a smaller top end on the clamp. */
.hero-content{max-width:790px}
.hero h1{font-size:clamp(32px,4.1vw,55px);line-height:1.06;margin:0 0 24px;letter-spacing:-.04em;font-weight:800}
.hero h1 .em{color:#2f88ff}
.hero p{font-size:17px;line-height:1.62;color:rgba(255,255,255,.9);margin:0 0 30px;max-width:580px;font-weight:300}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:64px;max-width:790px}
.proof-item{color:#fff}
.proof-ic{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.34);display:grid;place-items:center;margin-bottom:13px;font-size:19px;color:#8fbcff;background:rgba(255,255,255,.04)}
.proof-item strong{display:block;font-family:var(--body);font-size:13px;line-height:1.4;font-weight:500;color:rgba(255,255,255,.9)}
.section-lead{font-size:16px;color:var(--muted);line-height:1.62;font-weight:300}
/* ---- Sambanden ----
Replaced a four-step "thread" band whose four screenshots were four different
objects — which argued against the very claim the band was making. One image
carries the claim now, and the four product lines are just text beside it, so
nothing on the page promises a continuity the pictures cannot show.
The image sits in a reserved aspect box (3:2, the capture's own ratio) so it
cannot shove the page around when it lazy-loads. */
.samband{background:linear-gradient(180deg,#fff,#f5f9ff);padding:84px 0 88px}
.samband .head{max-width:800px;margin:0 auto 44px;text-align:center}
.samband h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0 0 16px;font-weight:800;letter-spacing:-.035em}
.samband .section-lead{margin:0}
/* Four one-liners across, above the map. Standing them in a column beside the
picture left the text floating in the middle of 600px of nothing; a row reads
as four equal claims and lets the map have the full measure. */
.samband-list{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px 26px}
.samband-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--muted);font-weight:300}
.samband-list li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:999px;background:var(--blue)}
.samband-shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm)}
/* Reserves the capture's OWN aspect (1600x1200, see index.html's Sambanden
comment) so object-fit:cover has nothing to crop. It was 1536/1024 while the
figure held the 3:2 mockup. */
.samband-box{aspect-ratio:1600/900;background:#eef1f5;overflow:hidden}
.samband-box img{width:100%;height:100%;object-fit:cover;object-position:center}
.samband-shot figcaption{padding:14px 16px;font-size:13px;line-height:1.55;color:var(--muted);background:var(--soft);
border-top:1px solid var(--line);font-weight:300}
/* ---- Filosofin: the scope statement ----
Quiet on purpose. Same keyline-plus-blue-rule idiom as .stmt-card in the dark
band, translated to the light half of the page: no icon, no badge, no card
shadow competing with the family tiles right above it. */
.filo{background:linear-gradient(180deg,#f2f7fe,#fff);padding:0 0 84px}
.filo-card{max-width:840px;margin:0 auto;border:1px solid #d3e2f7;border-left:3px solid var(--blue);
border-radius:18px;padding:34px 36px;background:#fff;box-shadow:var(--shadow-sm)}
.filo-card h2{font-size:clamp(22px,2.5vw,30px);line-height:1.14;margin:0 0 14px;font-weight:800;letter-spacing:-.03em}
.filo-card p{margin:0;font-size:16.5px;line-height:1.66;color:var(--muted);font-weight:300}
.filo-link{margin-top:20px}
@media(max-width:640px){.filo-card{padding:26px 22px}.filo{padding-bottom:64px}}
/* ---- Plattformen: the product family strip ----
Five tiles directly under the hero, in product order: Core is the base, View,
Projects and Production sit on it, Maintain is not shipped yet and is
deliberately the quietest tile on the page. The three tiles that have a deep
section further down are links; View and Maintain have nowhere to go, so they
are plain divs and do not pretend to be clickable. */
.family{background:linear-gradient(180deg,#fff,#f2f7fe);padding:36px 0 92px}
.family .head{text-align:center;max-width:760px;margin:0 auto 44px}
.family h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;margin:0 0 16px;font-weight:800}
.fam-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch}
.fam-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:22px 20px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
a.fam-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0fb}
a.fam-tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
a.fam-tile:hover .learn .ic{transform:translateX(3px)}
.fam-tile--base{background:linear-gradient(180deg,#f6faff,#fff);border-color:#cfe0fb}
.fam-ic{width:38px;height:38px;border-radius:11px;border:1px solid #cfe0fb;background:#f4f9ff;color:var(--blue);
display:grid;place-items:center;font-size:19px;margin-bottom:14px}
.fam-tag{display:inline-flex;align-items:center;align-self:flex-start;min-height:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted-2)}
.fam-tile h3{margin:6px 0 8px;font-size:17px;font-weight:800;letter-spacing:-.02em}
.fam-tile p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.55;font-weight:300;flex:1}
.fam-tile .learn{margin-top:auto}
/* Maintain: shipped-nothing-yet, so it reads as a placeholder, not a promise. */
.fam-tile--soon{background:#fbfcfe;border-style:dashed}
.fam-tile--soon .fam-ic{border-color:var(--line);background:#fff;color:var(--muted-2)}
.fam-tile--soon h3{color:var(--muted)}
.fam-tile--soon p{color:var(--muted-2)}
/* neutral, not amber: Maintain should read as the quietest tile on the strip,
and an amber pill was the loudest thing in it */
.fam-tag--soon{color:var(--muted-2);background:#eef2f8;border:1px solid var(--line);border-radius:999px;padding:0 9px;letter-spacing:.1em}
/* ---- Product sections (Bimdoc Projects / Bimdoc Production) ----
Same paddings, same head block, same type scale: the two products carry equal
visual weight, which is the whole point of the page. */
.psec{background:#fff;padding:92px 0}
.psec--alt{background:linear-gradient(180deg,#f4f9ff,#fff)}
.psec-head{max-width:860px;margin:0 0 34px}
.psec-head h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;margin:0 0 12px;font-weight:800;letter-spacing:-.035em}
.psec .flow{margin-top:0}
.psec-cards{margin-top:34px}
.psec-note{margin:16px 0 0;font-size:12.5px;color:var(--muted-2);font-weight:300}
/* View is a short section: a head block and nothing under it, so it does not
need the 34px of air a card grid would sit in. */
.psec-head--solo{margin-bottom:0}
.psec-head--solo .section-lead{max-width:760px}
/* Bimdoc Maintain: nothing has shipped, so it is a single quiet dashed line at
the foot of the page, exactly the framing the family strip uses. */
.mt-band{background:#fff;padding:0 0 92px}
.mt-row{border:1px dashed #cfdaea;border-radius:var(--radius);background:#fbfcfe;padding:26px 28px}
.mt-h{margin:10px 0 6px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--muted)}
.mt-p{margin:0;font-size:14px;line-height:1.6;color:var(--muted-2);font-weight:300}
/* Production screenshots: real captures, aspect boxes so nothing reflows while
they lazy-load, cropped from the top-left because that is where the toolbars
and key figures live in every one of them. */
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.shot-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.shot-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#0b1c33}
.shot-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.shot-bar span{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.66);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-box{aspect-ratio:16/10;background:#0b1c33;overflow:hidden}
.shot-box img{width:100%;height:100%;object-fit:cover;object-position:top left}
/* Core's captures are dense configuration screens: half a column makes the
tables unreadable, so they run one per row, each cropped to the rows that
carry the point (object-position is already top left). */
.core-shots{grid-template-columns:1fr;gap:26px}
.core-shots .shot-card--crop90 .shot-box{aspect-ratio:16/9}
.core-shots .shot-card--crop76 .shot-box{aspect-ratio:16/7.6}
.core-shots .shot-card--crop65 .shot-box{aspect-ratio:16/6.5}
.shot-card figcaption{padding:14px 16px;font-size:13px;line-height:1.55;color:var(--muted);background:var(--soft);
border-top:1px solid var(--line);font-weight:300}
.pr-foot{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;margin-top:26px;align-items:start}
.oee{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm)}
.oee h3{margin:0 0 14px;font-size:15px;font-weight:800;letter-spacing:-.01em}
.oee-calc{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.oee-in,.oee-out{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;
border:1px solid var(--line);border-radius:9px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.oee-in b,.oee-out b{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap}
.oee-out{background:#f4f9ff;border-color:#cfe0fb}
.oee-mid{display:grid;justify-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted-2);text-align:center;width:118px;line-height:1.5}
.oee-ar{font-size:22px;line-height:1;color:var(--blue)}
.oee-cap{margin:12px 0 0;font-size:12.5px;color:var(--muted-2);font-weight:300}
.pr-list,.grund-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pr-list li,.grund-list li{position:relative;padding-left:26px;font-size:14px;line-height:1.6;color:var(--muted);font-weight:300}
.pr-list li:before,.grund-list li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:999px;background:var(--blue)}
/* ---- Core: the configuration story (Produkter view) ----
The tree card is ported from the /news/produktion teaser and shows the same
real objects, restyled into this page's light idiom. Its toggle keeps its own
state on the card element, so the two surfaces can never move each other. */
/* the two-class selector is deliberate: it has to beat .grund-grid's centring,
which is declared right below it */
/* The closing "the register lives on" line is the section's point, not a fourth
caption, so it gets its own air and the body ink rather than caption grey. */
.core-live{margin:36px 0 0;max-width:860px;font-size:17.5px;line-height:1.62;color:var(--ink)}
.grund-grid.core-struct{margin-top:52px;align-items:start}
.core-sub-h{font-size:clamp(21px,2.2vw,28px);line-height:1.15;margin:0 0 12px;font-weight:800;letter-spacing:-.03em}
.grund-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.grund-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.1;margin:0 0 12px;font-weight:800;letter-spacing:-.035em}
.grund-copy .section-lead{margin:0 0 24px}
.tpl{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
/* Four chips now: two real templates and two that are only announced, so the
group wraps instead of pushing the card sideways on a phone. */
.tpl-tog{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--soft)}
.tpl-btn{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;padding:8px 15px;border:0;
background:none;color:var(--muted);cursor:pointer;line-height:1;transition:.16s ease}
.tpl-btn:hover{color:var(--ink)}
.tpl-btn[aria-pressed="true"]{background:linear-gradient(180deg,#2f86ff,#1063e8);color:#fff}
/* Announced, not shipped: quieter than the real chips, no hover, no pointer,
and no tree behind them. The product seeds exactly two templates. */
.tpl-btn--soon,.tpl-btn--soon:hover{color:var(--muted-2);opacity:.55;cursor:default;font-weight:600;
border-left:1px dashed var(--line)}
.tpl-sub{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-ink);margin-top:14px;line-height:1.5}
.tpl-isa{display:none}
#tplCard[data-tpl="isa"] .tpl-ssg{display:none}
#tplCard[data-tpl="isa"] .tpl-isa{display:inline}
.tpl-tree{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tpl-tree[hidden]{display:none}
/* the staircase is the tree: one indent step per level, on the box itself */
.tpl-tree li{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-left:calc(var(--d)*16px)}
.tr-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-id{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue-ink);letter-spacing:.03em}
.tr-p{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.tr-n{font-size:13px;color:var(--ink);margin-top:4px;line-height:1.35;overflow-wrap:anywhere}
/* Class groups are a different kind of row from the level rows: code, plural
class name and the real count, no level pill, drawn lighter so the levels stay
the ladder and the classes read as how a rung is organised. */
.tpl-tree li.tr-cls{background:transparent;border-style:dashed;padding:7px 12px}
.tr-cls .tr-id{color:var(--muted-2)}
.tr-cn{font-size:12px;color:var(--muted);line-height:1.3}
.tr-ct{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-2);white-space:nowrap}
.tpl-note{margin-top:12px;font-family:var(--mono);font-size:10px;color:var(--muted-2);letter-spacing:.04em;line-height:1.6}
.grund-engine{margin:16px 0 0;background:var(--soft);border:1px dashed #c9d7ea;border-radius:13px;padding:14px 16px;
font-size:13px;color:var(--muted);text-align:center;line-height:1.55;font-weight:300}
.cx-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:22px}
.cx-actions .learn{margin-top:0}
/* ---- Platform: "Why teams choose Bimdoc" + dashboard mockup ---- */
.plat-why{background:#fff;padding:96px 0}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.split h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;margin:0 0 8px;font-weight:800;letter-spacing:-.035em}
.bullet-list{display:grid;gap:22px;margin-top:30px}
.bullet{display:grid;grid-template-columns:28px 1fr;gap:16px}
.bullet-dot{width:26px;height:26px;border-radius:999px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:15px}
.bullet-dot .ic{stroke-width:2.6}
.bullet h3{font-size:17px;margin:0 0 5px;font-weight:700}
.bullet p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;font-weight:300}
.app-window{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);display:grid;grid-template-columns:166px 1fr;min-height:430px}
.app-side{background:#051226;color:#fff;padding:20px 14px}
.mini-logo{display:flex;align-items:center;gap:8px;margin-bottom:24px;padding:0 4px}
.mini-logo img{height:18px;width:auto}
.side-link{height:33px;display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.72);font-size:12.5px;border-radius:9px;padding:0 10px;font-weight:400}
.side-link .ic{font-size:15px;opacity:.85}
.side-link.active{background:rgba(47,140,255,.16);color:#fff}
.app-main{padding:22px;background:#fbfdff}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.metric{background:#fff;border:1px solid #e6edf7;border-radius:12px;padding:13px 12px}
.metric small{display:block;color:var(--muted-2);font-size:10.5px;margin-bottom:8px;line-height:1.3;min-height:2.6em}
.metric strong{display:block;font-family:var(--disp);font-size:21px;letter-spacing:-.03em;font-weight:800;white-space:nowrap;line-height:1.1}
.mtrend{display:block;margin-top:7px}
.mpct{display:block;font-family:var(--disp);font-size:12px;font-weight:800;color:#00a870;letter-spacing:-.01em}
.mper{display:block;font-size:9.5px;color:var(--muted-2);white-space:nowrap;margin-top:1px}
.dash-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:10px}
.dash-card{background:#fff;border:1px solid #e6edf7;border-radius:13px;padding:14px 13px;min-height:190px;display:flex;flex-direction:column}
.dash-card h4{margin:0 0 12px;font-size:13px;font-weight:700}
.dash-model .model-wrap{flex:1;border-radius:9px;overflow:hidden;background:#0b1c33;min-height:130px}
.model-img{height:100%;width:100%;object-fit:cover;display:block}
/* ---- Animated lifecycle flow (replaces the old dashboard mockup) ---- */
.plat-why .bullet-grid{grid-template-columns:repeat(2,1fr);gap:22px 44px;margin-top:26px;max-width:920px}
@media(max-width:720px){.plat-why .bullet-grid{grid-template-columns:1fr}}
.flow{background:linear-gradient(165deg,#07182f,#020a18);border-radius:22px;padding:28px 26px 24px;position:relative;overflow:hidden;border:1px solid rgba(120,175,255,.14);box-shadow:var(--shadow);margin-top:48px}
.flow:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 0%,rgba(47,136,255,.16),transparent 70%);pointer-events:none}
.flow-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#5aa0ff;margin-bottom:7px}
.flow-title{font-family:var(--disp);font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;margin:0 0 4px}
.flow-sub{font-size:14px;color:#9db6d6;font-weight:300;margin:0 0 22px;max-width:640px;line-height:1.5}
.flow-scroll{position:relative}
.flow-svg{width:100%;height:auto;display:block;overflow:visible}
.flow-ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flow-node-ring{transform-box:fill-box;transform-origin:center;animation:flowNodePulse 3.4s ease-in-out infinite}
.flow-n1 .flow-node-ring{animation-delay:0s}.flow-n2 .flow-node-ring{animation-delay:.55s}.flow-n3 .flow-node-ring{animation-delay:1.1s}.flow-n4 .flow-node-ring{animation-delay:1.65s}.flow-n5 .flow-node-ring{animation-delay:2.2s}
@keyframes flowNodePulse{0%,72%,100%{opacity:.4;transform:scale(1)}12%{opacity:1;transform:scale(1.1)}30%{opacity:.6;transform:scale(1)}}
.flow-conn{stroke-dasharray:5 7;animation:flowDash 1.1s linear infinite}
@keyframes flowDash{to{stroke-dashoffset:-24}}
.flow-pulse{filter:drop-shadow(0 0 6px #7fd0ff)}
.flow-labels{display:grid;grid-template-columns:repeat(5,1fr);margin-top:6px}
.flow-lab{text-align:center;padding:0 6px}
.flow-lab span{display:block;font-family:var(--disp);font-size:14.5px;font-weight:800;color:#fff;letter-spacing:-.01em}
.flow-lab small{display:block;font-size:11px;color:#9db6d6;margin-top:2px;line-height:1.35}
@media (prefers-reduced-motion:reduce){.flow-node-ring,.flow-conn,.flow-pulse{animation:none}.flow-node-ring{opacity:.85}}
@media(max-width:820px){.flow-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}.flow-svg,.flow-labels{min-width:700px}}
/* ---- Handover / Object-360 section ---- */
.handover{background:linear-gradient(180deg,#f2f7fe,#fff);padding:82px 0}
.handover-h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;margin:0 0 12px;font-weight:800;letter-spacing:-.035em}
.handover-lead{max-width:740px;margin:0 0 30px}
.handover-shot{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
/* aspect box: the diagram lazy-loads mid-page, and without a reserved height it
grows the page under the reader (and under any anchor scroll) when it lands */
.handover-shot img{width:100%;height:auto;display:block;aspect-ratio:1826/636}
.handover-land{margin-top:34px}
.handover-land-lbl{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:16px}
.handover-sys-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.handover-sys{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm)}
.handover-sys .ic{font-size:22px;color:var(--blue);flex:none}
.handover-sys strong{display:block;font-size:14.5px;font-weight:700}
.handover-sys small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
@media(max-width:820px){.handover-sys-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.handover-sys-row{grid-template-columns:1fr}}
.activity{display:grid;gap:12px;align-content:start}
.activity-row{display:grid;grid-template-columns:20px 1fr;gap:9px;font-size:12px;color:var(--muted);line-height:1.35;align-items:start}
.activity-dot{width:20px;height:20px;border-radius:999px;background:#eaf3ff;color:var(--blue-ink);display:grid;place-items:center;font-size:9.5px;font-weight:700;font-family:var(--mono)}
.dash-ai{gap:2px}
.ai-stat{margin-bottom:6px}
.ai-stat .muted{font-size:10.5px;display:block}
.ai-stat strong{display:block;font-family:var(--disp);font-size:20px;letter-spacing:-.02em;font-weight:800;margin:1px 0 4px;white-space:nowrap}
.spark{width:100%;height:30px;display:block}
.spark polyline{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spark .fill{fill:rgba(26,116,255,.1);stroke:none}
/* ---- Platform: dark "Built for complex projects" band ---- */
.dark-band{background:#031027;color:#fff;padding:88px 0}
.dark-proof-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;align-items:center}
.dark-band h2{font-size:clamp(28px,3.2vw,42px);line-height:1.06;margin:0 0 16px;color:#fff;font-weight:800;letter-spacing:-.035em}
.dark-band .section-lead{color:rgba(255,255,255,.72)}
.dark-band .learn{color:#5fa0ff;margin-top:8px}
/* A plain statement, not a quote: no quotation mark, no attribution. The blue
keyline on the left carries the emphasis the quote mark used to. */
.stmt-card{border:1px solid rgba(124,174,255,.22);border-left:3px solid #2f88ff;border-radius:18px;padding:34px 36px;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 28px 80px rgba(0,0,0,.25)}
.stmt-card p{font-size:20px;color:rgba(255,255,255,.92);margin:0;line-height:1.5;font-weight:300;letter-spacing:-.01em}
/* ---- Solution detail modal ---- */
.solution-card{cursor:pointer}
.solution-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.solution-card:hover .learn .ic{transform:translateX(3px)}
.sol-modal-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;background:rgba(3,10,25,.55);backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
.sol-modal-overlay.open{opacity:1}
.sol-modal-overlay[hidden]{display:none}
.sol-modal{width:min(860px,100%);max-height:90vh;overflow-y:auto;background:#fff;border-radius:20px;box-shadow:0 40px 120px rgba(3,10,25,.5);position:relative;transform:translateY(10px) scale(.985);transition:transform .22s ease}
.sol-modal-overlay.open .sol-modal{transform:none}
.sol-modal-close{position:absolute;top:13px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0a1626;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.sol-modal-close:hover{background:#fff}
.sol-modal-media{position:relative;margin:0;height:clamp(190px,32vh,300px);background:#0b1c33;overflow:hidden;border-radius:20px 20px 0 0}
.sol-modal-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Diagram images (Engineering Map graph) show in full instead of being cropped —
the graph bg is light, so letterboxing on narrow/mobile banners blends in. */
.sol-modal-media.is-diagram{background:#eef1f5}
.sol-modal-media.is-diagram img{object-fit:contain;object-position:center}
/* Optional looping video (main.js only creates it when a solution defines
`video`); layered on top of the ![]()
, which stays as the poster/fallback. */
.sol-modal-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.sol-modal-media.is-diagram video{object-fit:contain;object-position:center}
.sol-modal-body{padding:28px 32px 30px}
.sol-modal-body .card-ic{font-size:26px;color:var(--blue);margin-bottom:14px;display:inline-flex}
.sol-modal-body h3{font-size:24px;margin:0 0 12px;font-weight:800;letter-spacing:-.03em}
.sol-modal-intro{color:var(--muted);font-size:15px;line-height:1.62;margin:0 0 20px;font-weight:300}
.sol-modal-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.sol-modal-list li{position:relative;padding-left:30px;font-size:14.5px;color:var(--ink);line-height:1.5}
.sol-modal-list li:before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;background:var(--blue);color:#fff;font-size:11px;font-weight:800;line-height:20px;text-align:center}
.sol-modal-note{font-size:12px;color:var(--muted-2);margin:0 0 18px;font-weight:300}
.sol-modal-actions{display:flex}
@media (max-width:640px){
.sol-modal-body{padding:22px 22px 26px}
.sol-modal-body h3{font-size:21px}
}
/* ---- Page hero (solutions / industries / resources) ---- */
.page-hero{padding:calc(var(--hdr-h) + 52px) 0 12px;text-align:center}
.page-hero .wrap{max-width:820px}
.page-hero h1{font-size:clamp(32px,4.2vw,50px);line-height:1.08;margin:0 auto 16px;letter-spacing:-.04em;font-weight:800;max-width:16ch}
/* Branscher's heading is two full sentences with an authored break, so it needs
the measure of its longer line rather than the 16ch default. */
.view[data-view="industries"] .page-hero h1{max-width:26ch}
.page-hero p{font-size:16px;color:var(--muted);max-width:620px;margin:0 auto;line-height:1.6;font-weight:300}
.section{padding:44px 0 96px}
/* ---- Solutions grid ---- */
.solution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.solution-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.solution-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0fb}
.card-ic{font-size:26px;color:var(--blue);margin-bottom:20px;display:inline-flex}
.solution-card h3{margin:0 0 9px;font-size:18px;font-weight:700}
.solution-card p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.6;font-weight:300}
.learn{color:var(--blue-ink);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.learn .ic{font-size:15px;transition:transform .18s ease}
.learn:hover .ic{transform:translateX(3px)}
/* ---- CTA strips ---- */
.strip{margin-top:36px;background:linear-gradient(90deg,#ecf4ff,#f8fbff);border:1px solid #d9e8ff;border-radius:16px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.strip-l{display:flex;align-items:center;gap:18px}
.strip-badge{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid #cfe0fb;display:grid;place-items:center;color:var(--blue);font-size:22px;flex:none}
.strip h3{margin:0;font-size:18px;font-weight:700}
.strip p{margin:4px 0 0;color:var(--muted);font-size:14px;font-weight:300}
/* ---- Industries grid ----
Four keyline cards, two up. The stock photography went with the two
industries that were dropped: there is no honest manufacturing photograph in
the asset set, and one of the four cards standing bare would have read as a
broken image. Same card idiom as .solution-card, so the two grids match. */
.industry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.industry-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.industry-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0fb}
.industry-card:hover .learn .ic{transform:translateX(3px)}
.industry-card .card-ic{margin-bottom:18px}
.industry-card h3{margin:0 0 9px;font-size:18px;font-weight:700}
.industry-card p{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.6;font-weight:300;flex:1}
.industry-card .learn{align-self:flex-start}
/* ---- Company ---- */
.company{padding:calc(var(--hdr-h) + 44px) 0 0}
.company-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.company-grid .eyebrow{margin-bottom:14px}
.company-grid h1{font-size:clamp(30px,3.6vw,46px);line-height:1.06;letter-spacing:-.04em;margin:0 0 18px;font-weight:800}
.company-lead{font-size:16px;line-height:1.68;color:var(--muted);max-width:520px;font-weight:300}
.value-list{display:grid;gap:22px;margin-top:34px}
.value{display:grid;grid-template-columns:46px 1fr;gap:16px}
.value-ic{width:44px;height:44px;border-radius:13px;border:1px solid #cfe0fb;background:#f4f9ff;color:var(--blue);display:grid;place-items:center;font-size:21px}
.value h3{margin:0 0 5px;font-size:16px;font-weight:700}
.value p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;font-weight:300}
.company-photo{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:#071327}
.company-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.company-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,9,22,.9) 0%,rgba(2,9,22,.4) 45%,rgba(2,9,22,0) 75%)}
/* The caption overlay is gone, so the heavy bottom scrim has nothing to make
legible; it stays only as a light tint that ties the photo to the dark CTA. */
.company-photo--plain:after{background:linear-gradient(0deg,rgba(2,9,22,.3) 0%,rgba(2,9,22,.06) 55%,rgba(2,9,22,0) 100%)}
/* Three facts, no invented statistics: a fact is a claim plus the thing that
backs it, so each card is a strong line and a plain one, nothing else. */
.fact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
.fact{padding:24px 24px;background:linear-gradient(180deg,#f8fbff,#f2f7fe);border:1px solid var(--line);border-radius:16px}
.fact strong{display:block;font-family:var(--disp);font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.fact span{display:block;font-size:14px;color:var(--muted);line-height:1.6;font-weight:300}
.company-cta{margin:64px 0 0;background:linear-gradient(120deg,#031027,#06274f);color:#fff;border-radius:18px;padding:34px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.company-cta h3{margin:0;font-size:22px;font-weight:800}
.company-cta p{margin:6px 0 0;color:rgba(255,255,255,.76);font-size:15px;font-weight:300}
/* ============================ FOOTER ============================ */
.footer{background:#020b1a;color:#fff;padding:52px 0 40px;margin-top:96px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brandcol{max-width:320px}
.footer-brandcol p{margin:14px 0 0;color:rgba(255,255,255,.6);font-size:14px;line-height:1.62;font-weight:300}
.footer-cols{display:flex;gap:70px;flex-wrap:wrap}
.footer-col h4{color:#fff;font-size:13px;margin:0 0 14px;letter-spacing:.01em;font-weight:700}
.footer-col a{display:block;color:rgba(255,255,255,.62);font-size:14px;padding:5px 0;cursor:pointer;font-weight:300}
.footer-col a[hidden]{display:none}
.footer-col a:hover{color:#fff}
.footer-address{font-style:normal;color:rgba(255,255,255,.62);font-size:14px;line-height:1.9;font-weight:300}
.footer-address a{color:rgba(255,255,255,.62)}
.footer-address a:hover{color:#fff}
.footer-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:22px;color:rgba(255,255,255,.5);font-size:13px;font-weight:300}
/* company view has its own footer spacing (cta already dark) */
.view[data-view="company"] .footer{margin-top:0}
/* ============================ RESPONSIVE ============================ */
@media (max-width:1000px){
/* Mobile bar = brand + hamburger only. Everything else drops into a menu. */
.nav-links,.nav-actions{display:none}
.mobile-menu{display:inline-flex}
.site-header.transparent{background:linear-gradient(180deg,#020d20,#020913);box-shadow:0 8px 30px rgba(0,0,0,.22);border-bottom-color:rgba(255,255,255,.08)}
.brand{font-size:19px;gap:9px}
.brand-mark{height:26px}
/* Open state: header grows and the links + actions stack full-width below. */
.site-header.nav-open{background:#020b1a}
.site-header.nav-open .nav{height:auto;min-height:var(--hdr-h);flex-wrap:wrap;align-items:center;row-gap:0;padding-bottom:10px}
.site-header.nav-open .nav-links{
display:flex;flex-direction:column;align-items:stretch;order:3;flex-basis:100%;gap:2px;
margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.site-header.nav-open .nav-links a{width:100%;padding:14px 12px;border-radius:10px;font-size:16px}
.site-header.nav-open .nav-links a.active:after{display:none}
.site-header.nav-open .nav-links a.active{background:rgba(47,140,255,.16)}
.site-header.nav-open .nav-links a:hover{background:rgba(255,255,255,.06)}
.site-header.nav-open .nav-actions{
display:flex;order:4;flex-basis:100%;align-items:center;flex-wrap:wrap;gap:14px;padding-top:12px}
.site-header.nav-open .nav-actions .login{display:inline-block}
/* Boka demo already lives in the hero + section CTAs; drop it from the mobile menu. */
.site-header.nav-open .nav-actions .btn-primary{display:none}
.mobile-menu{order:2}
.hero-proof{grid-template-columns:repeat(2,1fr);gap:22px}
.solution-grid{grid-template-columns:repeat(2,1fr)}
/* 5 across becomes 3 + 2: the strip wraps on purpose rather than scrolling
sideways, so no tile can hide off-screen. */
.fam-strip{grid-template-columns:repeat(3,1fr)}
.shot-grid{grid-template-columns:1fr}
/* Sambanden: the row of four becomes two, then one on a phone. */
.samband{padding:60px 0 64px}
.samband .head{margin-bottom:34px}
.samband-list{grid-template-columns:repeat(2,1fr);gap:16px 24px;margin-bottom:28px}
.pr-foot{grid-template-columns:1fr}
.grund-grid{grid-template-columns:1fr;gap:34px}
.psec{padding:64px 0}
.mt-band{padding:0 0 64px}
.family{padding:32px 0 64px}
.company-grid{grid-template-columns:1fr;gap:36px}
.fact-row{grid-template-columns:1fr;gap:14px;margin-top:44px}
.split,.dark-proof-grid{grid-template-columns:1fr;gap:40px}
.app-window{grid-template-columns:1fr}
.app-side{display:none}
.dash-grid{grid-template-columns:1fr}
.metric-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.wrap{width:min(100% - 32px,1200px)}
:root{--hdr-h:62px}
.hero{padding-top:calc(var(--hdr-h) + 46px)}
/* "anläggningsinformation" is one 22-character word: on a phone the headline
has to scale with the viewport, or it runs into the right edge on anything
narrower than a 390. break-word is the floor under that. */
.hero h1{font-size:clamp(26px,7.9vw,34px);overflow-wrap:break-word}
/* Same 22-character word in the Insikter page-hero: the desktop clamp floors
at 32px, which is 351px of glyphs against a 328px column on a 375 phone. */
.page-hero h1{font-size:clamp(28px,7.9vw,32px);overflow-wrap:break-word}
.hero-proof,.solution-grid,.industry-grid{grid-template-columns:1fr}
.fam-strip{grid-template-columns:1fr}
/* the calc reads top to bottom on a phone; the arrow turns with it */
.oee-calc{grid-template-columns:1fr;gap:8px}
.oee-mid{width:auto;grid-auto-flow:column;align-items:center;justify-content:center;gap:10px}
.oee-mid .oee-ar{transform:rotate(90deg)}
.samband-list{grid-template-columns:1fr;gap:12px}
.samband-list li{font-size:14.5px}
.fam-tile{padding:18px 17px}
.tpl-tree li{margin-left:calc(var(--d)*8px)}
.cx-actions{align-items:flex-start;flex-direction:column;gap:16px}
.metric-grid{grid-template-columns:1fr}
.strip,.company-cta{flex-direction:column;align-items:flex-start}
.footer-top{flex-direction:column;gap:28px}
.footer-cols{gap:40px}
}
/* ============================ INSIKTER (articles) ============================ */
.insikter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.insikter-grid[hidden],.insikter-article[hidden]{display:none}
.insikter-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.insikter-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe0fb}
.insikter-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.insikter-card-media{position:relative;height:184px;background:#0b1c33}
.insikter-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.insikter-card-body{display:flex;flex-direction:column;flex:1;padding:22px}
.insikter-kicker{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue-ink);font-weight:700}
.insikter-card-body h3{font-size:18px;line-height:1.28;margin:10px 0 9px;font-weight:700;letter-spacing:-.01em}
.insikter-dek{font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.58;font-weight:300}
.insikter-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto}
.insikter-meta{font-family:var(--mono);font-size:11px;color:var(--muted-2);font-weight:500;letter-spacing:.02em}
.insikter-card .learn{color:var(--blue-ink);font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px}
.insikter-card:hover .learn .ic{transform:translateX(3px)}
/* Article reading view */
.insikter-article{max-width:720px;margin:0 auto}
.insikter-back{border:0;background:transparent;color:var(--blue-ink);font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;padding:6px 0;margin-bottom:16px}
.insikter-back:hover{text-decoration:underline}
.insikter-art-head .insikter-kicker{display:block;margin-bottom:14px}
.insikter-art-head h1{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.035em;font-weight:800;margin:0 0 14px}
.insikter-art-head .insikter-meta{display:block;margin-bottom:26px}
.insikter-figure{margin:0 0 30px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.insikter-figure img{width:100%;display:block;aspect-ratio:2/1;object-fit:cover}
.insikter-figure figcaption{font-size:12.5px;color:var(--muted-2);padding:12px 16px;background:var(--soft);font-weight:300}
.insikter-body p{font-size:17px;line-height:1.72;color:var(--ink);margin:0 0 16px;font-weight:300}
.insikter-body-h{font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin:34px 0 14px}
.insikter-body-h:first-child{margin-top:0}
.insikter-body p + .insikter-body-h{margin-top:36px}
.insikter-body a{color:var(--blue-ink);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.insikter-sources{font-family:var(--mono);font-size:12px;color:var(--muted-2);margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);font-weight:500}
/* Article signature: handwritten name (Allura, loaded in the @import above)
over a small muted role line. The colour sits between --ink and --muted on
purpose: Dennis wanted the signature softer than body text ("less black"). Used from article body entries via innerHTML,
so the classes must live here, not in the SPA - the SSR article pages link
this same stylesheet. */
.ins-sign{font-family:"Allura",cursive;font-size:44px;font-weight:400;line-height:1.1;color:#45566e;display:inline-block;margin-top:10px}
.ins-sign-role{font-size:13px;color:var(--muted);letter-spacing:.02em}
/* Signature block with portrait: used from article body entries (SPA innerHTML
+ SSR raw ), so it must survive being wrapped in a paragraph. */
.ins-signature{display:flex;align-items:center;gap:16px;margin-top:22px}
.ins-sign-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0}
.co-founder{display:flex;align-items:center;gap:14px;margin:18px 0 6px}
.co-founder img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0}
.co-founder .name{font-weight:700}
.co-founder .role{font-size:13px;color:var(--muted)}
.ins-list{margin:0 0 18px;padding-left:22px}
.ins-list li{margin:0 0 6px;line-height:1.6}
.insikter-art-cta{margin-top:34px}
/* News teaser strip (reuses the .strip pattern already used in Solutions/Industries/Resources).
The other strips carry one line, so their badge is centred against it. This one carries a
kicker as well, and a badge floating in the middle of a four-line block on a phone reads as
unaligned, so it rides at the top with the kicker. */
.news-teaser .strip-l{align-items:flex-start}
.news-teaser .insikter-kicker{display:block;margin-bottom:6px}
.news-teaser h3{font-size:16px}
/* Manifest link on the /home hero (light, sits under the hero CTAs) */
.hero-manifest{display:inline-flex;align-items:center;margin-top:22px;color:rgba(255,255,255,.9);font-weight:600;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:2px;transition:color .15s ease,border-color .15s ease}
.hero-manifest::after{content:' \2192'}
.hero-manifest:hover{color:#fff;border-color:#fff}
.hero-manifest[hidden]{display:none}
/* Admin-only: draft/published state + one-click publish (super-admin sees these) */
.insikter-badge{position:absolute;right:14px;top:14px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;box-shadow:0 6px 16px rgba(8,24,53,.14)}
.insikter-manifest-badge{position:absolute;left:14px;top:14px;z-index:2;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(2,11,26,.32)}
.insikter-badge--draft{background:#fff4d6;color:#8a5a00;border:1px solid #f0d68a}
.insikter-badge--published{background:#e3f6e9;color:#1c7a43;border:1px solid #b7e4c6}
.insikter-admin{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:0 0 22px;padding:12px 16px;border:1px dashed #c9d7ea;border-radius:12px;background:var(--soft)}
.insikter-status{font-family:var(--mono);font-size:12px;font-weight:600}
.insikter-status.draft{color:#8a5a00}
.insikter-status.published{color:#1c7a43}
.insikter-pub{border:0;border-radius:10px;padding:9px 16px;font-family:var(--body);font-weight:600;font-size:13px;cursor:pointer;background:var(--blue);color:#fff;transition:background .16s ease}
.insikter-pub:hover{background:var(--blue-2)}
.insikter-pub--unpub{background:#fff;color:var(--muted);border:1px solid var(--line)}
.insikter-pub--unpub:hover{background:#f0f5fd;color:var(--ink)}
.insikter-pub:disabled{opacity:.5;cursor:default}
.insikter-admin-btns{display:flex;gap:10px;flex-wrap:wrap}
/* Admin: Published / Draft preview tabs */
.insikter-tabs{display:flex;gap:8px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.insikter-tabs[hidden]{display:none}
.insikter-tab{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;color:var(--muted);padding:10px 4px;margin-bottom:-1px;border-bottom:2px solid transparent}
.insikter-tab:hover{color:var(--ink)}
.insikter-tab.active{color:var(--blue-ink);border-bottom-color:var(--blue)}
.insikter-empty{color:var(--muted);font-size:15px;font-weight:300;padding:28px 4px;margin:0}
/* Admin: new-article toolbar + inline editor */
.insikter-toolbar{display:flex;justify-content:flex-end;margin:0 0 18px}
.insikter-toolbar[hidden]{display:none}
.insikter-editor-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 20px}
.insikter-editor-img{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:0 0 24px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.insikter-editor-preview{width:280px;max-width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#0b1c33}
.insikter-editor-upl{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px}
.insikter-hint{font-size:12.5px;color:var(--muted-2);margin:0;font-weight:300}
.insikter-editor-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.insikter-editor-col h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-ink);font-family:var(--mono);margin:0 0 14px}
.insikter-field{display:block;margin:0 0 14px}
.insikter-field-label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 5px}
.insikter-field input,.insikter-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-family:var(--body);font-size:16px;color:var(--ink);background:#fff;line-height:1.5}
.insikter-field textarea{resize:vertical}
.insikter-field input:focus,.insikter-field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.insikter-editor-adv{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.insikter-editor-actions{display:flex;align-items:center;gap:12px;margin-top:24px;flex-wrap:wrap}
.insikter-del{color:#b4232a}
.insikter-del:hover{background:#fdecec;color:#8e1b21}
.insikter-editor-actions .insikter-del{margin-left:auto}
@media (max-width:720px){
.insikter-editor-cols,.insikter-editor-adv{grid-template-columns:1fr}
}
/* AI scout form (modal) */
.insikter-scout-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;background:rgba(3,10,25,.55);backdrop-filter:blur(6px)}
.insikter-scout{position:relative;width:min(520px,100%);max-height:90vh;overflow-y:auto;background:#fff;border-radius:18px;box-shadow:0 40px 120px rgba(3,10,25,.5);padding:28px}
.insikter-scout-loading{position:absolute;inset:0;z-index:2;background:rgba(255,255,255,.95);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:24px}
.insikter-scout-lmsg{font-weight:600;font-size:15px;margin:0;color:var(--ink)}
.insikter-spinner{width:38px;height:38px;border:3px solid #e0e9f5;border-top-color:var(--blue);border-radius:50%;animation:insikter-spin .8s linear infinite;margin-bottom:6px}
@keyframes insikter-spin{to{transform:rotate(360deg)}}
.insikter-scout-title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 18px}
.insikter-scout .insikter-field{margin:0 0 16px}
.insikter-scout-group{margin:0 0 16px}
.insikter-scout-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.insikter-scout-opt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.insikter-scout-opt:hover{border-color:#cfe0fb;background:#f4f9ff}
.insikter-scout-opt input{accent-color:var(--blue);margin:0}
.insikter-scout-opt:has(input:checked){border-color:var(--blue);background:#eaf2ff;color:var(--blue-ink);font-weight:600}
.insikter-scout-actions{display:flex;gap:12px;margin-top:22px}
@media (max-width:1000px){
.insikter-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.insikter-grid{grid-template-columns:1fr}
.insikter-body p{font-size:16px}
}