/* Min Saldo — delt brand-CSS (ledger-æstetik: pergament/blæk/grøn).
   Pergament-lærred · blæk-navy · skovgrøn · guld · Fraunces + Space Grotesk. */
:root{
  /* "Bedste fra begge": mockup'ens grøn-teal blæk + guld · vores Fraunces-display + mockup'ens Mulish-UI */
  --bg:#ece6d8; --surface:#fbf9f3; --surface-2:#f3ede0;
  --border:#e7e0cf; --border-strong:#dcd4c2;
  --text:#14312b; --ink:#14312b; --muted:#6a7168; --muted-2:#b7ad96;
  --green:#0e6b4c; --green-2:#12856f; --green-deep:#0c5a40; --green-soft:#dceae0;
  --gold:#c79a3e; --gold-lite:#e6c680; --red:#b23a2e; --red-soft:#f4dfd9;
  --font:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --shadow-sm:0 1px 2px rgba(43,32,14,.06);
  --shadow:0 1px 2px rgba(43,32,14,.05), 0 10px 30px -12px rgba(43,32,14,.22);
  --shadow-lg:0 2px 8px rgba(43,32,14,.08), 0 30px 60px -20px rgba(28,20,8,.32);
  --r:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font); color:var(--text); line-height:1.55;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 480px at 82% -8%, rgba(14,110,92,.06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
a{color:var(--green); text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--green); font-weight:600}
.display{font-family:var(--display); letter-spacing:-.02em; color:var(--ink)}
.muted{color:var(--muted)}

/* brand lockup */
.brand{display:inline-flex; align-items:center; gap:11px; font-family:var(--display); font-weight:600; font-size:21px; color:var(--ink); letter-spacing:-.02em}
.brand .min{font-style:italic; font-weight:400; color:var(--muted); margin-right:.08em}
.brand img{display:block}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font);
  font-weight:600; font-size:15px; border-radius:999px; padding:12px 22px; cursor:pointer; border:1px solid transparent;
  transition:transform .12s var(--ease), box-shadow .2s var(--ease), background .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 8px 20px -8px rgba(14,110,92,.5)}
.btn-primary:hover{background:var(--green-2)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface); border-color:var(--muted-2)}
.btn-block{width:100%}
.btn-lg{padding:15px 28px; font-size:16px}

/* fields */
.field{display:block; width:100%; font-family:var(--font); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm);
  padding:13px 15px; transition:border .15s, box-shadow .15s}
.field::placeholder{color:var(--muted-2)}
.field:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 4px var(--green-soft)}
.label{font-size:13px; font-weight:600; color:var(--muted); margin:0 0 7px 2px; display:block}

/* card */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow)}

/* chip */
.chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--border-strong);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:500; color:var(--ink); box-shadow:var(--shadow-sm)}
.chip .k{width:7px; height:7px; border-radius:50%; background:var(--green)}
.chip.gold .k{background:var(--gold)}

/* logo settle animation */
@keyframes settle{0%{transform:rotate(-4.5deg)}55%{transform:rotate(2.6deg)}100%{transform:rotate(0)}}
.settle{transform-origin:50% 30%; animation:settle 1.15s var(--ease) both}
@media (prefers-reduced-motion:reduce){.settle{animation:none}}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.rise{animation:rise .7s var(--ease) both}

/* ── REGEL: ingen native alert/prompt/confirm — brug ui.js (branded modaler) ── */
.btn-danger{background:var(--red); color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.ui-overlay{position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:rgba(20,15,6,.42); backdrop-filter:blur(3px); animation:ui-fade .18s var(--ease)}
.ui-modal{width:100%; max-width:424px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; animation:ui-pop .22s var(--ease)}
.ui-modal .ui-head{display:flex; gap:12px; align-items:center; padding:20px 22px 0}
.ui-modal .ui-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0;
  background:var(--green-soft); color:var(--green-deep)}
.ui-modal.danger .ui-ic{background:var(--red-soft); color:#7f261c}
.ui-modal .ui-title{font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.01em}
.ui-modal .ui-body{padding:13px 22px 2px; color:var(--muted); font-size:14.5px; line-height:1.55}
.ui-modal .ui-body .field{margin-top:12px}
.ui-modal .ui-foot{display:flex; justify-content:flex-end; gap:10px; padding:18px 22px 20px}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ui-pop{from{opacity:0; transform:translateY(8px) scale(.98)}to{opacity:1; transform:none}}
.ui-toasts{position:fixed; left:0; right:0; bottom:24px; z-index:1100; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.ui-toast{background:var(--ink); color:#f4efe3; padding:11px 18px; border-radius:999px; font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); animation:ui-toast-in .3s var(--ease)}
.ui-toast.err{background:var(--red)} .ui-toast.ok{background:var(--green)}
@keyframes ui-toast-in{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.ui-overlay,.ui-modal,.ui-toast{animation:none}}