/* GENERERAD från site_build/css/. */
/* Layout: calm, airy page. Light serif headlines in one color, quiet grotesk text, one dark band for the AI section. */
:root{
  --paper:#FFFFFF;
  --surface:#FFFFFF;
  --sunk:#F4F5F9;
  --ink:#0E0F1A;
  --ink-2:#55596B;
  --ink-3:#8A8D9B;
  --line:#E5E6EC;
  --accent:#2B2F7A;
  --accent-soft:#EDEEF9;
  --btn:#2B2F7A;
  --btn-ink:#FFFFFF;
  --band:#1E2160;
  --band-ink:#F4F2EA;
  --band-ink-2:#B4B8E2;
  --band-line:rgba(244,242,234,.22);
  --chat:#FFFFFF;
  --chat-ink:#0E0F1A;
  --chat-sunk:#F4F5F9;
  --chat-line:#E5E6EC;
  --ok:#0F7A45; --ok-bg:#DDF2E5;
  --wait:#94590A; --wait-bg:#F8EAD2;
  --shade:#0E0F1A;
  --shadow:0 1px 2px rgba(14,15,26,.035), 0 14px 30px -22px rgba(14,15,26,.22);

  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --r-md:14px; --r-lg:22px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#000000; --surface:#0B0B11; --sunk:#131319; --ink:#F4F4F8; --ink-2:#9A9BA8; --ink-3:#6B6C79; --line:#1F2028;
    --accent:#9CA2F0; --accent-soft:#1A1B3C; --btn:#4951C6; --btn-ink:#FFFFFF;
    --band:#14173F; --band-ink:#F4F4F8; --band-ink-2:#A9ADD8; --band-line:rgba(244,244,248,.18);
    --chat:#0B0B11; --chat-ink:#F4F4F8; --chat-sunk:#15151D; --chat-line:#20212A;
    --ok:#56D394; --ok-bg:#0E2618; --wait:#F0B860; --wait-bg:#2A1F0C; --shade:#000000;
    --shadow:0 1px 0 rgba(0,0,0,.7), 0 16px 36px -22px rgba(0,0,0,.95);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#000000; --surface:#0B0B11; --sunk:#131319; --ink:#F4F4F8; --ink-2:#9A9BA8; --ink-3:#6B6C79; --line:#1F2028;
  --accent:#9CA2F0; --accent-soft:#1A1B3C; --btn:#4951C6; --btn-ink:#FFFFFF;
  --band:#14173F; --band-ink:#F4F4F8; --band-ink-2:#A9ADD8; --band-line:rgba(244,244,248,.18);
  --chat:#0B0B11; --chat-ink:#F4F4F8; --chat-sunk:#15151D; --chat-line:#20212A;
  --ok:#56D394; --ok-bg:#0E2618; --wait:#F0B860; --wait-bg:#2A1F0C; --shade:#000000;
  --shadow:0 1px 0 rgba(0,0,0,.7), 0 16px 36px -22px rgba(0,0,0,.95);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-size:13px}
