/* Vater — public landing page. Palette A «Verktøykassa».
   Tokens: this file is the edit-first source; src/Varde.Monitor/wwwroot/varde.css
   and src/Varde.Onboarding/wwwroot/site.css carry a value-synced light-surface
   subset (token NAMES there are legacy: --beacon now holds libelle green). */

:root{
  --graphite:#23282b; --steel:#3a4145; --steel2:#2e3538; --chalk:#f3f2ec; --chalk2:#e9e7de;
  --libelle:#cde23c; --libelle-ink:#1d2114; --warn:#e2543c; --amber:#e0a02e;
  --ink:#23282b; --muted:#5f6a6e; --line:#dfded4; --card:#ffffff;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--chalk);color:var(--ink);font:16px/1.6 Seravek,'Gill Sans',Segoe UI,Calibri,sans-serif}
h1,h2,h3,.wordmark,.eyebrow,.btn{font-family:Bahnschrift,'DIN Alternate','Franklin Gothic Medium',Seravek,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.25rem}
a{color:inherit}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--graphite) 92%,transparent);backdrop-filter:blur(8px);color:var(--chalk)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.wordmark{display:flex;align-items:center;gap:.55rem;font-weight:700;letter-spacing:.22em;font-size:1.05rem;text-decoration:none}
.libelle{display:inline-block;width:34px;height:12px;border-radius:99px;background:var(--steel2);border:1px solid #4a5257;position:relative}
.libelle::before{content:"";position:absolute;top:2px;left:calc(50% - 6px);width:12px;height:6px;border-radius:99px;background:var(--libelle);box-shadow:0 0 6px color-mix(in srgb,var(--libelle) 70%,transparent)}
.libelle::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:0;border-left:1px dashed #5a6368;opacity:.7}
.nav-login{font-size:.85rem;text-decoration:none;border:1px solid #4a5257;border-radius:8px;padding:.4rem .9rem}
.nav-login:hover{border-color:var(--libelle);color:var(--libelle)}

/* early-stage notice — deliberately loud, deliberately askew */
.devnote{background:var(--amber);color:#241a05;font-size:.86rem}
.devnote .wrap{display:flex;align-items:center;gap:.8rem;padding-top:.55rem;padding-bottom:.55rem;flex-wrap:wrap}
.devnote b{font-weight:700}
.devtag{display:inline-block;background:#241a05;color:var(--amber);font-family:Bahnschrift,'DIN Alternate','Franklin Gothic Medium',Seravek,sans-serif;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;padding:.22rem .6rem;border-radius:6px;transform:rotate(-2deg);flex:0 0 auto}

/* hero */
.hero{background:linear-gradient(150deg,#1e2326 0%,var(--graphite) 45%,var(--steel) 100%);color:var(--chalk);padding:4.5rem 0 5rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--libelle);font-weight:600;margin:0 0 .8rem}
.hero h1{font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.08;margin:0 0 1rem;text-wrap:balance;letter-spacing:.01em}
.hero h1 .accent{color:var(--libelle)}
.hero-sub{color:#c9cec9;max-width:46ch;margin:0 0 1.8rem}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:9px;padding:.75rem 1.4rem;font-size:.95rem;letter-spacing:.02em}
.btn-primary{background:var(--libelle);color:var(--libelle-ink)}
.btn-primary:hover{filter:brightness(1.06)}
.link-cta{margin-left:1.2rem;font-size:.9rem;color:#c9cec9;text-decoration:none;border-bottom:1px solid #4a5257}
.link-cta:hover{color:var(--libelle);border-color:var(--libelle)}

/* hero mock w/ askew story */
.mock{background:var(--steel2);border:1px solid #454d52;border-radius:16px;padding:1rem;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mock-top{display:flex;justify-content:space-between;align-items:center;padding:.2rem .4rem .8rem;color:#c9cec9;font-size:.8rem}
.mock-top b{color:var(--chalk);font-size:.9rem}
.mock-level{display:flex;align-items:center;gap:.5rem;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.biglibelle{width:70px;height:14px;border-radius:99px;background:#242a2d;border:1px solid #4a5257;position:relative;overflow:hidden}
.biglibelle i{position:absolute;top:2px;width:16px;height:8px;border-radius:99px;background:var(--libelle);left:18%;transition:left 1.1s cubic-bezier(.3,.7,.2,1)}
.biglibelle::after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed #5a6368}
.leveled .biglibelle i{left:calc(50% - 8px)}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mcard{background:#272d31;border:1px solid #454d52;border-radius:10px;padding:.7rem .8rem;font-size:.78rem;color:#c9cec9;transition:transform 1.1s cubic-bezier(.3,.7,.2,1),border-color 1.1s}
.mcard b{color:var(--chalk);display:block;font-size:.86rem;margin-bottom:.15rem}
.mcard .amt{font-variant-numeric:tabular-nums;font-weight:700;color:var(--chalk)}
.chip{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.05em;border-radius:99px;padding:.13rem .5rem;margin-top:.4rem;text-transform:uppercase}
.chip.red{background:var(--warn);color:#fff}
.chip.amber{background:var(--amber);color:#241a05}
.chip.green{background:var(--libelle);color:var(--libelle-ink)}
.askew-1{transform:rotate(-2.1deg);border-color:var(--warn)}
.askew-2{transform:rotate(1.6deg);border-color:var(--amber)}
.askew-3{transform:rotate(-1.2deg);border-color:var(--amber)}
.leveled .askew-1,.leveled .askew-2,.leveled .askew-3{transform:rotate(0)}
.mock-foot{padding:.8rem .4rem .2rem;font-size:.74rem;color:#9aa39f;display:flex;justify-content:space-between;align-items:center}
.mock-foot .state{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);transition:color .6s}
.leveled .mock-foot .state{color:var(--libelle)}
@media (prefers-reduced-motion: reduce){.mcard,.biglibelle i{transition:none}}

/* sections */
.section{padding:4.2rem 0}
.section h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:.2rem 0 1rem;letter-spacing:.01em;text-wrap:balance}
.section .eyebrow{color:#8a7420}
.section-lead{color:var(--muted);max-width:62ch}
.alt{background:var(--chalk2)}

.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
@media(max-width:760px){.problem-grid{grid-template-columns:1fr}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;transition:transform .45s cubic-bezier(.3,.7,.2,1)}
/* problems lean; hovering one sets it straight — the product in one gesture */
.lean-1{transform:rotate(-1.3deg)}
.lean-2{transform:rotate(.9deg)}
.lean-3{transform:rotate(-.7deg)}
.pcard:hover{transform:rotate(0)}
@media (prefers-reduced-motion: reduce){.pcard{transition:none}}
.pcard h3{margin:.5rem 0 .5rem;font-size:1.05rem}
.pcard p{margin:0;font-size:.9rem;color:var(--muted)}
.pcard .tiltmark{display:inline-block;width:26px;height:10px;border-radius:99px;background:var(--chalk2);border:1px solid var(--line);position:relative;transform:rotate(-6deg)}
.pcard .tiltmark::before{content:"";position:absolute;top:1px;left:4px;width:9px;height:6px;border-radius:99px;background:var(--warn)}

.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.6rem}
@media(max-width:760px){.controls-grid{grid-template-columns:1fr}}
details.control{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.2rem .9rem}
details.control summary{cursor:pointer;display:flex;gap:.7rem;align-items:baseline;padding:.7rem 0;list-style:none}
details.control summary::-webkit-details-marker{display:none}
.idx{font-family:Bahnschrift,sans-serif;font-weight:700;color:#a8b03a;min-width:1.4rem}
.ctrl-name{font-weight:700}
.oneliner{color:var(--muted);font-size:.84rem}
details.control .body{font-size:.88rem;color:var(--muted);margin:.1rem 0 .9rem;padding-left:2.1rem}

.steps-level{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.88rem;margin:.2rem 0 0}
.minilibelle{display:inline-block;width:34px;height:12px;border-radius:99px;background:var(--graphite);position:relative;flex:0 0 auto}
.minilibelle::before{content:"";position:absolute;top:2px;left:calc(50% - 6px);width:12px;height:6px;border-radius:99px;background:var(--libelle)}
.minilibelle::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:0;border-left:1px dashed #5a6368;opacity:.7}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem}
.step-num{width:30px;height:30px;border-radius:99px;background:var(--graphite);color:var(--libelle);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:Bahnschrift,sans-serif}
.step h3{margin:.7rem 0 .45rem;font-size:1.02rem}
.step p{margin:0;font-size:.9rem;color:var(--muted)}

.callouts{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.callouts{grid-template-columns:1fr}}
.callout{border-radius:var(--radius);padding:1.5rem 1.5rem}
.callout h3{margin:.3rem 0 .6rem;font-size:1.15rem}
.callout p{font-size:.9rem;margin:0 0 .6rem}
.proof{background:var(--card);border:1px solid var(--line);color:var(--muted)}
.proof h3{color:var(--ink)}
.pilot{background:var(--graphite);color:#c9cec9}
.pilot .eyebrow{color:var(--libelle)}
.pilot h3{color:var(--chalk)}
.pilot .btn{margin-top:.4rem}

.site-footer{background:var(--graphite);color:#9aa39f;padding:2.2rem 0;margin-top:2rem}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.site-footer .wordmark{color:var(--chalk)}
.site-footer a{color:#c9cec9}
.suite{font-size:.78rem;letter-spacing:.05em}