:root {
  --paper:#f6f5f1; --surface:#ffffff; --elevated:#efece4;
  --border:#d8d3c7; --border-dim:#e6e2d8;
  --head:#1c1a16; --body:#403b32; --dim:#736c5e;
  --dot:rgba(28,26,22,.05);
  --accent:#16795b; --accent-hover:#0f5b44; --accent-muted:rgba(22,121,91,.10);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:3px 3px 0 var(--border);
  --shadow-accent:5px 5px 0 var(--accent);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  min-height:100vh;
  color:var(--body);
  background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3 { color:var(--head); letter-spacing:-.025em; line-height:1.1; font-family:'Space Grotesk', 'Inter', sans-serif; }
h1 { font-size:clamp(33px,4.6vw,52px); font-weight:700; }
h2 { font-size:clamp(27px,3.3vw,40px); font-weight:700; }
h3 { font-size:19px; font-weight:600; }
a { color:inherit; text-decoration:none; }

.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.ey { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }

/* buttons */
.btn-pri {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff;
  border:1.5px solid var(--accent-hover); border-radius:3px;
  padding:13px 22px; font-weight:600; font-size:15px; cursor:pointer;
  box-shadow:2px 2px 0 var(--accent-hover); transition:transform .15s, box-shadow .15s;
}
.btn-pri:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--accent-hover); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--accent); color:var(--accent); background:transparent;
  border-radius:3px; padding:13px 20px; font-weight:600; font-size:15px;
  transition:background-color .15s, color .15s;
}
.btn-ghost:hover { background:var(--accent); color:#fff; }
.btn-nav {
  font-family:var(--mono); font-size:13px; font-weight:600; line-height:1;
  padding:10px 16px; border:1px solid var(--accent); border-radius:3px;
  color:var(--accent); background:transparent;
  transition:background-color .15s, color .15s;
}
.btn-nav:hover { background:var(--accent); color:#fff; }

/* nav */
.nav { position:sticky; top:0; z-index:50; border-bottom:2px solid var(--border); background:rgba(255,255,255,.82); backdrop-filter:blur(8px); }
.nav .row { display:flex; align-items:center; gap:12px; height:54px; }
.dots { display:flex; gap:6px; }
.dots i { width:10px; height:10px; border-radius:50%; background:var(--border); }
.dots i:nth-child(1){ background:var(--accent); }
.dots i:nth-child(2){ background:#e0a72f; }
.wm { font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--head); font-size:20px; letter-spacing:-.04em; }
.wm .dot, .foot-wm .dot { color:var(--accent); }
.vr { width:1px; height:16px; background:var(--border); }
.nav .tag { font-family:var(--mono); font-size:12px; color:var(--dim); }
.nav .links { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav .links a.txt { font-family:var(--mono); font-size:13px; color:var(--dim); padding:0 8px; }
.nav .links a.txt:hover { color:var(--accent); }
.gh-btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--head); padding:8px 12px; border:1px solid var(--border); border-radius:3px; background:var(--surface); transition:border-color .15s, color .15s; }
.gh-btn:hover { border-color:var(--accent); color:var(--accent); }
.gh-btn svg { display:block; }

/* hero */
.hero { padding:clamp(34px,5vw,60px) 0 clamp(20px,3vw,34px); }
/* Tekst + bilde samlet og midtstilt som én gruppe (i stedet for tekst helt til
   venstre og bildet helt til høyre). */
.hero-grid { display:flex; justify-content:center; align-items:center; gap:clamp(26px,4vw,46px); flex-wrap:wrap; }
.hero-text { min-width:0; }
.hero .ey { display:block; margin-bottom:14px; }
.hero h1 { margin-bottom:14px; }
.hero .sub { font-size:18px; line-height:1.6; color:var(--body); max-width:520px; margin:0; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero-photo { justify-self:center; width:200px; max-width:38vw; aspect-ratio:1/1; border-radius:50%; overflow:hidden; border:3px solid var(--border); box-shadow:5px 5px 0 var(--accent); background:var(--elevated); }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block; }
@media (max-width:880px) {
  .hero-grid { flex-direction:column; text-align:center; }
  .hero .sub { margin-left:auto; margin-right:auto; }
  .hero-photo { order:-1; }
}

/* layout */
.pad { padding:clamp(56px,7vw,96px) 0; }
.pad-sm { padding:clamp(20px,3vw,36px) 0; }
.alt { background:linear-gradient(var(--accent-muted), var(--accent-muted)); }
.head-block { max-width:560px; margin-bottom:40px; }
.head-block .ey { display:block; margin-bottom:14px; }
.head-block h2 { margin-bottom:12px; }
.head-block p { font-size:16px; color:var(--body); }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* window panel */
.win { background:var(--surface); border:1.5px solid var(--border); border-radius:5px; box-shadow:var(--shadow); }
.win.lift { transition:transform .15s, box-shadow .15s; }
.win.lift:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-accent); }
.tb { display:flex; align-items:center; gap:9px; padding:8px 13px; border-bottom:1.5px solid var(--border); background:var(--elevated); border-radius:4px 4px 0 0; }
.tb .ttl { font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.01em; }
.tb .rt { margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--accent); border:1px solid var(--border); padding:2px 8px; border-radius:4px; white-space:nowrap; }
.bd { padding:22px; }

