/* AIX · system: brand/AIX-Design-System-2026-08.pdf · genre: editorial
   OWN THE FUTURE · av AIX · shared styles, mobile first
   Hallmark-audit 2026-08-06: fixes applied, spacing-scale tokens deferred to rev 3 */
:root{
  --paper:#ffffff;
  --ink:#000000;
  --accent:#fedc00;
  --blue:#02abe5;
  --pink:#f29bc9;
  --orange:#ff8200;
  --green:#2fa24b;
  --purple:#9e79d9;
  --warm:#f5f5eb;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ink-70:#4d4d4d;
  --ink-55:#666666;
  --ink-12:#e0e0e0;
  --ink-70:color-mix(in srgb,var(--ink) 70%,var(--paper));
  --ink-55:color-mix(in srgb,var(--ink) 60%,var(--paper));
  --ink-12:color-mix(in srgb,var(--ink) 12%,var(--paper));
  --sect:clamp(56px,9vw,110px);
  --ease:cubic-bezier(.16,1,.3,1);
  --field-ink:color-mix(in srgb,var(--ink) 82%,#888);
  --control-h:48px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tile,.tile:hover{transform:none;transition:none}.btn:active{transform:none}}
h1,h2,h3{overflow-wrap:anywhere}
body{
  font-family:'Archivo',Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:16.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:2px solid var(--ink)}
header .masthead{color:var(--paper)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:700;z-index:100}
.skip:focus{left:0}
section[id],main[id]{scroll-margin-top:76px}
a:focus-visible,.btn:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0}
.masthead{font-weight:900;font-size:16px;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.byline{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.logo{display:flex;align-items:baseline;gap:10px;min-width:0}
.btn{display:inline-block;font-weight:700;font-size:14.5px;padding:12px 20px;transition:background .15s var(--ease),color .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--paper);color:var(--ink)}
.btn-ghost{border:2px solid var(--ink);color:var(--ink);padding:10px 18px}
.btn-ghost:hover{background:var(--ink);color:var(--accent)}
.btn-onyellow{background:var(--ink);color:var(--accent)}
.btn-onyellow:hover{background:var(--paper);color:var(--ink)}
nav .btn{padding:9px 14px;font-size:12.5px}
header .btn-onyellow{background:var(--accent);color:var(--ink)}
header .btn-onyellow:hover{background:var(--paper);color:var(--ink)}
@media (max-width:359px){.byline{display:none}.masthead{font-size:15px}}
@media (min-width:760px){
  .masthead{font-size:19px}
  nav .btn{padding:10px 18px;font-size:13.5px}
}

/* ---------- cover hero (home) ---------- */
.hero{background:var(--accent);padding:clamp(40px,7vw,80px) 0 clamp(48px,10vw,110px);border-bottom:2px solid var(--ink)}
.eyebrow{display:inline-block;background:var(--ink);color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;padding:7px 12px 6px;margin-bottom:26px}
h1{font-size:clamp(46px,13vw,140px);line-height:.94;letter-spacing:-.04em;font-weight:900}
.hero .sub{margin-top:24px;font-size:clamp(16.5px,1.7vw,20px);color:color-mix(in srgb,var(--ink) 80%,var(--accent));max-width:600px;font-weight:600}
.ctas{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.herometa{display:flex;gap:clamp(16px,3.5vw,40px);flex-wrap:wrap;border-top:2px solid var(--ink);margin-top:clamp(34px,6vw,56px);padding-top:18px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em}

/* ---------- sections ---------- */
section{padding:var(--sect) 0 0}
.kicker{display:inline-block;background:var(--accent);color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;padding:6px 10px 5px;margin-bottom:16px;text-transform:uppercase}
h2{font-size:clamp(28px,6vw,52px);letter-spacing:-.03em;font-weight:900;line-height:1.05}
.lede{color:var(--ink-70);font-size:clamp(15.5px,1.5vw,18px);max-width:640px;margin-top:12px}
.source{font-size:12px;color:var(--ink-55);margin-top:18px}

/* ---------- megatrends tiles ---------- */
.tiles{display:grid;grid-auto-flow:column;grid-auto-columns:66%;gap:12px;margin-top:clamp(26px,4vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.tile{scroll-snap-align:start;border:2px solid var(--ink);display:flex;flex-direction:column;background:var(--paper);transition:transform .2s var(--ease)}
.tile:hover{transform:translateY(-3px)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1)}
.tile .lbl{padding:13px 14px;font-weight:800;font-size:14.5px;line-height:1.25;letter-spacing:-.01em;flex:1;display:flex;flex-direction:column;gap:5px}
.tile .lbl .no{font-family:var(--mono);font-size:11px;font-weight:700;opacity:.75}
.tile.c1 .lbl{background:var(--blue)}
.tile.c2 .lbl{background:var(--pink)}
.tile.c3 .lbl{background:var(--orange)}
.tile.c4 .lbl{background:var(--green)}
.tile.c5 .lbl{background:var(--purple)}
@media (min-width:760px){
  .tiles{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
}

/* ---------- split panel (color field + B&W photo) ---------- */
.split{display:grid;border:2px solid var(--ink);margin-top:clamp(26px,4vw,40px)}
.split figure img{width:100%;height:100%;min-height:240px;object-fit:cover;filter:grayscale(1)}
.split .field{padding:clamp(24px,5vw,56px);display:flex;flex-direction:column;justify-content:center;gap:12px}
.split .field.f-yellow{background:var(--accent)}
.split .field.f-blue{background:var(--blue)}
.split .field.f-pink{background:var(--pink)}
.split .field.f-orange{background:var(--orange)}
.split .field.f-green{background:var(--green)}
.split .field.f-purple{background:var(--purple)}
.split .field .kicker{background:var(--ink);color:var(--paper);margin-bottom:2px}
.split .bignum{display:block;font-weight:900;font-size:clamp(64px,8vw,124px);line-height:.9;letter-spacing:-.04em}
.split .bignum small{font-size:.42em;font-weight:900;letter-spacing:-.02em}
.split h3{font-size:clamp(20px,3.6vw,30px);font-weight:900;letter-spacing:-.025em;line-height:1.12;max-width:460px}
.split p{font-size:clamp(15px,1.5vw,17px);color:var(--field-ink);max-width:480px;font-weight:500}
.split .punch{font-weight:800;color:var(--ink)}
@media (min-width:820px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split figure{order:2}
  .split figure img{min-height:420px}
}

/* ---------- chapter columns (home, deck grammar: rubrik + foto + teman) ---------- */
.chapcols{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;margin-top:clamp(26px,4vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.ccol{scroll-snap-align:start;display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--paper);transition:transform .2s var(--ease)}
.ccol:hover{transform:translateY(-3px)}
.ccol .ch{padding:13px 14px;font-weight:800;font-size:15px;line-height:1.22;letter-spacing:-.01em;display:flex;flex-direction:column;gap:4px;min-height:78px}
.ccol .no{font-family:var(--mono);font-size:11px;font-weight:700;opacity:.75}
.ccol img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1)}
.ccol .cf{padding:11px 14px 13px;font-size:13.5px;font-weight:600;flex:1}
.ccol .cf i{display:block;font-style:normal;padding:4px 0;border-bottom:1px solid rgba(0,0,0,.18)}
.ccol .cf i:last-child{border-bottom:none}
.c1 .ch,.c1 .cf{background:var(--blue)}
.c2 .ch,.c2 .cf{background:var(--pink)}
.c3 .ch,.c3 .cf{background:var(--orange)}
.c4 .ch,.c4 .cf{background:var(--green)}
.c5 .ch,.c5 .cf{background:var(--purple)}
@media (min-width:760px){
  .chapcols{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
}

/* ---------- driver-kolumner (hög bild + etikett under) ---------- */
.drvcols{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;margin-top:clamp(26px,4vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.dcol{scroll-snap-align:start;display:flex;flex-direction:column;border:2px solid var(--ink);background:var(--paper);transition:transform .2s var(--ease)}
.dcol:hover{transform:translateY(-3px)}
.dcol img{width:100%;height:clamp(240px,28vw,400px);object-fit:cover;filter:grayscale(1)}
.dcol .dl2{padding:12px 14px 14px;font-weight:800;font-size:14.5px;line-height:1.25;letter-spacing:-.01em;display:flex;flex-direction:column;gap:4px;flex:1}
.c1 .dl2{background:var(--blue)}
.c2 .dl2{background:var(--pink)}
.c3 .dl2{background:var(--orange)}
.c4 .dl2{background:var(--green)}
.c5 .dl2{background:var(--purple)}
@media (min-width:760px){
  .drvcols{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
}

/* ---------- chapter sub-page ---------- */
.chero{border-bottom:2px solid var(--ink);padding:clamp(40px,8vw,90px) 0 clamp(34px,6vw,64px)}
.chero.c1{background:var(--blue)}
.chero.c2{background:var(--pink)}
.chero.c3{background:var(--orange)}
.chero.c4{background:var(--green)}
.chero.c5{background:var(--purple)}
.crumb{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;margin-bottom:20px}
.crumb a{text-decoration:underline;text-underline-offset:3px}
.chero .cnum{font-weight:900;font-size:clamp(64px,16vw,150px);letter-spacing:-.05em;line-height:.85}
.chero h1{font-size:clamp(32px,8vw,76px);letter-spacing:-.035em;line-height:1;margin-top:10px}
.chero .cdesc{margin-top:18px;font-size:clamp(16px,1.7vw,19px);font-weight:600;max-width:600px;color:var(--field-ink)}
.themepills{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.themepills span{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:6px 10px 5px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:clamp(24px,4vw,38px)}
.tbox{border:2px solid var(--ink);background:var(--paper);padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.tbox b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.tbox span{font-size:13.5px;line-height:1.45;color:var(--ink-70)}
.empty{background:var(--warm);border:2px solid var(--ink);padding:clamp(24px,5vw,48px);margin-top:clamp(26px,4vw,40px)}
.empty h3{font-size:clamp(20px,3.6vw,30px);font-weight:900;letter-spacing:-.02em}
.empty p{margin-top:8px;color:var(--ink-70);font-size:15px;max-width:520px}

/* ---------- produkten ---------- */
.prod{background:var(--warm);border:2px solid var(--ink);padding:clamp(24px,5vw,52px)}
.prod h2{font-size:clamp(22px,4vw,34px)}
.prod .body{margin-top:12px;color:var(--ink-70);font-size:15px;max-width:560px}
.prod .docs{margin-top:16px;font-size:13.5px;color:var(--ink-70)}
.prod .docs a{font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.15em;text-underline-offset:.15em}
.owners-chip{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;background:var(--pink);padding:7px 11px 6px;margin-top:16px}

/* ---------- nyhetsbrev ---------- */
.follow{background:var(--accent);color:var(--ink);border:2px solid var(--ink);padding:clamp(28px,6vw,64px);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.follow h2{font-size:clamp(24px,5vw,44px)}
.follow p{color:color-mix(in srgb,var(--ink) 78%,var(--accent));font-size:15.5px;max-width:480px;margin-top:10px}
.nlbox{flex:1 1 300px;max-width:520px}
.nlform{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nlform input{font-family:inherit;font-size:15px;font-weight:600;height:var(--control-h);padding:0 15px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);flex:1 1 200px;min-width:0}
.nlform input::placeholder{color:var(--ink-55);font-weight:400}
.nlform input:disabled{opacity:.55;cursor:not-allowed}
.nlform .btn{height:var(--control-h);display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
.nlmsg{font-family:var(--mono);font-size:12.5px;font-weight:600;margin-top:12px;display:block;min-height:1.5em;visibility:hidden}
.nlmsg.show{visibility:visible}
.nlalt{margin-top:14px;font-size:13.5px}
.nlalt a{font-weight:700;text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.15em}

/* ---------- footer ---------- */
footer{padding:clamp(34px,6vw,60px) 0 52px;margin-top:var(--sect);border-top:2px solid var(--ink)}
.risk{font-size:12px;line-height:1.6;color:var(--ink-55);max-width:72ch}
.risk b{color:var(--ink-70)}
.fmeta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:22px;font-size:12.5px;color:var(--ink-55)}
.fmeta a{text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
.fmeta .mh{font-weight:900;font-size:14px;color:var(--ink);letter-spacing:-.02em}

/* ---------- chat (visuell demo, ingen backend) ---------- */
.chatw{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.chatb{width:54px;height:54px;background:var(--ink);color:var(--accent);border:2px solid var(--ink);font-family:'Archivo',Arial,sans-serif;font-weight:900;font-size:24px;line-height:1;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.chatb:hover{background:var(--accent);color:var(--ink)}
.chatb:active{transform:translateY(1px)}
.chatp{width:min(330px,calc(100vw - 36px));background:var(--paper);border:2px solid var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.chead{background:var(--ink);color:var(--paper);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cwm{font-weight:900;font-size:13.5px;letter-spacing:-.01em}
.cbeta{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.cbody{max-height:190px;overflow-y:auto;padding:4px 0 2px}
.cb{max-width:85%;padding:9px 12px;font-size:13.5px;line-height:1.45;margin:8px 10px}
.cb.q{background:var(--accent);margin-left:auto;font-weight:600}
.cb.a{background:var(--warm);border:1px solid var(--ink-12)}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px 12px}
.chip-q{border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-family:inherit;font-weight:700;font-size:12px;padding:7px 10px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.chip-q:hover{background:var(--ink);color:var(--accent)}
.chip-q:active{transform:translateY(1px)}
.cinput{display:flex;border-top:2px solid var(--ink)}
.cinput input{flex:1;border:none;padding:12px 13px;font-family:inherit;font-size:13.5px;background:var(--warm);color:var(--ink);min-width:0}
.cinput input:disabled{opacity:.75;cursor:not-allowed}
.csend{width:46px;border:none;background:var(--ink);color:var(--accent);font-weight:900;font-size:16px}
.csend:disabled{opacity:.55;cursor:not-allowed}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- hero load sequence (home) ---------- */
.hl{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.02}
.hli{display:inline-block}
.js .hli{transform:translateY(108%);animation:rise .75s var(--ease) .1s forwards}
.js .h2i{animation-delay:.22s}
@keyframes rise{to{transform:translateY(0)}}
.js .fx{opacity:0;transform:translateY(10px);animation:fadeup .6s var(--ease) forwards}
.js .f1{animation-delay:.05s}
.js .f2{animation-delay:.6s}
.js .f3{animation-delay:.75s}
@keyframes fadeup{to{opacity:1;transform:none}}

/* ---------- fokusord ---------- */
.uline{position:relative;display:inline-block}
.js .uline::after{content:"";position:absolute;left:.02em;right:.06em;bottom:.02em;height:.07em;background:var(--ink);transform:scaleX(0);transform-origin:left;animation:draw .55s var(--ease) 1.05s forwards}
@keyframes draw{to{transform:scaleX(1)}}
.fw{background-image:linear-gradient(180deg,transparent 44%,var(--accent) 44%,var(--accent) 94%,transparent 94%);background-repeat:no-repeat;background-size:0% 100%;padding:0 .06em;margin:0 -.06em}
.js .fw{transition:background-size .7s var(--ease) .25s}
.js .rv.in .fw,html:not(.js) .fw{background-size:100% 100%}

/* ---------- hero-cta ---------- */
.cta-hero{font-size:clamp(16px,1.8vw,19px);font-weight:900;letter-spacing:-.01em;padding:16px 30px;display:inline-flex;align-items:center;gap:12px}
.cta-hero .ar{display:inline-block;font-weight:900;font-size:1.2em;line-height:1;animation:hop 1.6s cubic-bezier(.45,0,.55,1) infinite}
.cta-hero:hover .ar{animation-duration:.7s}
@keyframes hop{0%,100%{transform:translateY(-1px)}50%{transform:translateY(4px)}}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);overflow:hidden;border-bottom:2px solid var(--ink)}
.tk{display:flex;width:max-content;white-space:nowrap;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent);padding:11px 0}
.tk span{padding-right:56px}
.js .tk{animation:tick 32s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- split photo wipe ---------- */
.js .split.rv figure img{clip-path:inset(0 100% 0 0)}
.js .split.rv.in figure img{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease) .15s}

/* ---------- hover micro ---------- */
.tile{overflow:hidden}
.tile img{transition:transform .35s var(--ease)}
.tile:hover img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .hli,.js .fx{animation:none;transform:none;opacity:1}
  .js .tk{animation:none}
  .js .split.rv figure img,.js .split.rv.in figure img{clip-path:none;transition:none}
  .tile:hover img{transform:none}
  .ccol,.ccol:hover,.dcol,.dcol:hover{transform:none;transition:none}
  .cta-hero .ar{animation:none}
  .js .uline::after{animation:none;transform:scaleX(1)}
  .js .fw{transition:none;background-size:100% 100%}
}
@media print{.js .rv{opacity:1;transform:none}.js .hli,.js .fx{animation:none;transform:none;opacity:1}}