/* Omdömesagenten: bläck, stjärnguld, svarsgrön */
:root {
  --ink:#16202A; --ink-2:#2B3846; --bg:#F6F7F8; --card:#FFFFFF; --text:#16202A; --muted:#667085; --line:#E4E7EB;
  --gold:#E8A317; --gold-soft:#FDF3DC; --green:#1F7A5C; --green-soft:#E3F2EC; --bad:#B42318; --bad-soft:#FDECEA;
  --warn:#B54708; --blue:#1D4ED8; --blue-soft:#E6EEFF; --radius:12px;
  --shadow:0 1px 2px rgba(22,32,42,.06), 0 4px 16px rgba(22,32,42,.06);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--text); }
main { max-width:1150px; margin:0 auto; padding:24px 16px 64px; }
a { color:var(--green); }
h1 { font-size:26px; letter-spacing:-.02em; margin:8px 0 12px; } h2 { font-size:18px; letter-spacing:-.01em; margin:24px 0 10px; } h3 { font-size:16px; }

/* logga */
.logo { display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.wordmark { font-weight:750; font-size:18px; letter-spacing:-.03em; color:var(--wm, var(--ink)); }
.wordmark .thin { font-weight:450; opacity:.75; }
.wordmark .o-dots { background:linear-gradient(to bottom, var(--gold) 0 36%, var(--wm, var(--ink)) 36%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* adminhuvud */
.top { display:flex; gap:20px; align-items:center; padding:10px 20px; background:var(--ink); color:#fff; flex-wrap:wrap; --wm:#fff; position:sticky; top:0; z-index:5; }
.top a { color:#D0D5DD; text-decoration:none; margin-right:16px; font-size:14px; } .top a:hover { color:#fff; }
.top nav { flex:1; display:flex; flex-wrap:wrap; align-items:center; }
.top button.link { color:#98A2B3; font-size:13px; }
.live { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#98A2B3; margin-right:14px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); position:relative; display:inline-block; flex:none; }
.dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ping 1.8s ease-out infinite; }
.dot.warn { background:var(--gold); } .dot.off { background:#98A2B3; } .dot.off::after { display:none; }
@keyframes ping { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(2.8); opacity:0; } }
.banner.warn { background:var(--gold-soft); color:#7A4A00; padding:8px 20px; font-weight:600; font-size:14px; }

/* kort, formulär */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow); }
.card.narrow { max-width:380px; margin:60px auto; }
.card.danger { border-color:#F5C2BD; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.grid .wide { grid-column:1 / -1; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13px; }
label.check { flex-direction:row; align-items:center; font-weight:400; gap:8px; }
input, select, textarea { font:inherit; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; width:100%; transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
label.check input { width:auto; }
textarea { resize:vertical; }
button, .button { font:inherit; font-size:14px; cursor:pointer; padding:9px 15px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--text); text-decoration:none; display:inline-block; margin:6px 6px 0 0; transition:transform .1s, background .15s, box-shadow .15s; }
button:hover, .button:hover { box-shadow:var(--shadow); } button:active { transform:translateY(1px); }
button.primary, .button.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
button.primary:hover, .button.primary:hover { background:var(--ink-2); }
button.danger { background:var(--bad); color:#fff; border-color:var(--bad); }
button.link { background:none; border:none; padding:0; margin:0; box-shadow:none; }
form.inline { display:inline; }

/* tabeller */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }
th { background:#F9FAFB; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tbody tr, table tr { transition:background .15s; }
table tr:hover td { background:#FAFBFC; }
tr.fel td { background:var(--bad-soft); }
.stars { color:var(--gold); white-space:nowrap; letter-spacing:1px; }
.muted { color:var(--muted); font-weight:400; }

/* statistik */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; color:var(--muted); font-size:13px; box-shadow:var(--shadow); position:relative; overflow:hidden; animation:rise .5s ease both; }
.stat:nth-child(2) { animation-delay:.05s } .stat:nth-child(3) { animation-delay:.1s } .stat:nth-child(4) { animation-delay:.15s } .stat:nth-child(5) { animation-delay:.2s } .stat:nth-child(6) { animation-delay:.25s }
.stat span { display:block; font-size:26px; font-weight:750; letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.stat.alert span { color:var(--bad); }
.stat::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg, transparent, var(--gold), transparent); transform:translateX(-100%); animation:sweep 2.6s ease-in-out .6s 1; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes sweep { to { transform:translateX(100%); } }

.badge { font-size:12px; padding:3px 9px; border-radius:99px; background:#EEF2F6; white-space:nowrap; font-weight:600; }
.badge.flaggad, .badge.fel { background:var(--bad-soft); color:var(--bad); }
.badge.utkast { background:var(--gold-soft); color:#8A5A00; }
.badge.godkand { background:var(--blue-soft); color:var(--blue); }
.badge.publicerad { background:var(--green-soft); color:var(--green); }
.badge.flaggad::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:1px; animation:blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.25; } }
.flash { padding:11px 15px; border-radius:10px; margin-bottom:14px; background:var(--green-soft); color:#0E5A41; animation:rise .35s ease both; }
.flash.fel { background:var(--bad-soft); color:var(--bad); }
.flagbox { background:#FFF7ED; border:1px solid #FED7AA; padding:10px 14px; border-radius:10px; }
blockquote { margin:10px 0; padding:12px 16px; background:#F9FAFB; border-left:3px solid var(--gold); border-radius:0 8px 8px 0; white-space:pre-wrap; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.filters { margin:14px 0; display:flex; gap:6px; flex-wrap:wrap; }
.filters a { font-size:13px; padding:5px 11px; border-radius:99px; border:1px solid var(--line); background:#fff; text-decoration:none; color:var(--text); }
.filters a.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.publish { margin-top:16px; border-top:1px solid var(--line); padding-top:6px; }
strong.ok { color:var(--green); } strong.warn { color:var(--warn); }
code { font-size:12px; }
.ai-card { position:relative; }
.ai-card::after { content:""; position:absolute; inset:-1px; border-radius:var(--radius); padding:1px; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(31,122,92,.55), rgba(232,163,23,.55), transparent 70%) 0 0/250% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:border 4s linear infinite; }
@keyframes border { to { background-position:-250% 0; } }
.typing-caret::after { content:"▍"; color:var(--green); animation:blink 1s steps(1) infinite; margin-left:1px; }

/* publik sida */
body.public { background:#fff; }
.pub-top { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; max-width:1080px; margin:0 auto; flex-wrap:wrap; gap:10px; }
.pub-top nav a { color:var(--text); text-decoration:none; margin-left:18px; font-size:14px; }
.pub-top nav a:hover { color:var(--green); }
main.pub { max-width:1080px; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:32px 0 40px; }
.hero h1 { font-size:42px; line-height:1.1; letter-spacing:-.035em; margin:0 0 16px; }
.hero h1 em { font-style:normal; background:linear-gradient(transparent 62%, var(--gold-soft) 62%); }
.lead { font-size:18px; color:var(--muted); max-width:560px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--green); background:var(--green-soft); padding:5px 12px; border-radius:99px; margin-bottom:16px; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.cta-row .button { padding:12px 20px; font-size:15px; margin:0; }
section.block { padding:36px 0; border-top:1px solid var(--line); }
.features { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding:0; list-style:none; counter-reset:step; }
.features li { counter-increment:step; background:var(--bg); border-radius:var(--radius); padding:18px; }
.features li::before { content:counter(step); display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--ink); color:#fff; font-weight:700; font-size:14px; margin-bottom:10px; }
.features strong { display:block; margin-bottom:4px; }
.how-title { font-size:24px; line-height:1.25; letter-spacing:-.02em; max-width:720px; margin-bottom:6px; }
.how-lead { margin:0 0 20px; font-size:16px; }
.features.how li { background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; color:var(--muted); font-size:14.5px; }
.features.how li::before { display:none; }
.features.how strong { color:var(--text); font-size:16.5px; line-height:1.3; margin:12px 0 6px; }
.who { align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.01em; padding:4px 10px; border-radius:99px; }
.who.ni { background:var(--gold-soft); color:#8A5A00; }
.who.vi { background:var(--green-soft); color:var(--green); }
.how-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:18px; background:var(--ink); color:#E4E7EB; border-radius:16px; padding:20px 24px; }
.how-bottom p { margin:0; max-width:640px; font-size:15.5px; } .how-bottom strong { color:#fff; }
.how-bottom .button.primary { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700; margin:0; padding:12px 20px; }
.price-card { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; background:var(--ink); color:#fff; border-radius:16px; padding:28px 32px; }
.price-card .amount { font-size:40px; font-weight:800; letter-spacing:-.03em; }
.price-card .amount small { font-size:15px; font-weight:500; opacity:.7; }
.price-card .muted { color:#98A2B3; }
.price-card .button.primary { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700; }
.pub-foot { max-width:1080px; margin:0 auto; padding:20px 16px 40px; color:var(--muted); font-size:13px; border-top:1px solid var(--line); }
.pub-foot a[href^="tel:"], .pub-foot a[href^="mailto:"] { white-space:nowrap; }

/* demo-kort på startsidan */
.demo { position:relative; min-height:400px; }
.demo-stage { background:linear-gradient(160deg, #F6F7F8, #EEF1F4); border-radius:20px; padding:22px; border:1px solid var(--line); }
.g-review, .g-reply { background:#fff; border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); border:1px solid var(--line); }
.g-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:14px; flex:none; }
.g-name { font-weight:650; font-size:14px; } .g-meta { font-size:12px; color:var(--muted); }
.g-text { font-size:14.5px; margin:6px 0 0; min-height:44px; }
.g-reply { margin:14px 0 0 26px; border-left:3px solid var(--green); position:relative; }
.g-reply .g-name { color:var(--green); }
.ai-status { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin:14px 0 0 26px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.chip { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--green-soft); color:var(--green); }
.chip.flag { background:var(--bad-soft); color:var(--bad); }
.fade-in { animation:rise .45s ease both; }
.demo-dots { display:flex; gap:8px; justify-content:center; margin-top:14px; }
.demo-dots button { position:relative; width:8px; height:8px; padding:0; margin:0; cursor:pointer; border-radius:99px; border:none; background:#CBD2D9; transition:width .25s, background .25s; }
.demo-dots button::before { content:""; position:absolute; inset:-10px -4px; }
.demo-dots button.on { width:22px; background:var(--ink); }

/* mobil */
@media (max-width: 860px) {
  .hero { grid-template-columns:1fr; gap:28px; } .hero h1 { font-size:32px; }
  .features { grid-template-columns:1fr 1fr; }
  .two { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  main { padding:16px 14px 48px; }
  .top { padding:10px 14px; gap:8px; } .top nav { order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; } .top nav a { white-space:nowrap; }
  .pub-top nav a { margin:0 14px 0 0; }
  .features { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .stat span { font-size:22px; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display:block; width:100%; }
  table.cards { background:none; border:none; box-shadow:none; }
  table.cards tr:first-child:has(th) { display:none; }
  table.cards tr { background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; padding:8px 4px; box-shadow:var(--shadow); }
  table.cards td { border:none; padding:4px 12px; }
  table.cards td[data-l]::before { content:attr(data-l); display:block; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
  .g-reply, .ai-status { margin-left:12px; }
  .price-card { padding:22px; } .price-card .amount { font-size:32px; }
  .hero h1 { font-size:28px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* logo-märket följer textfärgen: bläck på ljust, vitt i mörk header */
.logo-mark { color: var(--ink); flex: none; }
.top .logo-mark { color: #fff; }
.status-list { list-style: none; padding-left: 0; }
.status-list li { padding: 3px 0; }
td.detail { overflow-wrap: anywhere; }

/* ================= Admin v2: sidomeny + AI-instrumentpanel ================= */
.mono { font-family:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-size:12px; }
body.app { background:
  radial-gradient(900px 420px at 85% -120px, rgba(232,163,23,.13), transparent 70%),
  radial-gradient(700px 380px at 30% -160px, rgba(29,78,216,.08), transparent 70%), #F4F5F7; background-attachment:fixed; }
.shell { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.side { background:var(--ink); color:#fff; --wm:#fff; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:18px 14px; gap:18px;
  background-image:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%); }
.side .brand { text-decoration:none; padding:4px 8px; }
.side-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.side-label { font:600 10px/1 ui-monospace, Menlo, monospace; letter-spacing:.14em; text-transform:uppercase; color:#667085; padding:16px 10px 8px; }
.side-nav a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:#C3CAD4; text-decoration:none; font-size:14px; position:relative; transition:background .15s, color .15s; }
.side-nav a svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.side-nav a:hover { background:rgba(255,255,255,.06); color:#fff; }
.side-nav a.active { background:rgba(255,255,255,.09); color:#fff; }
.side-nav a.active::before { content:""; position:absolute; left:-14px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.side-foot { display:flex; flex-direction:column; gap:10px; }
.agent-status { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:13px; }
.agent-status strong { display:block; font-size:13px; } .agent-status .mono { color:#98A2B3; font-size:11px; }
.side-user { display:flex !important; align-items:center; gap:9px; width:100%; color:#C3CAD4 !important; font-size:12px !important; padding:6px 8px !important; border-radius:8px !important; text-align:left; }
.side-user:hover { background:rgba(255,255,255,.06) !important; }
.side-user .who { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-user .out { color:#667085; font-size:11px; }
.avatar.sm { width:28px; height:28px; font-size:12px; background:var(--ink-2); }
.side .avatar.sm { background:linear-gradient(135deg, var(--gold), #C77D0A); color:var(--ink); }
.workspace { min-width:0; }
.workspace .banner.warn { border-bottom:1px solid #F3DDAE; }
.workspace main { max-width:1180px; padding:26px 28px 64px; }

.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; }
.page-head h1 { font-size:30px; margin:4px 0 0; }
.eyebrow-mono { font:600 11px/1 ui-monospace, Menlo, monospace; letter-spacing:.14em; color:var(--muted); display:inline-flex; align-items:center; gap:8px; }
.eyebrow-mono::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.sync-btn { display:inline-flex; align-items:center; gap:8px; }
.sync-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sync-btn:hover svg { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* AI-sammanfattning med glödande kant */
.ai-summary { position:relative; display:flex; gap:16px; align-items:flex-start; padding:18px 20px; border-radius:16px; margin-bottom:16px;
  background:linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang, 0deg), var(--gold), #F6D58A, var(--blue), var(--ink-2), var(--gold)) border-box;
  border:1.5px solid transparent; box-shadow:0 10px 40px -12px rgba(232,163,23,.35); animation:spinborder 6s linear infinite; }
@property --ang { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes spinborder { to { --ang:360deg; } }
.orb { width:40px; height:40px; border-radius:50%; flex:none; position:relative; background:radial-gradient(circle at 35% 30%, #FFE9B0, var(--gold) 45%, #B86E00 100%); box-shadow:0 0 22px rgba(232,163,23,.6); animation:breathe 3s ease-in-out infinite; }
.orb span { position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(232,163,23,.6); animation:spin 9s linear infinite; }
@keyframes breathe { 50% { transform:scale(1.07); box-shadow:0 0 34px rgba(232,163,23,.8); } }
.ai-summary-body { flex:1; min-width:0; }
.ai-summary-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ai-summary-head .chip { background:var(--gold-soft); color:#8A5A00; font-weight:600; }
.reveal { margin:8px 0 0; padding:0; list-style:none; }
.reveal li { padding:3px 0 3px 18px; position:relative; opacity:0; transform:translateY(4px); animation:rise .5s ease forwards; }
.reveal li::before { content:"›"; position:absolute; left:2px; color:var(--gold); font-weight:800; }
.reveal li:nth-child(2) { animation-delay:.25s; } .reveal li:nth-child(3) { animation-delay:.5s; } .reveal li:nth-child(4) { animation-delay:.75s; } .reveal li:nth-child(5) { animation-delay:1s; } .reveal li:nth-child(6) { animation-delay:1.25s; }
@keyframes rise { to { opacity:1; transform:none; } }

/* KPI */
.kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px; position:relative; overflow:hidden; }
.kpi::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); transform:translateX(-100%); animation:sweep 3.5s ease-in-out infinite; }
.kpi:nth-child(2)::after { animation-delay:.6s; } .kpi:nth-child(3)::after { animation-delay:1.2s; } .kpi:nth-child(4)::after { animation-delay:1.8s; }
@keyframes sweep { 60%, 100% { transform:translateX(100%); } }
.kpi-label { display:flex; align-items:center; gap:8px; font:600 11px/1.4 ui-monospace, Menlo, monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.kpi-num { font-size:32px; font-weight:750; letter-spacing:-.03em; line-height:1.15; margin-top:6px; font-variant-numeric:tabular-nums; }
.kpi-num .star, .kpi-num small { font-size:20px; color:var(--gold); margin-left:3px; }
.kpi-sub { font-size:12px; color:var(--muted); }
.kpi.hot { border-color:#F5C2BD; } .kpi.hot .kpi-num { color:var(--bad); }
.dot.bad { background:var(--bad); }

/* paneler */
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); margin-bottom:16px; min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.panel-head h2 { margin:0; font-size:15px; }
.panel-head a.mono { color:var(--muted); text-decoration:none; } .panel-head a.mono:hover { color:var(--ink); }
.grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.grid-3 > .panel { margin-bottom:0; } .grid-3 { margin-bottom:16px; }
.span-2 { grid-column:span 2; }

/* flöde */
.pipeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); position:relative; }
.pipeline::before { content:""; position:absolute; left:10%; right:10%; top:21px; height:2px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.pipeline::after { content:""; position:absolute; left:10%; top:19px; width:40px; height:6px; border-radius:6px; background:linear-gradient(90deg, transparent, var(--gold)); filter:drop-shadow(0 0 6px var(--gold)); animation:flow 3.2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes flow { 0% { transform:translateX(0); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform:translateX(calc(var(--pw, 800px) * .8 - 40px)); opacity:0; } }
.step { display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; text-align:center; }
.step-n { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font:700 16px/1 ui-monospace, Menlo, monospace; background:#F2F4F7; color:#98A2B3; border:1px solid var(--line); }
.step.has .step-n { background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 6px 18px -6px rgba(22,32,42,.5); }
.step.flaggad.has .step-n { background:var(--bad); border-color:var(--bad); box-shadow:0 0 0 4px var(--bad-soft); }
.step.publicerad.has .step-n { background:var(--green); border-color:var(--green); }
.step-l { font-size:12px; color:var(--muted); font-weight:600; }

/* stapeldiagram */
.legend { font-size:11px; color:var(--muted); display:flex; gap:10px; align-items:center; }
.legend i { width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:middle; }
.legend i.good, .bar.good { background:var(--green); fill:var(--green); }
.legend i.mid, .bar.mid { background:var(--gold); fill:var(--gold); }
.legend i.bad, .bar.bad { background:var(--bad); fill:var(--bad); }
.bars { display:grid; grid-template-columns:repeat(14, minmax(0, 1fr)); gap:6px; height:200px; align-items:end; }
.bar-col { display:flex; flex-direction:column; align-items:center; height:100%; gap:4px; }
.bar-svg { width:100%; max-width:26px; flex:1; overflow:visible; }
.bar-svg .track { fill:#F2F4F7; }
.bar { transform-box:fill-box; transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.8,.2,1) both; }
.bar-col:nth-child(n+5) .bar { animation-delay:.1s; } .bar-col:nth-child(n+10) .bar { animation-delay:.2s; }
@keyframes grow { from { transform:scaleY(0); } }
.bar-n { font:600 11px/1 ui-monospace, Menlo, monospace; color:var(--ink); min-height:11px; }
.bar-l { font-size:10px; color:var(--muted); }

/* mätare */
.gauge-card { display:flex; flex-direction:column; }
.gauge { width:100%; max-width:220px; margin:0 auto; display:block; overflow:visible; }
.gauge path { fill:none; stroke-linecap:round; }
.g-track { stroke:#F2F4F7; stroke-width:10; }
.g-ticks { stroke:#fff; stroke-width:10; stroke-dasharray:.4 4.6; stroke-linecap:butt !important; }
.g-val { stroke:var(--gold); stroke-width:10; filter:drop-shadow(0 0 4px rgba(232,163,23,.55)); animation:draw 1.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes draw { from { stroke-dashoffset:100; } }
.gauge-num { text-align:center; margin-top:-34px; margin-bottom:12px; }
.gauge-num span { font-size:28px; font-weight:750; letter-spacing:-.03em; display:block; font-variant-numeric:tabular-nums; }
.gauge-num small { font-size:11px; color:var(--muted); }
.dist { display:flex; flex-direction:column; gap:6px; margin-top:auto; }
.dist-row { display:grid; grid-template-columns:28px 1fr 22px; align-items:center; gap:8px; }
.dist-bar { width:100%; height:6px; }
.dist-bar .track { fill:#F2F4F7; }
.dist-bar .fill { fill:var(--green); transform-box:fill-box; transform-origin:left; animation:growx 1s cubic-bezier(.2,.8,.2,1) both; }
.dist-bar .fill.s3 { fill:var(--gold); } .dist-bar .fill.s2, .dist-bar .fill.s1 { fill:var(--bad); }
@keyframes growx { from { transform:scaleX(0); } }

/* kö */
.queue { list-style:none; margin:0; padding:0; }
.queue li a { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:10px; text-decoration:none; color:inherit; transition:background .15s, transform .15s; }
.queue li + li { border-top:1px solid var(--line); }
.queue li a:hover { background:#F9FAFB; transform:translateX(2px); }
.queue li.flaggad a { box-shadow:inset 3px 0 0 var(--bad); }
.q-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.q-top { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:14px; }
.q-top .muted { font-size:12px; }
.q-text { font-size:13px; color:#475467; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stars .off { color:#D0D5DD; }
.avatar.tone-5, .avatar.tone-4 { background:var(--green); } .avatar.tone-3 { background:var(--gold); } .avatar.tone-2, .avatar.tone-1 { background:var(--bad); }

/* tidslinje */
.timeline { list-style:none; margin:0; padding:0 0 0 4px; position:relative; }
.timeline::before { content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:linear-gradient(var(--line), transparent); }
.timeline li { position:relative; padding:0 0 12px 22px; display:flex; flex-direction:column; }
.t-dot { position:absolute; left:0; top:4px; width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid var(--ink-2); }
.timeline li:first-child .t-dot { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.timeline li.fel .t-dot { border-color:var(--bad); }
.t-action { font-size:13px; font-weight:600; }
.t-meta { color:var(--muted); font-size:11px; }

table.flat { box-shadow:none; border:none; }
.panel table.flat th { background:none; }

@media (max-width: 1000px) {
  .kpis { grid-template-columns:repeat(2, 1fr); }
  .grid-3 { grid-template-columns:1fr; } .span-2 { grid-column:auto; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns:1fr; }
  .side { position:sticky; height:auto; flex-direction:row; align-items:center; padding:10px 12px; gap:10px; z-index:10; overflow-x:auto; }
  .side .brand .wordmark { display:none; }
  .side-nav { flex-direction:row; flex:1; gap:0; }
  .side-label, .agent-status div, .side-user .who, .side-user .out { display:none; }
  .side-nav a { padding:8px 9px; font-size:13px; white-space:nowrap; }
  .side-nav a.active::before { left:8px; right:8px; top:auto; bottom:0; width:auto; height:2px; border-radius:2px; }
  .side-foot { flex-direction:row; align-items:center; gap:6px; }
  .agent-status { padding:8px; }
  .workspace main { padding:18px 14px 48px; }
  .page-head h1 { font-size:24px; }
  .pipeline { grid-template-columns:repeat(5, 1fr); }
  .step-n { width:38px; height:38px; font-size:14px; }
  .pipeline::before, .pipeline::after { top:18px; }
  .step-l { font-size:10px; }
  .bars { height:150px; gap:3px; }
  .bar-l { font-size:9px; }
}
@media (max-width: 420px) { .side-nav a svg { display:none; } .kpi-num { font-size:26px; } }
.demo-note { font-size:12px; text-align:center; }
.after-price { margin-top:14px; }
#d-avatar { background:#7C5CBF; }
.side .logo-mark { color:#fff; }
.bar-col { min-width:0; }
@media (max-width: 760px) {
  .pipeline-card .panel-head .mono, .legend { display:none; }
  .queue li a { flex-wrap:wrap; row-gap:6px; }
  .queue .q-main { flex:1 1 calc(100% - 44px); }
  .queue .badge { margin-left:40px; }
  .q-top .muted { flex-basis:100%; }
}
.bar-svg { flex:1 1 0; min-height:0; height:auto; }
.trial { font:600 11px/1 ui-monospace, Menlo, monospace; color:var(--muted); margin-left:6px; white-space:nowrap; }
.trial.soon { color:var(--bad); }

/* ================= Anmälan ================= */
.small { font-size:13px; }
.pub-top nav a.nav-cta { background:var(--ink); color:#fff; padding:7px 14px; border-radius:8px; font-weight:600; }
.pub-top nav a.nav-cta:hover { background:var(--ink-2); color:#fff; }
.signup { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:40px; align-items:start; padding:24px 0 40px; }
.signup h1 { font-size:36px; letter-spacing:-.03em; line-height:1.1; margin:0 0 10px; }
.signup-form { margin-top:22px; display:flex; flex-direction:column; gap:18px; }
.signup-form fieldset { border:1px solid var(--line); border-radius:14px; padding:16px 18px 18px; margin:0; background:#fff; box-shadow:var(--shadow); }
.signup-form legend { font-weight:700; font-size:15px; padding:0 6px; display:flex; align-items:center; gap:8px; }
.step-no { width:22px; height:22px; border-radius:6px; background:var(--ink); color:#fff; display:inline-grid; place-items:center; font-size:12px; }
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.f-grid .span-2 { grid-column:1 / -1; }
.opt { font-weight:400; color:var(--muted); font-size:12px; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.tone-pick { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:12px; }
.tone-opt { position:relative; display:block; cursor:pointer; }
.tone-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.tone-card { display:flex; flex-direction:column; gap:6px; height:100%; padding:12px; border:1.5px solid var(--line); border-radius:10px; font-weight:400; transition:border-color .15s, box-shadow .15s, background .15s; }
.tone-card em { font-style:normal; font-size:13px; color:var(--muted); line-height:1.4; }
.tone-opt input:checked + .tone-card { border-color:var(--ink); background:#FAFBFC; box-shadow:0 0 0 3px rgba(22,32,42,.08); }
.tone-opt input:focus-visible + .tone-card { box-shadow:0 0 0 3px var(--green-soft); }
.consent { font-size:14px; }
.consent input { margin-top:2px; }
button.big { font-size:16px; padding:13px 22px; font-weight:650; align-self:flex-start; }
.form-errors { background:var(--bad-soft); color:var(--bad); border:1px solid #F5C2BD; border-radius:10px; padding:12px 16px; margin-top:16px; }
.form-errors ul { margin:6px 0 0; padding-left:18px; }
.signup-side { position:sticky; top:20px; background:var(--ink); color:#E4E7EB; border-radius:16px; padding:22px 22px 18px; }
.signup-side h2 { color:#fff; margin:0 0 14px; font-size:17px; }
.next-steps { list-style:none; margin:0; padding:0 0 0 4px; position:relative; }
.next-steps::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:1px; background:rgba(255,255,255,.18); }
.next-steps li { position:relative; padding:0 0 16px 26px; display:flex; flex-direction:column; gap:2px; }
.next-steps li::before { content:""; position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%; background:var(--ink); border:2px solid var(--gold); }
.next-steps strong { color:#fff; font-size:14px; } .next-steps span { font-size:13px; color:#B7C0CC; }
.trust { border-top:1px solid rgba(255,255,255,.12); padding-top:12px; margin-top:4px; }
.trust p { margin:4px 0; font-size:13px; color:#D0D5DD; }
.done { max-width:640px; margin:0 auto; padding:32px 0 40px; }
.done h1 { font-size:32px; letter-spacing:-.03em; line-height:1.15; }
.done-badge { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-size:28px; font-weight:800; box-shadow:0 0 0 8px var(--green-soft); animation:pop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes pop { from { transform:scale(.4); opacity:0; } }
.howto ol { padding-left:20px; } .howto li { margin-bottom:8px; }
.copy-row { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.copy-row code { background:#F2F4F7; padding:7px 10px; border-radius:8px; font-size:14px; }
.copy-row button { margin:0; }
.lead-card { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; background:#fff; border:1.5px solid var(--gold); border-radius:14px; padding:18px 20px; margin:12px 0 18px; box-shadow:0 10px 30px -14px rgba(232,163,23,.5); }
.lead-card h2 { margin:6px 0 4px; }
.lead-steps { margin:10px 0 6px; padding-left:20px; font-size:14px; } .lead-steps li { margin-bottom:4px; }
@media (max-width: 860px) {
  .signup { grid-template-columns:1fr; gap:24px; }
  .signup-side { position:static; }
  .signup h1 { font-size:28px; }
  .tone-pick { grid-template-columns:1fr; }
  .lead-card { flex-direction:column; }
}
@media (max-width: 520px) { .f-grid { grid-template-columns:1fr; } button.big { align-self:stretch; } }
.billing .copy-row { margin:8px 0 4px; }
.paylink { max-width:100%; overflow-wrap:anywhere; font-size:12px !important; }

/* ---------- Recensionslänk, QR och skyltar (kundsidan) ---------- */
.rlink h3 { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:18px 0 6px; }
.rlink h3:first-child { margin-top:0; }
.rlink-grid { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:24px; }
.rlink-url { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.rlink-url input { flex:1 1 260px; min-width:0; }
.rlink-url button { margin:0; }
.check-status { border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:10px; padding:10px 12px; margin:6px 0 10px; }
.check-status.godkand { border-left-color:var(--green); background:var(--green-soft); }
.check-status.stoppad { border-left-color:var(--bad); background:var(--bad-soft); }
.check-status.ej_kontrollerad { border-left-color:var(--gold); background:var(--gold-soft); }
.check-status strong { margin-right:8px; }
.check-status .pre { white-space:pre-wrap; margin:6px 0 0; font-size:13px; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.print-list { list-style:none; padding:0; margin:0 0 8px; display:grid; gap:6px; }
.print-list .button { display:block; text-align:center; }
.scan-kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.scan-kpis div { display:flex; flex-direction:column; background:#F9FAFB; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.scan-kpis .num { font-size:22px; font-weight:750; letter-spacing:-.02em; }
.scan-bars { display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; align-items:end; height:110px; margin-top:12px; }
.scan-bar { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:2px; }
.scan-bar .bar-fill { width:100%; max-width:28px; min-height:2px; height:calc(var(--h, 0%) * .7); background:var(--ink); border-radius:4px 4px 0 0; transition:height .6s ease; }
.scan-bar:last-child .bar-fill { background:var(--gold); }
@media (max-width: 760px) { .rlink-grid { grid-template-columns:1fr; } }

/* ---------- Paket (startsida, anmälan, betalsida, villkor). Text i app/plans.py ---------- */
.plans-lead { margin:-6px 0 18px; }
.plans { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; align-items:stretch; }
.plan { position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 26px 22px; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-align:left; }
.plan:hover { transform:translateY(-2px); box-shadow:0 12px 32px -12px rgba(16,24,40,.18); }
.plan.featured { background:var(--ink); color:#E4E7EB; border-color:var(--ink); }
.plan.featured::before { content:""; position:absolute; inset:-1px -1px auto -1px; height:4px; border-radius:18px 18px 0 0; background:linear-gradient(90deg, var(--gold), #F6C95C, var(--gold)); }
.plan-badge { position:absolute; top:-12px; right:22px; background:var(--gold); color:var(--ink); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; }
.plan-name { margin:0; font-size:18px; letter-spacing:-.01em; }
.plan.featured .plan-name { color:#fff; }
.plan-price { display:flex; align-items:baseline; gap:6px; margin:10px 0 4px; }
.plan-price .amt { font-size:40px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.plan.featured .plan-price .amt { color:#fff; }
.plan-price .per { font-size:14px; color:var(--muted); }
.plan.featured .plan-price .per, .plan.featured .plan-tag { color:#98A2B3; }
.plan-tag { margin:0 0 16px; color:var(--muted); font-size:15px; line-height:1.45; }
.plan-cta { display:block; text-align:center; margin:0 0 18px; padding:12px 16px; font-weight:700; }
.plan.featured .plan-cta { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.plan.featured .plan-cta:hover { background:#F2B53A; }
.plan-list { list-style:none; padding:0; margin:0 0 12px; display:grid; gap:9px; }
.plan-list li { position:relative; padding-left:26px; font-size:14.5px; line-height:1.4; }
.plan-list li::before { position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; }
.incl-yes li::before { content:"✓"; background:var(--green-soft); color:var(--green); }
.incl-no { padding-top:12px; border-top:1px dashed var(--line); margin-bottom:0; }
.incl-no li { color:var(--muted); }
.incl-no li::before { content:"–"; background:#F2F4F7; color:var(--muted); }
.plan.featured .incl-yes li::before { background:rgba(232,163,23,.18); color:var(--gold); }
.plan.featured .incl-no { border-color:#2B3846; }
.plan.featured .incl-no li { color:#98A2B3; }
.plan.featured .incl-no li::before { background:#2B3846; color:#98A2B3; }
.plans-terms { text-align:center; font-size:13px; color:var(--muted); margin:16px 0 0; }

/* Val i anmälan: hela rutan är klickbar */
.plan-opt { position:relative; display:block; cursor:pointer; margin:0; font-weight:inherit; }
.plan-opt input { position:absolute; top:0; left:0; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.plans.pick .plan { height:100%; padding:20px 20px 16px; }
.plans.pick .plan-price .amt { font-size:30px; }
.plans.pick .plan-tag { margin-bottom:10px; font-size:14px; }
.plan-check { position:absolute; top:18px; right:18px; width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:#fff; transition:all .15s ease; }
.plans.pick .plan-badge { right:52px; }
.plan-opt input:checked + .plan { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,163,23,.35); }
.plan-opt input:checked + .plan .plan-check { border-color:var(--gold); background:var(--gold); box-shadow:inset 0 0 0 4px #fff; }
.plan-opt input:checked + .plan.featured .plan-check { box-shadow:inset 0 0 0 4px var(--ink); }
.plan-opt input:focus-visible + .plan { outline:2px solid var(--ink); outline-offset:3px; }
.plan-more summary { cursor:pointer; font-size:13px; font-weight:700; margin-top:auto; color:inherit; }
.plan-more[open] summary { margin-bottom:10px; }
.plan.single { max-width:560px; }
.terms-plans { margin:14px 0 8px; }
.terms-plans .plan:hover { transform:none; }
.pay-summary { margin:18px 0 22px; text-align:left; }
@media (max-width: 760px) {
  .plans { grid-template-columns:1fr; gap:22px; }
  .plan { padding:22px 20px 18px; }
  .plan-price .amt { font-size:34px; }
}

/* ---------- Vanliga frågor ---------- */
.faq { display:grid; gap:10px; max-width:820px; }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:0 18px; transition:border-color .2s, box-shadow .2s; }
.faq details[open] { border-color:#CBD2D9; box-shadow:0 8px 24px -16px rgba(16,24,40,.25); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 0; font-weight:650; font-size:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#F2F4F7; font-weight:700; color:var(--ink); transition:transform .2s; }
.faq details[open] summary::after { content:"–"; background:var(--gold-soft); }
.faq details p { margin:0 0 16px; color:#3B4754; line-height:1.55; }
.faq-more { margin-top:14px; }
@media (max-width: 420px) { .nav-faq { display:none; } }

/* ---------- Mitt abonnemang ---------- */
.sub-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:20px 0; box-shadow:0 8px 24px -18px rgba(16,24,40,.3); }
.sub-steps { list-style:none; counter-reset:s; padding:0; margin:0 0 20px; display:grid; gap:14px; }
.sub-steps li { counter-increment:s; position:relative; padding-left:40px; display:flex; flex-direction:column; gap:2px; }
.sub-steps li::before { content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:8px; background:var(--ink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; }
.sub-steps span { color:var(--muted); font-size:14.5px; }
.sub-card .button.big { display:block; text-align:center; padding:14px 18px; font-size:16px; font-weight:700; }
.sub-facts { padding-left:18px; color:#3B4754; line-height:1.55; display:grid; gap:8px; }
.cancel-note { background:var(--bad-soft); color:var(--bad); border-radius:10px; padding:10px 12px; font-size:14px; }

/* --- Startsidan: finputs november --- */
html { scroll-behavior:smooth; } [id] { scroll-margin-top:84px; }
body.public .pub-top-wrap { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent; transition:border-color .2s, box-shadow .2s; }
body.public .pub-top-wrap.scrolled { border-bottom-color:var(--line); box-shadow:0 6px 20px -16px rgba(16,24,40,.35); }
.pub-top { padding-top:12px; padding-bottom:12px; }
.hero { padding:44px 0 52px; }
.hero h1 { font-size:46px; }
.trust-row { list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:18px 0 0; font-size:14px; color:#3B4754; }
.trust-row li { display:inline-flex; align-items:center; gap:7px; }
.trust-row li::before { content:"✓"; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:11px; font-weight:800; }
.cta-row .button.primary { box-shadow:0 10px 24px -12px rgba(22,32,42,.55); }
.cta-row .button.primary:hover { transform:translateY(-1px); }
section.block { padding:56px 0; }
.sec-title, .how-title { font-size:28px; line-height:1.2; letter-spacing:-.025em; margin:0 0 10px; }
.why { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:22px; }
.why article { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; }
.why article:hover, .features.how li:hover { transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(16,24,40,.35); }
.features.how li { transition:transform .2s, box-shadow .2s; border-radius:16px; }
.why h3 { margin:14px 0 6px; font-size:17px; letter-spacing:-.01em; }
.why p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }
.why-ico { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--gold-soft); color:#8A5A00; }
.final-cta { text-align:center; background:var(--ink); color:#E4E7EB; border-radius:20px; padding:48px 24px; margin:8px 0 28px; }
.final-cta h2 { color:#fff; font-size:30px; letter-spacing:-.025em; margin:0 0 10px; }
.final-cta p { margin:0 auto 20px; max-width:520px; font-size:16.5px; }
.final-cta .button.primary { background:var(--gold); border-color:var(--gold); color:var(--ink); font-weight:700; padding:14px 26px; font-size:16px; margin:0; }
.final-cta .button.primary:hover { background:var(--gold); transform:translateY(-1px); }
.final-cta .final-sub { font-size:14px; margin:18px auto 0; color:#98A2B3; } .final-cta a:not(.button) { color:#fff; }
.reveal { opacity:0; transform:translateY(12px); transition:opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (max-width: 860px) { .why { grid-template-columns:1fr; } .hero h1 { font-size:34px; } .sec-title, .how-title { font-size:24px; } section.block { padding:40px 0; } }
@media (max-width: 600px) {
  .hero { padding:20px 0 32px; } .hero h1 { font-size:30px; }
  .cta-row .button.primary { flex:1 1 100%; text-align:center; padding:14px 20px; font-size:16px; }
  .final-cta { padding:36px 18px; } .final-cta h2 { font-size:24px; } .final-cta .button.primary { display:block; }
  .how-bottom .button.primary { flex:1 1 100%; text-align:center; }
}
.about { display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:start; }
.about-text p { color:#3B4754; font-size:16px; line-height:1.6; margin:0 0 14px; max-width:560px; }
.about-text .about-lead { font-size:18px; color:var(--text); font-weight:500; }
.about-list { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; max-width:620px; }
.about-list li { color:var(--muted); font-size:14.5px; line-height:1.5; padding-left:14px; border-left:2px solid var(--gold); }
.about-list strong { display:block; color:var(--text); font-size:15.5px; margin-bottom:2px; }
.team { background:var(--ink); color:#E4E7EB; border-radius:18px; padding:24px; }
.team-label { margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#98A2B3; }
.person { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.person-avatar { flex:none; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--gold); color:var(--ink); font-weight:800; font-size:17px; letter-spacing:.02em; }
.person-name { color:#fff; font-weight:650; font-size:17px; }
.team a { color:#fff; } .person-phone { font-size:15.5px; white-space:nowrap; }
.team-mail { margin:14px 0 0; font-size:14.5px; }
@media (max-width: 520px) { .about-list { grid-template-columns:1fr; } }
@media (max-width: 860px) { .about { grid-template-columns:1fr; gap:20px; } }
@media (max-width: 520px) { .pub-top nav a.nav-faq { display:none; } }

/* UX-finputs: snabb feedback, mjuk easing, större klickytor (publika sidan) */
body.public .button:active, body.public button:not(.demo-dots button):active { transform:translateY(1px) scale(.98); }
button.is-busy { cursor:progress; opacity:.85; pointer-events:none; }
button.is-busy::before { content:""; display:inline-block; width:14px; height:14px; margin-right:8px; vertical-align:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite; }
button.copied { background:var(--green-soft); border-color:var(--green); color:var(--green); }
.pub-top nav a { display:inline-flex; align-items:center; min-height:40px; }
@media (max-width: 600px) {
  .pub-top nav a { min-height:44px; padding:0 4px; }
  .pub-top nav a.nav-cta { padding:0 14px; }
  .faq summary { min-height:52px; }
}

/* ekonomi */
.eco-flags { display:flex; gap:8px; align-items:center; }
.chip.warn-chip { background:var(--gold-soft); color:#8A5A00; }
.legend i.eco-in, .eco-bar.in, .c-in { background:#1BAF7A; fill:#1BAF7A; }
.legend i.eco-out, .eco-bar.out { background:#EB6834; fill:#EB6834; }
.eco-chart { width:100%; height:auto; display:block; overflow:visible; }
.eco-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 4; } .eco-grid.base { stroke:#D0D5DD; stroke-dasharray:none; }
.eco-tick, .eco-x { font:500 11px ui-monospace, Menlo, monospace; fill:var(--muted); }
.eco-x.now { fill:var(--ink); font-weight:700; }
.eco-hit { fill:transparent; }
.eco-group:hover .eco-hit { fill:#F2F4F7; }
.eco-bar { transform-box:fill-box; transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.8,.2,1) both; }
.eco-note { margin:6px 0 0; }
.donut-wrap { position:relative; width:170px; margin:4px auto 14px; }
.donut { width:100%; display:block; transform:none; }
.donut circle { fill:none; stroke-width:5.5; }
.donut-track { stroke:#F2F4F7; }
.donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.donut-center strong { font-size:18px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.donut-center span { font-size:11px; color:var(--muted); }
.eco-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:13px; }
.eco-legend li { display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; }
.eco-legend i, .exp-dot { width:10px; height:10px; border-radius:3px; display:inline-block; flex:none; }
/* kostnadsfärger: fast ordning, samma kategori har alltid samma färg */
.c-ai { stroke:#2A78D6; background:#2A78D6; } .c-stripe { stroke:#6250D6; background:#6250D6; }
.c-hosting { stroke:#EB6834; background:#EB6834; } .c-epost { stroke:#1BAF7A; background:#1BAF7A; }
.c-doman { stroke:#EDA100; background:#EDA100; } .c-verktyg { stroke:#E87BA4; background:#E87BA4; }
.c-marknad { stroke:#008300; background:#008300; } .c-ovrigt { stroke:#98A2B3; background:#98A2B3; }
.eco-facts { margin:0; display:flex; flex-direction:column; }
.eco-facts div { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.eco-facts div:last-child { border-bottom:none; }
.eco-facts dt { color:var(--muted); } .eco-facts dd { margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
.eco-ok { color:var(--green); font-weight:600; }
.eco-table td.pos { color:var(--green); font-weight:700; } .eco-table td.neg { color:var(--bad); font-weight:700; }
.exp-list { list-style:none; margin:12px 0; padding:0; border:1px solid var(--line); border-radius:12px; }
.exp { border-bottom:1px solid var(--line); } .exp:last-child { border-bottom:none; }
.exp-sum { display:flex; align-items:center; gap:10px; padding:11px 14px; flex-wrap:wrap; font-size:14px; }
.exp-sum .muted { font-size:12px; flex:1; min-width:140px; }
details > summary.exp-sum { cursor:pointer; list-style:none; } details > summary.exp-sum::-webkit-details-marker { display:none; }
details > summary.exp-sum:hover { background:#FAFBFC; }
.exp-amt { font-size:13px; }
.exp-edit { font-size:12px; color:var(--green); font-weight:600; }
details[open] .exp-edit { color:var(--muted); }
.exp.auto { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; background:#FAFBFC; }
.exp-inline { display:flex; align-items:flex-end; gap:8px; padding:0 14px 10px; }
.exp-inline label { font-size:12px; } .exp-inline input { width:90px; padding:6px 9px; }
.exp-inline button { margin:0; padding:7px 12px; }
.exp-form { padding:4px 14px 14px; }
.f-exp { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.f-exp .wide { grid-column:1 / -1; }
.exp-actions { display:flex; align-items:center; gap:12px; margin-top:6px; }
.danger-link { color:var(--bad); font-size:13px; margin:6px 0 0; }
.exp-new > summary { list-style:none; margin:0; } .exp-new > summary::-webkit-details-marker { display:none; }
.exp-new[open] > summary { margin-bottom:8px; }
.exp-new .exp-form { border:1px solid var(--line); border-radius:12px; padding:14px; }
@media (max-width: 600px) { .f-exp { grid-template-columns:1fr 1fr; } .exp-inline { padding-top:0; } }
@media (max-width: 600px) {
  .eco-tick, .eco-x { font-size:19px; }
  .eco-table th, .eco-table td { padding:8px 6px; font-size:12px; }
  .eco-table th:nth-child(4), .eco-table td:nth-child(4) { display:none; }
}
.eco-agent-btn { margin-left:auto; } .eco-agent-btn button { font-size:12px; color:inherit; opacity:.8; text-decoration:underline; }
.eco-check ul { margin:8px 0 0; padding-left:18px; } .eco-check li { margin:3px 0; }
.eco-check li.f-varning::marker { content:"! "; color:var(--gold); font-weight:800; }
.eco-check li.f-agent::marker { content:"✦ "; color:var(--gold); }
.tx-kind { border:none; padding:0; margin:0 0 10px; display:flex; gap:18px; }
.tx-form:has(input[name=kind][value=in]:checked) .tx-ut, .tx-form:has(input[name=kind][value=ut]:checked) .tx-in { display:none; }
.tx-sign { width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; font-weight:800; }
.tx-sign.in { background:var(--green-soft); color:var(--green); } .tx-sign.ut { background:var(--bad-soft); color:var(--bad); }
.tx-list form { margin-left:auto; }

/* Struktur: svagt korn och mjuk färgton (2026-11-14).
   Bara på ytor som redan är stora och dekorativa. Aldrig bakom löpande text. */
:root {
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09  0 0 0 0 .13  0 0 0 0 .17  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.public { position:relative; isolation:isolate; }
body.public::before { content:""; position:absolute; z-index:-1; inset:0 0 auto 0; height:760px; pointer-events:none;
  background:var(--grain-light),
    radial-gradient(760px 380px at 88% 4%, rgba(232,163,23,.13), transparent 70%),
    radial-gradient(640px 360px at 4% 14%, rgba(31,122,92,.09), transparent 70%);
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent); }
.how-bottom, .signup-side, .plan.featured, .final-cta { background-image:var(--grain-dark); }
.demo-stage { background-image:var(--grain-light), linear-gradient(160deg, #F6F7F8, #EEF1F4); }