.tnum{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance;color:inherit;font-weight:400}
h1,h2{font-family:var(--f-display);font-weight:300;font-optical-sizing:auto}
h2{font-size:clamp(36px,4.6vw,62px);line-height:1.04;letter-spacing:-.025em}
h3{font-family:var(--f-body);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.lead{font-size:clamp(17px,1.45vw,19px);color:var(--ink-2);max-width:58ch;line-height:1.6}

/* Logo */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.mk{display:block;flex:none;width:30px;height:30px;color:var(--accent)}
.wm{font-family:var(--f-body);font-weight:600;font-size:23px;letter-spacing:-.04em;line-height:1;white-space:nowrap;color:inherit}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:500 16px/1 var(--f-body);padding:15px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s ease,opacity .15s}
.btn-primary{background:var(--btn);color:var(--btn-ink)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-sm{padding:10px 17px;font-size:14.5px}
.btn .arrow{transition:transform .2s}
.btn:hover .arrow{transform:translateX(3px)}

/* Header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
header.site.scrolled{border-bottom-color:var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
nav.links{display:flex;gap:28px;font-size:15px}
nav.links a{text-decoration:none;color:var(--ink-2)}
nav.links a:hover{color:var(--ink)}
.head-cta{display:flex;gap:14px;align-items:center}
.login{font-size:15px;text-decoration:none;color:var(--ink-2)}
@media (max-width:920px){nav.links,.login{display:none}}

/* Hero */
.hero{padding-block:clamp(48px,7vw,104px) clamp(56px,7vw,100px)}
.hero h1{font-size:clamp(46px,7vw,104px);line-height:1;letter-spacing:-.035em}
.hero h1 span{display:block}
.hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(32px,4.5vw,60px)}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
.hero-copy{display:flex;flex-direction:column;gap:14px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.chip-app{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 16px 8px 10px;font-size:14.5px;color:var(--ink)}
.chip-app .slot{width:21px;height:21px;border-radius:6px;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:-.02em;color:#FFFFFF}
.chip-app .slot.claude{background:#D97757}
.chip-app .slot.gpt{background:#10A37F}

/* Hero scene: the mark floats off on a balloon, the paperwork stays on the ground */
.webcard{min-width:0}
.scene{position:relative}
.scene-svg{display:block;width:100%;height:auto}
.sheet{fill:var(--sunk);stroke:var(--line);stroke-width:1.2}
.rule{fill:var(--ink-3);opacity:.4}
.balloon{fill:var(--accent)}
.string{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round}
.shadow{fill:url(#shGrad)}
.plabel{position:absolute;left:0;top:0;transform:translate(-50%,-50%) translateY(var(--lift,0px)) rotate(calc(var(--rot,0deg) + var(--tilt,0deg)));transition:transform .45s cubic-bezier(.2,.9,.3,1);font-size:clamp(9px,1.25vw,12.5px);font-weight:600;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;pointer-events:none;opacity:0}
.plabel.set{opacity:1}
.sw{transform-box:fill-box;transform-origin:50% 100%;transform:translateY(var(--lift,0px)) rotate(var(--tilt,0deg));transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.string{transition:none}
.webnote{margin-top:10px;color:var(--ink-2);font-size:14.5px;text-align:center}
@media (max-width:620px){.plabel.lp3{display:none}}

/* Four ways in, one bookkeeping */
.mergecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:30px}
.merge-viz{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);column-gap:clamp(44px,9%,120px);row-gap:24px;align-items:center;min-height:320px}
.lanes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lane{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.24;stroke-linecap:round}
.lane-dot{fill:var(--accent);display:none}
.merge-viz.go .lane-dot{display:inline}
.sources{margin:0;padding:0;list-style:none;display:grid;grid-template-rows:repeat(4,1fr);position:relative;z-index:1;min-height:320px}
.sources li{display:flex;flex-direction:column;gap:2px;justify-content:center}
.sources b{font-size:16.5px;font-weight:600}
.sources span{color:var(--ink-2);font-size:14.5px}
.sink{position:relative;z-index:1;justify-self:end;display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 22px;box-shadow:var(--shadow)}
.sink .mk{width:40px;height:40px;color:var(--accent)}
.sink b{font-size:16.5px;font-weight:600;display:block}
.sink span{color:var(--ink-2);font-size:14px}
@media (max-width:760px){.merge-viz{grid-template-columns:1fr;gap:22px;min-height:0}.lanes{display:none}.sources{min-height:0;gap:18px}.sink{justify-self:stretch}.mergecard{padding:22px}}

/* Theme toggle */
.themebtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.themebtn .ic-sun{display:none}
.themebtn.is-dark .ic-sun{display:block}
.themebtn.is-dark .ic-moon{display:none}
.chip{font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--sunk);color:var(--ink-2)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.wait{background:var(--wait-bg);color:var(--wait)}
.chip.ai{background:var(--accent-soft);color:var(--accent)}
/* Proof strip */
.proof{border-block:1px solid var(--line)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof div{padding:30px 24px 30px 0;display:flex;flex-direction:column;gap:6px}
.proof div + div{padding-left:24px;border-left:1px solid var(--line)}
.proof strong{font-family:var(--f-display);font-size:clamp(34px,3.8vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1}
.proof span{color:var(--ink-2);font-size:14.5px;max-width:28ch}
@media (max-width:820px){.proof .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.proof div:nth-child(3){padding-left:0;border-left:0}.proof div:nth-child(n+3){border-top:1px solid var(--line)}}

/* Sections */
section.block{padding-block:clamp(80px,10vw,140px)}
section.tight{padding-top:0}
.block.alt{background:var(--sunk)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,68px)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}

/* Roles */
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.roles{grid-template-columns:1fr}}
.role{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:16px}
.role h3{font-family:var(--f-display);font-weight:300;font-size:38px;letter-spacing:-.025em;line-height:1}
.role .sub{color:var(--ink-2)}
.role ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.role li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.role.is-agent{background:var(--band);border-color:var(--band);color:var(--band-ink)}
.role.is-agent .sub{color:var(--band-ink-2)}
.role.is-agent ul,.role.is-agent li{border-color:var(--band-line)}

/* Compare */
.compare{border-top:1px solid var(--ink)}
table.compare{display:block;width:100%;border-collapse:collapse}
table.compare thead,table.compare tbody{display:block}
.cmp-row > th,.cmp-row > td{text-align:left;vertical-align:top}
.cmp-head > th{font-weight:500}
.cmp-row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.1fr);border-bottom:1px solid var(--line)}
.cmp-row > *{padding:18px 20px 18px 0;font-size:16px}
.cmp-row > *:first-child{font-weight:600}
.cmp-row > *:nth-child(2){color:var(--ink-3)}
.cmp-row > *:nth-child(3){background:var(--accent-soft);padding-left:22px}
.cmp-head > *{padding-block:16px;font-size:14px;color:var(--ink-2);font-weight:500}
.cmp-head > *:nth-child(3){display:flex;align-items:center;gap:10px;background:var(--btn);color:var(--btn-ink);border-radius:var(--r-md) var(--r-md) 0 0;padding-left:22px}
.cmp-head .mk{width:23px;height:23px;color:var(--btn-ink)}
.cmp-head .wm{font-size:18px}
.cmp-row:last-child > span:nth-child(3){border-radius:0 0 var(--r-md) var(--r-md)}
@media (max-width:700px){
  .cmp-row{grid-template-columns:1fr 1fr}
  .cmp-row > *:first-child{grid-column:1/-1;padding:16px 0 6px}
  .cmp-head > *:first-child{display:none}
  .cmp-row > *:nth-child(2){padding:10px 12px 16px 0;font-size:15px}
  .cmp-row > *:nth-child(3){padding:10px 12px 16px;font-size:15px}
  .cmp-head > *:nth-child(2){padding:14px 0}
  .cmp-head > *:nth-child(3){padding:14px 12px}
}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{padding:28px 28px 4px 0;display:flex;flex-direction:column;gap:12px}
.step + .step{padding-left:28px;border-left:1px solid var(--line)}
@media (max-width:860px){.step + .step{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.step .n{width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;font-size:14px;color:var(--accent)}
.step p{color:var(--ink-2);margin-bottom:10px}
.mini{margin-top:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:flex;gap:14px;align-items:center;font-size:14.5px;box-shadow:var(--shadow)}
.mini-cal{width:58px;flex:none;border-radius:10px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:6px 0;font-size:11px;color:var(--ink-3)}
.mini-cal strong{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.05;color:var(--ink)}
.mini-meta{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}
.mini-meta strong{font-weight:600}
.mini-meta .mono{color:var(--ink-3);font-size:12.5px}
.mini-list{flex-direction:column;align-items:stretch;gap:0;padding:4px 14px}
.mini-list div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0}
.mini-list div + div{border-top:1px solid var(--line)}
.mini-done .mk{width:40px;height:40px}

/* Inflows */
.inflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:960px){.inflow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.inflow{grid-template-columns:1fr}}
.src{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--surface);min-width:0}
.src .ico{width:40px;height:40px;border-radius:12px;background:var(--sunk);display:grid;place-items:center}
.src .ico svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.src p{color:var(--ink-2);font-size:15.5px}
.src .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.merge{margin-top:12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;background:var(--surface)}
.merge p{color:var(--ink-2);max-width:72ch}
.merge strong{color:var(--ink);font-weight:600}
.flowline{display:flex;gap:6px;align-items:center}
.flowline i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.25;animation:flow 1.6s infinite}
.flowline i:nth-child(2){animation-delay:.2s}.flowline i:nth-child(3){animation-delay:.4s}.flowline i:nth-child(4){animation-delay:.6s}
@keyframes flow{0%,100%{opacity:.25}40%{opacity:1}}

/* AI band */
.band{background:var(--band);color:var(--band-ink)}
.band .lead{color:var(--band-ink-2)}
.band-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:980px){.band-grid{grid-template-columns:1fr}}
.band ul.feat{list-style:none;padding:0;margin:30px 0 0;border-top:1px solid var(--band-line)}
.band ul.feat li{padding:15px 0;border-bottom:1px solid var(--band-line)}
.band .apps{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.band .chip-app{background:transparent;border-color:var(--band-line);color:var(--band-ink)}
.chat{background:var(--chat);color:var(--chat-ink);border-radius:var(--r-lg);padding:22px;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:14px;min-width:0}
.chat-top{display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);padding-bottom:12px;border-bottom:1px solid var(--chat-line);font-size:13.5px}
.msg{max-width:88%;font-size:15.5px;line-height:1.5}
.msg.user{align-self:flex-end;background:var(--chat-sunk);padding:11px 15px;border-radius:16px 16px 4px 16px}
.msg.bot{align-self:flex-start;display:flex;flex-direction:column;gap:10px}
.tool{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--f-mono);font-size:12px;border:1px solid var(--chat-line);border-radius:8px;padding:5px 10px;color:var(--ink-3)}
.tool .mk{width:15px;height:15px}
.mini-status{border:1px solid var(--chat-line);border-radius:12px;overflow:hidden;font-size:14px}
.mini-status div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px}
.mini-status div + div{border-top:1px solid var(--chat-line)}
.files{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.file{font-family:var(--f-mono);font-size:12px;background:var(--chat);border:1px solid var(--chat-line);padding:6px 10px;border-radius:8px}
.composer{display:flex;align-items:center;gap:10px;border:1px solid var(--chat-line);border-radius:14px;padding:10px 12px;color:var(--ink-3);font-size:15px;margin-top:4px}
.composer span{flex:1}
.composer b{width:28px;height:28px;border-radius:50%;background:var(--chat-ink);display:grid;place-items:center;color:var(--chat);font-size:14px}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;gap:18px;position:relative}
.plan.pop{border:1.5px solid var(--accent)}
.plan .badge{position:absolute;top:-12px;left:28px;background:var(--btn);color:var(--btn-ink);font-size:12.5px;font-weight:500;padding:3px 11px;border-radius:999px}
.plan .who-for{color:var(--ink-2);font-size:15.5px;min-height:3.2em}
.price{display:flex;align-items:baseline;gap:6px}
.price strong{font-family:var(--f-display);font-size:58px;letter-spacing:-.03em;font-weight:300;line-height:1}
.price span{color:var(--ink-2)}
.plan dl{margin:0;display:grid;grid-template-columns:auto auto;border-top:1px solid var(--line)}
.plan dt,.plan dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.plan dt{color:var(--ink-2)}
.plan dd{text-align:right;font-weight:500}
.plan .btn{justify-content:center;margin-top:auto}
.small-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:760px){.small-plans{grid-template-columns:1fr}}
.small-plan{border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.small-plan p{color:var(--ink-2);font-size:14.5px;margin-top:4px}
.small-plan .p{font-family:var(--f-display);font-size:32px;font-weight:300;letter-spacing:-.02em;white-space:nowrap}
.small-plan .p span{font-family:var(--f-body);font-size:14px;color:var(--ink-2)}
.included{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:14.5px}
.included strong{font-weight:600;margin-right:6px}
.included .chip{font-size:13px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}

/* People + fit */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.people{grid-template-columns:1fr}}
.person{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;padding:30px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.avatar{width:72px;height:72px;border-radius:50%;background:var(--sunk);color:var(--ink);display:grid;place-items:center;font-family:var(--f-display);font-weight:300;font-size:36px}
.person .role-t{color:var(--ink-3);margin:4px 0 10px;font-size:14.5px}
.person p{color:var(--ink-2);font-size:15.5px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
@media (max-width:860px){.two{grid-template-columns:1fr}}
.fit{border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.fit h3{margin-bottom:14px}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{padding:10px 0;border-top:1px solid var(--line);display:flex;gap:12px;font-size:15.5px}
.fit li i{font-style:normal;width:16px;flex:none}
.fit.yes li i{color:var(--ok)}
.fit.no li i{color:var(--ink-3)}
.fit .note{margin-top:16px;color:var(--ink-2);font-size:15px}

/* FAQ */
.faq{border-top:1px solid var(--ink);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:300;font-size:24px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:var(--ink-2);max-width:68ch}

/* Final */
.final{padding-block:clamp(90px,12vw,170px)}
.final .huge{font-family:var(--f-body);font-weight:600;font-size:clamp(70px,14vw,190px);line-height:.9;letter-spacing:-.055em;display:flex;align-items:center;gap:.15em;flex-wrap:wrap;margin:0;color:var(--ink)}
.final .huge .mk{width:.82em;height:.82em}
.final .slogan{font-family:var(--f-display);font-weight:300;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.025em;line-height:1.1;margin-top:22px;color:var(--ink)}
.final-row{display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap;margin-top:40px}

footer{border-top:1px solid var(--line);padding-block:36px 96px;color:var(--ink-2);font-size:14.5px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.foot-brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-slogan{font-family:var(--f-display);font-weight:300;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.foot-legal{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-3);font-size:13.5px}
footer .mk{width:25px;height:25px}
footer .wm{font-size:19px}

/* Booking dialog */
dialog.book{border:0;padding:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-shadow:0 40px 80px -20px rgba(0,0,0,.45)}
dialog.book::backdrop{background:rgba(9,10,19,.55);backdrop-filter:blur(4px)}
.book-in{padding:26px;display:flex;flex-direction:column;gap:18px}
.book-top{display:flex;justify-content:space-between;align-items:start;gap:16px}
.book-top h3{font-family:var(--f-display);font-weight:300;font-size:32px;letter-spacing:-.02em}
.book-top p{color:var(--ink-2);font-size:15px;margin-top:6px}
.x{background:var(--sunk);border:0;width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--ink);font-size:18px;line-height:1;flex:none}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.day,.slot{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;cursor:pointer;font-family:var(--f-body)}
.day{padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.day small{font-size:12px;color:var(--ink-3)}
.day strong{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.1}
.day[aria-pressed="true"],.slot[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.day[aria-pressed="true"] small{color:var(--btn-ink)}
.slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:480px){.slots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{padding:10px 0;font-size:15px;font-variant-numeric:tabular-nums}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;color:var(--ink-2)}
.field input,.field select{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.book-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.book-foot .hint{color:var(--ink-3);font-size:14px}
.done-mark{width:52px;height:52px}
.demo-flag{font-size:13px;color:var(--wait);background:var(--wait-bg);padding:6px 10px;border-radius:8px;align-self:flex-start}


/* ---- Tillägg för hela sajten (site_build/css/site.css) ----
   design.css är startsidans design från Vinka2.0, oförändrad. Här ligger det som
   undersidorna, sidfoten och mobilmenyn behöver. Inga hårdkodade färger, bara tokens. */

/* Mobilmeny */
.menubtn{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;place-items:center;padding:0;flex:none}
.menubtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper)}
.mnav a{display:block;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:17px}
header.site.open .mnav{display:block}
@media (max-width:920px){.menubtn{display:grid}}
@media (min-width:921px){.mnav{display:none!important}}
nav.links a[aria-current="page"]{color:var(--ink)}
@media (max-width:420px){.head-cta .btn-sm{padding:10px 13px}}

/* h2 som ser ut som h3 (rätt rubriknivå utan att ändra utseendet) */
.h3like{font-family:var(--f-body);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.25}

/* Undersidornas sidhuvud */
.page-hero{padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,88px)}
.crumbs{font-size:14px;color:var(--ink-3);margin-bottom:clamp(20px,3vw,36px)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.page-hero h1{font-family:var(--f-display);font-weight:300;font-size:clamp(42px,5.8vw,82px);line-height:1.02;letter-spacing:-.032em;max-width:16ch}
.page-hero .lead{margin-top:clamp(18px,2vw,26px)}
.page-hero .hero-actions{margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px}
.facts .chip{font-size:13.5px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}

/* Löptext (tjänster, bolagsformer, guider) */
.prose{max-width:72ch}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;margin-top:1.6em}
.prose h3{margin-top:1.5em}
.prose h2 + p,.prose h3 + p{margin-top:.6em}
.prose p,.prose li{color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.prose table,.dtable{width:100%;border-collapse:collapse;font-size:15.5px;display:block;overflow-x:auto}
.prose th,.prose td,.dtable th,.dtable td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th,.dtable th{font-weight:600;color:var(--ink);border-bottom-color:var(--ink)}
.dtable{display:table;font-variant-numeric:normal}
.dtable tbody th{border-bottom-color:var(--line);font-weight:500;color:var(--ink-2)}
.dtable td.hl,.dtable th.hl{background:var(--accent-soft);padding-left:14px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap .dtable{min-width:640px}
.dtable caption{caption-side:bottom;text-align:left;font-size:14px;color:var(--ink-3);padding-top:12px}
.prose .note{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--sunk);color:var(--ink-2)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,6vw,96px);align-items:start}
@media (max-width:960px){.cols{grid-template-columns:1fr}}
.aside{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}
.aside h3{font-family:var(--f-display);font-weight:300;font-size:30px;letter-spacing:-.02em;line-height:1.05}
.aside p{color:var(--ink-2);font-size:15.5px}
.aside .price strong{font-size:44px}
.aside ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.aside li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;display:flex;gap:10px}
.aside li i{font-style:normal;color:var(--ok)}
@media (max-width:960px){.aside{position:static}}

/* Länkkort */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.cards.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){.cards,.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards,.cards.four,.cards.five{grid-template-columns:1fr}}
.lcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--surface);transition:border-color .15s,transform .15s}
.lcard:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.lcard h3{font-size:19px}
.lcard p{color:var(--ink-2);font-size:15.5px}
.lcard .go{margin-top:auto;padding-top:8px;color:var(--accent);font-size:15px;font-weight:500}
.lcard .go::after{content:" →"}
.lcard .mono{color:var(--ink-3)}

