/* Offentlige funksjonssider (public/side/*.html) – egen, lett stil uten JavaScript */
:root { --g0: #0d2417; --g1: #12301f; --g2: #1f6f43; --g3: #2fbf6a; --g4: #7be3a4; --amber: #e9a820; --bg: #f4f6f4; --text: #17201a; --muted: #5d6b62; --border: #dde3de; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif; }
a { color: var(--g2); }
.s-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }
.s-nav { background: var(--g1); color: #fff; position: sticky; top: 0; z-index: 5; }
.s-nav-in { display: flex; align-items: center; gap: 1rem; min-height: 60px; flex-wrap: wrap; }
.s-brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: .01em; }
.s-brand b { color: var(--g4); font-weight: 800; }
.s-nav nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; flex: 1; }
.s-nav nav a { color: #d6e6dc; text-decoration: none; font-size: .92rem; }
.s-nav nav a:hover, .s-nav nav a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.s-btn { display: inline-block; padding: .55rem 1.05rem; border-radius: 10px; border: 1px solid var(--border); background: #fff; color: var(--g1); font-weight: 700; text-decoration: none; font-size: .95rem; }
.s-nav .s-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.s-btn.primary { background: var(--g3); border-color: var(--g3); color: var(--g0); }
.s-btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.s-hero { background: linear-gradient(160deg, var(--g1), #163b27 60%, #1d5235); color: #fff; padding: 3rem 0 3.2rem; }
.s-crumb { margin: 0 0 .6rem; font-size: .88rem; color: #b9d3c3; }
.s-crumb a { color: var(--g4); }
.s-hero h1 { margin: 0 0 .7rem; font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.15; }
.s-lead { max-width: 46rem; font-size: 1.15rem; color: #dbe9e0; margin: 0 0 1.4rem; }
.s-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.s-body { padding: 2rem 1.25rem 3rem; }
.s-body section { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.s-body h2 { margin: 0 0 .5rem; font-size: 1.3rem; color: var(--g1); }
.s-body p { margin: 0; }
.s-body ul { margin: 0; padding-left: 1.2rem; }
.s-body li { margin: .25rem 0; }
.s-img { margin: 0 0 1.2rem; }
.s-img img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); display: block; }
.s-faq details { border-top: 1px solid var(--border); padding: .6rem 0; }
.s-faq summary { cursor: pointer; font-weight: 700; }
.s-faq details p { margin-top: .4rem; color: var(--muted); }
.s-final { text-align: center; background: var(--g1) !important; color: #fff; border: 0 !important; }
.s-final h2 { color: #fff !important; }
.s-final p { color: #dbe9e0; margin-bottom: .9rem !important; }
.s-final .s-cta { justify-content: center; }
.s-foot { border-top: 1px solid var(--border); padding: 1.5rem 0 2rem; font-size: .9rem; color: var(--muted); }
.s-foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; }
.s-foot a { color: var(--g2); font-weight: 600; }
@media (max-width: 640px) { body { font-size: 16px; } .s-nav nav { order: 3; flex-basis: 100%; padding-bottom: .6rem; } .s-body section { padding: 1.1rem; } }