/* ═══════════════════════════════════════════════
   FinnFastlege – Municipality landing pages
   Shared design system
═══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0C4A3E;--teal-dark:#07332B;--teal-light:#E9F1EC;--teal-mid:#CBDFD6;
  --green:#1A7A38;--orange:#B85300;--red:#C0392B;
  --text:#1C2B26;--text-sub:#45534D;--text-muted:#6B7770;
  --border:#D8D3C8;--border-light:#EAE6DC;
  --bg:#FFFFFF;--bg-page:#FAF7F1;--bg-subtle:#F5F1E8;
  --radius:12px;--radius-lg:18px;--radius-pill:999px;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --shadow:0 2px 10px rgba(28,43,38,.08);
  --shadow-lg:0 8px 28px rgba(28,43,38,.12);
}
html{font-size:16px}
body{font-family:var(--font-body);background:var(--bg-page);color:var(--text);line-height:1.6}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.2px}

/* Skip */
.skip-link{position:absolute;top:-40px;left:0;background:var(--teal);color:#fff;padding:8px 16px;z-index:9999;font-size:14px;text-decoration:none}
.skip-link:focus{top:0}

/* Header */
.site-header{background:rgba(250,247,241,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:200}
.header-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;align-items:center;height:64px;gap:16px}
.logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-mark{width:38px;height:38px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:19px;height:19px}
.logo-text{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.2px}
.logo-sub{font-size:12px;color:var(--text-muted);display:block;line-height:1.2}
.header-nav{margin-left:auto;display:flex;gap:4px}
.header-nav a{text-decoration:none;color:var(--text-sub);font-size:.95rem;font-weight:500;padding:8px 16px;border-radius:var(--radius-pill);transition:all .15s}
.header-nav a:hover{color:var(--teal);background:var(--teal-light)}

/* Breadcrumb */
.breadcrumb-bar{background:var(--bg-subtle);border-bottom:1px solid var(--border-light);padding:10px 0;font-size:.82rem}
.breadcrumb-inner{max-width:1100px;margin:0 auto;padding:0 24px;display:flex;gap:8px;align-items:center;color:var(--text-muted)}
.breadcrumb-inner a{color:var(--text-sub);text-decoration:none}
.breadcrumb-inner a:hover{color:var(--teal)}

/* Hero */
.kom-hero{padding:52px 24px 48px;background:var(--bg-page)}
.kom-hero-inner{max-width:1100px;margin:0 auto}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
h1{font-size:2.8rem;color:var(--text);margin-bottom:16px;line-height:1.13;letter-spacing:-.5px}
.hero-desc{font-size:1.1rem;color:var(--text-sub);max-width:560px;margin-bottom:22px;line-height:1.7}
.trust-list{list-style:none;display:flex;gap:20px;flex-wrap:wrap}
.trust-list li{font-size:.88rem;font-weight:600;color:var(--text-sub);display:flex;align-items:center;gap:7px}
.trust-list li::before{content:'';width:16px;height:16px;flex-shrink:0;background:var(--teal);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") center/11px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") center/11px no-repeat}

/* Layout */
.content-wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.content-narrow{max-width:760px}

/* Buttons */
.btn-primary{display:inline-block;padding:0 22px;height:44px;line-height:44px;background:var(--teal);color:white;border-radius:var(--radius-pill);font-size:.92rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .15s}
.btn-primary:hover{background:var(--teal-dark)}
.btn-hero{display:inline-block;margin-top:28px;height:52px;line-height:52px;font-size:1rem;padding:0 32px}
.btn-lg{height:52px;line-height:52px;font-size:1rem;padding:0 28px}

/* How it works */
.how-section{padding:56px 0 52px;background:white;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.step-card{background:var(--bg-page);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px 24px;position:relative}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--teal);color:white;border-radius:50%;font-size:.9rem;font-weight:700;margin-bottom:16px}
.step-card strong{display:block;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px}
.step-card p{font-size:.9rem;color:var(--text-sub);line-height:1.65;margin:0}
.step-card a{color:var(--teal);font-weight:600;text-decoration:none}
.step-card a:hover{text-decoration:underline}
@media(max-width:768px){.steps-grid{grid-template-columns:1fr}}

/* Local info */
.local-info{padding:48px 0;background:white;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.local-card{background:var(--bg-page);border-radius:var(--radius-lg);padding:28px 26px}
.local-card h2{font-size:1.25rem;margin-bottom:12px}
.local-card p{font-size:.92rem;color:var(--text-sub);line-height:1.65;margin-bottom:10px}
.local-note{font-size:.82rem!important;color:var(--text-muted)!important;border-top:1px solid var(--border-light);padding-top:10px;margin-top:10px}
.local-card-alt{background:var(--teal-light)}
.alt-list{display:flex;flex-direction:column;gap:14px}
.alt-row{display:flex;gap:12px;align-items:flex-start}
.alt-icon{font-size:1.3rem;flex-shrink:0;width:28px;text-align:center;margin-top:2px}
.alt-row strong{font-size:.92rem;font-weight:700;color:var(--text);display:block;margin-bottom:2px}
.alt-row p{font-size:.85rem;color:var(--text-sub);margin:0}

/* FAQ */
.faq-section{padding:52px 0}
.section-heading{font-size:1.6rem;margin-bottom:24px}
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{background:white;border:1px solid var(--border-light);border-radius:var(--radius)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:.97rem;font-weight:600;color:var(--text);text-align:left}
.faq-q:hover{color:var(--teal)}
.faq-arrow{width:18px;height:18px;color:var(--text-muted);flex-shrink:0;transition:transform .2s}
.faq-q[aria-expanded=true] .faq-arrow{transform:rotate(180deg)}
.faq-a{padding:0 20px 18px;font-size:.92rem;color:var(--text-sub);line-height:1.65}

/* CTA bottom */
.cta-bottom{padding:60px 24px;text-align:center;background:var(--teal-light);border-top:1px solid var(--teal-mid)}
.cta-bottom h2{font-size:1.8rem;margin-bottom:12px}
.cta-bottom p{font-size:1rem;color:var(--text-sub);margin-bottom:24px}

/* Footer */
footer{background:var(--teal-dark);color:rgba(255,255,255,.75);padding:32px 24px;font-size:.85rem;text-align:center;margin-top:0}
footer a{color:rgba(255,255,255,.9)}
footer strong{color:white}
.footer-inner{max-width:1100px;margin:0 auto}

/* Responsive */
@media(max-width:768px){
  h1{font-size:2rem;letter-spacing:-.3px}
  .local-grid{grid-template-columns:1fr}
  .gp-table th.th-clinic,.gp-table td.td-clinic{display:none}
  .header-nav{display:none}
  .alert-cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  h1{font-size:1.7rem}
  .kom-hero{padding:36px 16px 32px}
  .content-wrap{padding:0 16px}
}