/* Ingår-lista */
.inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border-top:1px solid var(--ink);margin:0;padding:0;list-style:none}
@media (max-width:700px){.inc{grid-template-columns:1fr}}
.inc li{padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:14px}
.inc li i{font-style:normal;color:var(--ok);flex:none}
.inc li b{font-weight:600;display:block}
.inc li span{color:var(--ink-2);font-size:15.5px}

/* Avslutande uppmaning på undersidor */
.endcta{background:var(--band);color:var(--band-ink);border-radius:var(--r-lg);padding:clamp(32px,5vw,64px);display:flex;justify-content:space-between;align-items:end;gap:28px;flex-wrap:wrap}
.endcta h2{font-size:clamp(32px,4vw,52px);max-width:16ch}
.endcta p{color:var(--band-ink-2);margin-top:14px;max-width:52ch}
.endcta .btn-primary{background:var(--band-ink);color:var(--band)}

/* Stor sidfot */
footer.site-foot{border-top:1px solid var(--line);padding-block:clamp(56px,7vw,96px) 40px;color:var(--ink-2);font-size:15px}
footer.site-foot .wrap{display:block}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:36px 28px}
@media (max-width:1100px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-grid > .foot-about{grid-column:1/-1}}
@media (max-width:620px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot-about .slogan{font-family:var(--f-display);font-weight:300;font-size:24px;letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin-top:18px;max-width:16ch}
.foot-about p{margin-top:14px;max-width:34ch;font-size:14.5px}
.foot-about .btn{margin-top:20px}
.foot-col h2{font-family:var(--f-body);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink);margin-bottom:14px;line-height:1.3}
.foot-col a{display:block;padding:5px 0;text-decoration:none;font-size:14.5px}
.foot-col a:hover{color:var(--ink)}
.foot-col p{font-size:14.5px;padding:5px 0}
.foot-bottom{margin-top:clamp(40px,6vw,72px);padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px 28px;flex-wrap:wrap;color:var(--ink-3);font-size:13.5px}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}
footer.site-foot .mk{width:25px;height:25px}
footer.site-foot .wm{font-size:19px}