/* tech stack — databasert bruk */
.stack-win { max-width:640px; margin-left:auto; margin-right:auto; }
.stack-bd { padding:11px 16px; }
.stack-row { display:flex; flex-direction:column; gap:6px; }
.sk-row { display:grid; grid-template-columns:152px 1fr 34px 92px; align-items:center; gap:11px; }
.sk-name { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--head); }
.sk-name img { width:14px; height:14px; display:block; flex-shrink:0; }
.sk-bar { height:6px; background:var(--elevated); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.sk-bar i { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius:4px 0 0 4px; }
.sk-pct { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--accent); text-align:right; }
.sk-note { font-family:var(--mono); font-size:10.5px; color:var(--dim); }
@media (max-width:880px) {
  /* Antallet flyttes opp på samme linje som prosenten (ikke egen linje under baren). */
  .sk-row { grid-template-columns:1fr auto auto; gap:6px 8px; align-items:center; }
  .sk-name { grid-area:1 / 1; }
  .sk-pct { grid-area:1 / 2; }
  .sk-note { grid-area:1 / 3; text-align:right; }
  .sk-bar { grid-area:2 / 1 / 3 / 4; }
}

/* card */
.card { display:flex; flex-direction:column; }
.card .bd { display:flex; flex-direction:column; flex:1; }
.card-head { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.app-icon { width:54px; height:54px; border-radius:13px; border:1.5px solid var(--border); object-fit:cover; flex-shrink:0; box-shadow:2px 2px 0 var(--border-dim); }
.app-icon.placeholder { display:flex; align-items:center; justify-content:center; background:var(--elevated); color:var(--dim); font-family:var(--mono); font-size:22px; }
.card h3 { margin-bottom:3px; }
.card .tagline { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.01em; line-height:1.4; }
.card .desc { font-size:14.5px; line-height:1.6; color:var(--body); margin-bottom:18px; }
.card .open { margin-top:auto; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent); }
.card .open:hover { text-decoration:underline; }
.card .open.soon { color:var(--dim); }
.badge-link { margin-top:auto; display:inline-block; }
.appstore-badge { height:42px; display:block; transition:transform .15s; }
.badge-link:hover .appstore-badge { transform:translateY(-1px); }

/* web cards — faithful gjengivelse hentet fra repoene */
.webcard { display:flex; flex-direction:column; overflow:hidden; }
.webcard .bd { display:flex; flex-direction:column; flex:0 0 auto; }
.webcard .desc { font-size:14px; line-height:1.6; color:var(--body); margin-bottom:16px; min-height:67px; }
.webcard .open { margin-top:auto; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--accent); }
.webcard .open:hover { text-decoration:underline; }
.webcard { height:100%; }
.wb-top { display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid transparent; }
.wb-preview { padding:16px; flex:1; display:flex; flex-direction:column; }