/* Bokning: felmeddelande och honeypot */
.book-err{color:var(--wait);background:var(--wait-bg);padding:8px 12px;border-radius:10px;font-size:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Tabellsiffror ger kommatecken fast bredd ("0 , 5"). Normala siffror i paketens faktarader. */
.plan dl.tnum{font-variant-numeric:normal}

/* Designrättelser: .proof div träffar även .wrap och nollar sidmarginalen */
.proof > .wrap{padding:0 max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px))}
.head-cta .btn{white-space:nowrap}
@media (max-width:400px){.head-cta{gap:8px}.head-cta .btn-sm{padding:10px 12px;font-size:14px}.logo .wm{font-size:21px}}

/* Riktiga ikoner för Claude och ChatGPT i chipsen (ersätter färgade platshållare) */
.chip-app .appicon{width:20px;height:20px;flex:none;display:block;object-fit:contain}
.band img.ic-gpt,:root[data-theme="dark"] img.ic-gpt{filter:invert(1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) img.ic-gpt{filter:invert(1)}}
/* Porträtt */
img.avatar{object-fit:cover;display:block}

/* Tabeller i löptext: full bredd på större skärmar, scroll på mobil */
@media (min-width:700px){.prose table{display:table}}

/* Kopierbar adress (/ai-redovisning) och länkade app-chips */
.copybox{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;background:var(--surface)}
.copybox .copylabel{font-size:14px;color:var(--ink-2)}
.copybox code{font-family:var(--f-mono);font-size:15px;color:var(--ink);background:var(--sunk);padding:6px 10px;border-radius:8px;word-break:break-all}
a.chip-app{text-decoration:none}
a.chip-app:hover{border-color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Bokslutsverktyget (/bokslut). Stilarna kommer från den gamla styles.css och
   bokslut.html, med färgerna kopplade till den nya designens tokens så att ljust och mörkt
   läge fungerar. bokslut.js skapar element med de här klasserna. */
:root{
  --surface-2:var(--sunk); --muted:var(--ink-2); --ink-soft:var(--ink-2); --border:var(--line);
  --brand:var(--accent); --brand-strong:var(--accent); --coral:#C2412D;
  --radius:var(--r-lg); --radius-sm:12px; --radius-pill:999px; --shadow-sm:var(--shadow);
}
.muted{color:var(--ink-2)}
.tool-scope .section-head{margin-bottom:22px}
.tool-scope .section-head h2{font-size:clamp(30px,3.4vw,44px)}
.tool-scope .section-head .lead{margin-top:12px}
.tool-scope h3{font-family:var(--f-body)}
.tool-scope select,.tool-scope input[type=text]{background:var(--surface);color:var(--ink)}
.acct-table{display:table}
@media (max-width:760px){.acct-table{display:block;overflow-x:auto}}
.toast{opacity:0;transition:opacity .2s,transform .2s;z-index:80}
.upload { border: 2px dashed var(--line); border-radius: var(--radius); padding: 30px; text-align: center; color: var(--muted); transition: border-color .15s ease, background .15s ease; }
.upload.drag { border-color: var(--brand); background: var(--accent-soft); color: var(--brand-strong); }
.link { color: var(--brand-strong); font-weight: 600; cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.tool-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.tool-bar .grp { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--radius-pill); padding: 4px; }
.seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: var(--radius-pill); font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.tool-bar select { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: var(--surface); }
.tool-progress { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.tool-progress .bar { width: 120px; height: 8px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.tool-progress .bar i { display: block; height: 100%; background: var(--brand); width: 0; transition: width .3s ease; }
.acct-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acct-table th, .acct-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.acct-table th { background: var(--surface-2); font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.acct-table tr:last-child td { border-bottom: 0; }
.acct-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-table tr.done { background: var(--accent-soft); }
.acct-no { font-weight: 700; }
.acct-name { color: var(--muted); }
.link-btn { border: 0; background: none; color: var(--brand-strong); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.file-hint { color: var(--muted); font-size: 12.5px; display: block; margin-top: 3px; max-width: 200px; }
.reco-btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 7px 14px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.reco-btn.on { background: var(--accent-soft); border-color: var(--line); color: var(--brand-strong); }
.tool-empty { text-align: center; padding: 30px; }
.acct-table tr.main { cursor: pointer; }
.acct-table tr.main:hover { background: var(--sunk); }
.acct-table tr.main.open { background: var(--accent-soft); }
.acct-caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); margin-right: 11px; transition: transform .15s ease; vertical-align: middle; }
.acct-table tr.main.open .acct-caret { transform: rotate(45deg); }
.u-sum { color: var(--muted); font-size: 13px; }
.u-sum.has { color: var(--brand-strong); font-weight: 600; }
.acct-detail > td { background: var(--sunk); padding: 0; }
.detail-wrap { padding: 24px 22px; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.detail-no { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.detail-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.detail-amount { font-size: 23px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.doc-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; }
.doc-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.doc-name .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft) no-repeat center; flex: 0 0 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l4 4v14H6z' fill='none' stroke='%230e5c3a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M14 3v4h4' fill='none' stroke='%230e5c3a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.doc-rm { border: 0; background: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.doc-rm:hover { color: var(--coral); }
.detail-empty { color: var(--muted); font-size: 14px; margin-top: 14px; }
.detail-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.tool-note { color: var(--muted); font-size: 13px; margin-top: 14px; }
.saved-banner { display: none; align-items: center; justify-content: space-between; gap: 14px; background: var(--accent-soft); border: 1px solid var(--line); color: var(--brand-strong); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.saved-banner.show { display: flex; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding: 13px 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 120; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    .bk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:18px 0}
    .bk-co{border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:var(--surface)}
    .bk-co h3{margin:0 0 4px;font-size:17px}
    .bk-co .org{color:var(--muted);font-size:13px}
    .bk-co .cnt{color:var(--muted);font-size:13px;margin-top:8px}
    .bk-co .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
    .bk-add{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:4px}
    .bk-add label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}
    .bk-add input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font:inherit}
    .bk-periods{display:flex;flex-direction:column;gap:8px;margin:10px 0}
    .bk-period{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--border);border-radius:10px;padding:10px 14px;flex-wrap:wrap}
    .bk-period .lbl{font-weight:600}
    .bk-period .meta{color:var(--muted);font-size:13px}
    .period-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
    .period-bar .lbl{font-weight:700;font-size:18px}
    .period-bar .meta{color:var(--muted);font-size:14px}
    .new-period{border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-top:18px;background:var(--surface-2)}
    .new-period .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
    .ul-modal{position:fixed;inset:0;background:rgba(9,10,19,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
    .ul-modal.show{display:flex}
    .ul-card{background:var(--surface);border-radius:16px;max-width:540px;width:100%;padding:22px;max-height:85vh;overflow:auto}
    .ul-tabs{display:flex;gap:8px;margin:14px 0}
    .ul-tab{padding:8px 14px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:14px;background:var(--surface)}
    .ul-tab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
    .ul-files{display:flex;flex-direction:column;gap:8px;margin-top:8px}
    .ul-file{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:14px;cursor:pointer}
    .ul-file .meta{color:var(--muted);font-size:12px;margin-left:auto}