/* MetricHQ — lys dashboard, indigo #4f46e5, ekte AreaChart + Countries */
.web-metrichq .mh-top { background:#fff; border-bottom-color:#e8e5de; }
.mh-logo { display:inline-flex; align-items:center; gap:8px; }
.mh-wm { font-weight:700; font-size:16px; letter-spacing:-.02em; color:#1a1917; }
.mh-wm span { color:#4f46e5; }
.web-metrichq .mh-body { background:#f5f3ef; display:flex; flex-direction:column; gap:12px; }
.mh-panel { background:#fff; border:1px solid #e8e5de; border-radius:10px; padding:13px 13px 8px; }
.mh-kpirow { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.mh-kpi-item { display:flex; align-items:flex-start; gap:6px; }
.mh-cb { margin-top:2px; width:13px; height:13px; border-radius:4px; background:#4f46e5; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mh-dot { margin-top:2px; width:13px; height:13px; border-radius:50%; background:rgba(115,108,96,.22); flex-shrink:0; }
.mh-k { display:block; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#6b6860; }
.mh-v { display:block; font-weight:700; font-size:15px; letter-spacing:-.02em; color:#1a1917; line-height:1.2; }
.mh-v.ok { color:#059669; }
.mh-chart { height:150px; }
.mh-chart-fallback { display:flex; align-items:center; justify-content:center; color:#6b6860; font-size:12px; }
.mh-chart .recharts-cartesian-axis-tick text { font-family:var(--mono); }
.mh-countries { background:#fff; border:1px solid #e8e5de; border-radius:10px; overflow:hidden; }
.mh-ctitle { font-size:11px; font-weight:600; color:#1a1917; padding:8px 12px; border-bottom:1px solid #e8e5de; }
.mh-crow { display:flex; align-items:center; gap:9px; padding:7px 12px; border-bottom:1px solid #f0ede6; font-size:12px; color:#403e39; }
.mh-crow:last-child { border-bottom:none; }
.mh-crow img { width:18px; height:13px; object-fit:cover; border-radius:2px; flex-shrink:0; }
.mh-crow span { flex:1; }
.mh-crow b { font-weight:700; font-size:12px; }
.mh-crow b.ok { color:#059669; }

/* US Focus Groups — StudyCard, grønn #00c853 */
.web-focus .fg-top { background:#fff; border-bottom-color:rgba(0,0,0,.1); }
.fg-logo { display:inline-flex; align-items:center; gap:8px; }
.fg-wm { font-size:15px; color:#0a0a0a; font-weight:500; letter-spacing:-.01em; }
.fg-wm b { font-weight:900; }
.fg-wm i { color:#00c853; font-style:normal; }
.web-focus .fg-body { background:#f5f5f4; }
.fg-study { background:#fff; border:1px solid #d9d9d9; border-radius:8px; padding:14px; }
.web-focus .fg-body { display:flex; flex-direction:column; gap:12px; justify-content:center; }
.fg-badge { display:inline-block; border:1px solid #00c853; color:#00c853; background:#eafff2; border-radius:4px; padding:2px 8px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.fg-badge.inperson { border-color:#1c1c1c; color:#1c1c1c; background:#f7f7f6; }
.fg-title { font-size:14px; font-weight:700; color:#1c1c1c; line-height:1.3; margin:10px 0 12px; }
.fg-inset { background:#f7f7f6; border:1px solid #e5e5e3; border-radius:6px; padding:10px 12px; display:flex; flex-direction:column; gap:9px; margin-bottom:12px; }
.fg-line { display:flex; align-items:flex-start; gap:9px; }
.fg-ico { width:18px; height:18px; border-radius:50%; background:#eafff2; color:#00a344; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fg-ico.gray { background:#eee; color:#a3a3a3; }
.fg-lbl { display:block; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#8a8a8a; }
.fg-pay { font-weight:800; font-size:16px; color:#00a344; }
.fg-val { font-size:13px; font-weight:500; color:#2e2e2e; }
.fg-btn { display:block; width:100%; text-align:center; background:#0a0a0a; color:#fff; border-radius:6px; padding:9px; font-size:12.5px; font-weight:600; }

/* App Restock — terracotta #c2502e på krem, OS-vindu blogg */
.web-restock .rs-top { background:#f4efe4; border-bottom-color:#d7cdba; }
.rs-dots { display:flex; gap:5px; }
.rs-dots i { width:9px; height:9px; border-radius:50%; }
.rs-dots i:nth-child(1){ background:#c2502e; }
.rs-dots i:nth-child(2){ background:#e0922f; }
.rs-dots i:nth-child(3){ background:#d7cdba; }
.rs-wm { font-family:var(--mono); font-weight:700; font-size:14px; color:#211e18; letter-spacing:-.02em; }
.rs-sub { font-family:var(--mono); font-size:10.5px; color:#6f6859; margin-left:auto; }
.web-restock .rs-body { background:#fcfaf4; display:flex; flex-direction:column; gap:9px; }
.rs-intro { font-family:var(--mono); font-size:11px; color:#6f6859; line-height:1.5; padding:2px 2px 4px; }
.rs-post { display:block; background:#fff; border:1.5px solid #d7cdba; border-radius:4px; box-shadow:2px 2px 0 #e4dccb; padding:11px 13px; transition:box-shadow .15s, transform .15s; }
.rs-post:hover { box-shadow:4px 4px 0 #c2502e; transform:translate(-1px,-1px); }
.rs-cat { display:inline-block; font-family:var(--mono); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#c2502e; background:rgba(194,80,46,.09); border-radius:3px; padding:2px 7px; margin-bottom:7px; }
.rs-post h4 { font-size:13.5px; font-weight:650; color:#211e18; line-height:1.3; }
.rs-post:hover h4 { color:#c2502e; }
.rs-ex { font-size:12px; line-height:1.5; color:#6f6859; margin-top:5px; }
.rs-meta { font-family:var(--mono); font-size:10px; color:#8a8170; display:block; margin-top:7px; }
.web-restock .rs-sub { margin-left:auto; }

/* Lauvico — animert mini-hero (terracotta OS-tema fra lauvico /redesign) */
.web-lauvico .lv-top { background:#f7f5f0; border-bottom-color:#d9d0c2; }
.lv-dots { display:flex; gap:5px; }
.lv-dots i { width:9px; height:9px; border-radius:50%; }
.lv-dots i:nth-child(1){ background:#c2502e; }
.lv-dots i:nth-child(2){ background:#e0922f; }
.lv-dots i:nth-child(3){ background:#d9d0c2; }
.lv-tb-wm { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px; letter-spacing:-.03em; color:#211e18; }
.lv-tb-wm span { color:#c2502e; }
.lv-tb-tag { font-family:var(--mono); font-size:10.5px; color:#6f6859; margin-left:auto; }
.web-lauvico .lv-hero { position:relative; overflow:hidden; background-color:#f7f5f0; background-image:radial-gradient(rgba(33,30,24,.05) 1px, transparent 1px); background-size:18px 18px; display:flex; align-items:center; justify-content:center; text-align:center; }
.lv-orbs { position:absolute; inset:0; pointer-events:none; }
.lv-orb { position:absolute; border-radius:50%; background:rgba(194,80,46,.18); mix-blend-mode:multiply; animation:lv-float var(--d,18s) ease-in-out infinite; }
.lv-orb.a { width:120px; height:120px; left:-30px; top:-22px; --d:19s; }
.lv-orb.b { width:90px; height:90px; right:-24px; top:8%; --d:23s; background:rgba(224,146,47,.16); }
.lv-orb.c { width:70px; height:70px; left:6%; bottom:-20px; --d:16s; }
.lv-orb.d { width:150px; height:150px; right:-44px; bottom:-54px; --d:26s; }
.lv-orb.e { width:54px; height:54px; left:42%; top:-24px; --d:21s; background:rgba(224,146,47,.14); }
@keyframes lv-float { 0%,100% { transform:translate(0,0); } 33% { transform:translate(14px,-12px); } 66% { transform:translate(-11px,10px); } }
.lv-center { position:relative; z-index:1; padding:14px 12px; display:flex; flex-direction:column; align-items:center; }
.lv-bigorb { position:absolute; top:-30px; left:50%; transform:translateX(-50%); width:118px; height:118px; border-radius:50%; background:rgba(194,80,46,.15); mix-blend-mode:multiply; z-index:0; }
.lv-center > *:not(.lv-bigorb) { position:relative; z-index:1; }
.lv-wm { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:21px; letter-spacing:-.045em; color:#211e18; line-height:1; margin-bottom:12px; }
.lv-wm .dot { color:#c2502e; }
.lv-h1 { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:28px; letter-spacing:-.03em; line-height:1.05; color:#211e18; margin-bottom:12px; }
.lv-tag { font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#c2502e; font-weight:600; margin-bottom:18px; }
.lv-cta-row { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; }
.lv-cta { display:inline-flex; align-items:center; gap:6px; background:#c2502e; color:#fff; border:1.5px solid #a23e22; border-radius:3px; padding:9px 15px; font-weight:600; font-size:12.5px; box-shadow:2px 2px 0 #a23e22; transition:transform .15s, box-shadow .15s; }
.web-lauvico .lv-hero:hover .lv-cta { transform:translate(-1px,-1px); box-shadow:4px 4px 0 #a23e22; }
.lv-cta2 { display:inline-flex; align-items:center; font-family:var(--mono); font-size:12px; font-weight:600; color:#c2502e; background:transparent; border:1px solid #c2502e; border-radius:3px; padding:9px 14px; transition:background-color .15s, color .15s; }
.web-lauvico .lv-hero:hover .lv-cta2 { background:#c2502e; color:#fff; }
@media (prefers-reduced-motion: reduce) { .lv-orb { animation:none; } }

/* om meg + github */
.bio-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:32px; align-items:start; }
.bio-text p { font-size:16px; line-height:1.7; color:var(--body); margin-bottom:14px; }
.bio-text p:last-child { margin-bottom:0; }
.bio-text b { color:var(--head); font-weight:650; }
.bio-text p.bio-lead { font-size:20px; font-weight:600; line-height:1.3; color:var(--head); margin-bottom:16px; }
.bio-text p.bio-lead b { color:var(--head); font-weight:inherit; }
.bio-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.bio-tags span { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--head); background:var(--accent-muted); border:1px solid rgba(22,121,91,.22); border-radius:4px; padding:6px 12px; }
.bio-tags span::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.gh-bd { padding:24px; text-align:center; }
.gh-chart { position:relative; width:100%; max-width:880px; margin:0 auto; }
.gh-chart-img { width:100%; height:auto; display:block; }
.gh-svg { width:100%; height:auto; display:block; }
.gh-svg rect { cursor:pointer; }
.gh-svg rect:hover { stroke:rgba(20,40,30,.35); stroke-width:1; }
.gh-tip { position:absolute; transform:translate(-50%,-100%); background:#1f1c18; color:#fff; font-family:var(--mono); font-size:11px; padding:5px 9px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:5; box-shadow:0 3px 10px rgba(0,0,0,.28); }
.gh-tip[hidden] { display:none; }
.gh-cap { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--accent); margin-top:14px; line-height:1.4; }
.gh-col { display:flex; flex-direction:column; gap:16px; }
.gh-col .gh-win { width:100%; }
.gh-col .gh-btn { align-self:center; }
@media (max-width:880px) { .bio-grid { grid-template-columns:1fr; gap:22px; } }

/* final / contact */
.final { text-align:left; }
.final .ey { display:block; margin-bottom:12px; }
.final h2 { margin-bottom:12px; }
.final p { font-size:17px; color:var(--body); max-width:520px; margin-bottom:24px; }

/* footer */
footer { border-top:2px solid var(--border); background:var(--surface); }
.foot { display:flex; align-items:center; justify-content:space-between; padding:32px 24px; max-width:1120px; margin:0 auto; }
.foot-wm { font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-.04em; color:var(--head); font-size:22px; }
.foot-bottom { font-family:var(--mono); font-size:12px; color:var(--dim); }

/* reveal */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }

@media (max-width:880px) {
  .grid3 { grid-template-columns:1fr; }
  .nav .links a.txt, .nav .tag, .nav .vr { display:none; }
  .foot { flex-direction:column; gap:14px; text-align:center; }
}

/* Banner-kort (f.eks. Trackly): bredt bilde over tittelen, ikon fjernet. */
.card-banner { border-bottom:1.5px solid var(--border); background:var(--elevated); overflow:hidden; line-height:0; }
.card-banner img { width:100%; height:auto; display:block; }

/* App-kort-foot: installasjoner nederst til venstre + App Store-badge til høyre. */
.app-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; }
.app-foot .installs { font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--accent); border:1.5px solid var(--accent-hover); border-radius:5px; padding:5px 10px; box-shadow:1px 1px 0 var(--accent-hover); line-height:1; white-space:nowrap; }
.app-foot .badge-link { margin-top:0; }
.app-foot .appstore-badge { height:34px; }

/* "Hovedsakelig innen:" over taggene i bio. */
.bio-within { font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--dim); margin:14px 0 8px; }

/* Innholdsfortegnelse — liten tittel + horisontale brikker med antall per kategori. */
.toc-wrap { padding-top:clamp(20px,3vw,34px); }
.toc-title { font-size:15px; font-weight:700; color:var(--head); letter-spacing:-.01em; margin:0 0 12px; }
.toc { display:flex; flex-wrap:wrap; gap:10px; }
.toc a { display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13px; font-weight:600; color:var(--head); padding:9px 14px; border:1.5px solid var(--border); border-radius:999px; background:var(--surface); box-shadow:2px 2px 0 var(--border); transition:transform .12s, box-shadow .12s, border-color .12s, color .12s; }
.toc a:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--accent); border-color:var(--accent); color:var(--accent); }
.toc-n { font-family:var(--mono); font-size:11px; font-weight:700; color:#fff; background:var(--accent); border-radius:999px; min-width:19px; height:19px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; }
#web, #mobil, #shopify, #atlassian { scroll-margin-top:16px; }

/* Lastet som side-panel inne i lauvico.no (?panel): skjul header, footer og kontakt. */
html.panel .nav { display:none; }
html.panel .hero { padding-top:58px; }
html.panel footer, html.panel #kontakt { display:none; }