:root {
      color-scheme: light;
      --forest: #173b2b;
      --forest-2: #275b40;
      --moss: #dce9d6;
      --cream: #f6f7ef;
      --text: #1d3428;
      --muted: #516659;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--cream);
      color: var(--text);
      font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    a { color: inherit; }
    .wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
    .site-header { background: #fffdf8; border-bottom: 1px solid #e3e9dc; }
    .header-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 20px; min-height: 84px;
    }
    .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; }
    .brand-icon {
      display: grid; place-items: center; width: 42px; height: 42px;
      border-radius: 13px; background: var(--forest); color: white;
    }
    .header-note { color: var(--muted); font-size: .9rem; }
    .hero {
      position: relative; isolation: isolate; overflow: hidden;
      background: radial-gradient(circle at 82% 18%, #4c855e 0, transparent 32%),
                  linear-gradient(130deg, #173b2b 0%, #285f44 100%);
      color: #fff; padding: clamp(76px, 11vw, 145px) 0;
    }
    .hero::before, .hero::after {
      content: ""; position: absolute; z-index: -1; border: 1px solid #b8dfaa40;
      border-radius: 50%; width: min(70vw, 700px); aspect-ratio: 1;
      right: -16%; top: -56%; transform: rotate(-20deg);
    }
    .hero::after { width: min(50vw, 500px); right: -4%; top: -10%; }
    .hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; align-items: center; }
    .eyebrow { display: inline-block; margin-bottom: 18px; color: #d9edcf; font-size: .85rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
    h1 { max-width: 800px; margin: 0 0 22px; font-size: clamp(2.65rem, 6.4vw, 5.5rem); line-height: 1.07; letter-spacing: -.055em; }
    .lead { max-width: 590px; margin: 0 0 30px; color: #e5f0e3; font-size: clamp(1.08rem, 2vw, 1.3rem); }
    .button { display: inline-block; background: #e8f1d8; color: #173b2b; border-radius: 12px; padding: 13px 19px; font-weight: 750; text-decoration: none; }
    .button:hover, .button:focus-visible { background: #fff; }
    .illustration { display: grid; place-items: center; }
    .illustration svg { display: block; width: min(100%, 370px); height: auto; filter: drop-shadow(0 22px 30px #092b1d55); }
    section.info { padding: 76px 0 88px; }
    .section-kicker { margin: 0 0 9px; color: var(--forest-2); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    h2 { margin: 0 0 14px; font-size: clamp(1.85rem, 3.4vw, 2.8rem); line-height: 1.2; letter-spacing: -.035em; }
    .intro { max-width: 780px; margin: 0 0 35px; color: var(--muted); font-size: 1.1rem; }
    .features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
    .feature { min-height: 230px; background: #fff; padding: 28px; border: 1px solid #e1e8d9; border-radius: 19px; box-shadow: 0 10px 35px #193b2710; }
    .feature-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 19px; border-radius: 14px; background: var(--moss); color: var(--forest); }
    .feature h3 { margin: 0 0 8px; font-size: 1.2rem; }
    .feature p { margin: 0; color: var(--muted); }
    .notice { margin-top: 30px; padding: 21px 24px; border-radius: 15px; background: #e6eee0; color: #2b4d34; }
    .notice strong { display: block; margin-bottom: 4px; }
    footer { padding: 26px 0 34px; background: #e9eee5; color: var(--muted); font-size: .9rem; }
    footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
    @media (max-width: 760px) {
      .hero-grid { grid-template-columns: 1fr; }
      .illustration { display: none; }
      .features { grid-template-columns: 1fr; }
      .header-note { font-size: .76rem; }
      .header-inner { min-height: 75px; }
      section.info { padding-block: 55px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


  .map-section{padding:68px 0;background:#e9f1e8}
  .map-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}
  .map-shell{position:relative;isolation:isolate}
  #map{height:465px;border-radius:17px;z-index:0;isolation:isolate;overflow:hidden;border:1px solid #bdd2bf}
  #map.map-selecting,#map.map-selecting .leaflet-grab{cursor:crosshair!important}
  .map-help{font-size:.92rem;font-weight:650;color:#275b40;min-height:1.6em;margin:11px 0 0}
  .map-card{background:#fff;padding:24px;border-radius:17px;border:1px solid #d8e5d6}
  .map-card p{color:#516659;margin:0 0 17px}
  .map-card label{font-weight:700;display:block;margin:12px 0 5px}
  .photo-picker{margin:15px 0;display:grid;gap:8px}.photo-picker .photo-actions{display:flex;flex-wrap:wrap;gap:8px}.photo-picker .photo-actions label{display:inline-block;border-radius:9px;background:#e8f1df;color:#173b2b;padding:10px 12px;font-weight:700;cursor:pointer}.photo-picker input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.photo-preview{max-width:100%;max-height:230px;object-fit:contain;border-radius:12px;border:1px solid #d5e2d1}.photo-picker small{color:#516659}.photo-picker .remove-photo{background:#f3e8e6;color:#622b27;padding:8px 12px}.map-card textarea{width:100%;border:1px solid #b7caba;border-radius:9px;padding:10px;font:inherit;resize:vertical}
  .map-card button{border:0;border-radius:10px;padding:12px 16px;background:#275b40;color:white;font-weight:700;cursor:pointer}
  .map-card button:disabled{opacity:.5;cursor:not-allowed}
  .map-card .outline{background:#e8f1df;color:#173b2b;margin-bottom:8px}
  .map-card .feedback{margin-top:12px;min-height:38px;font-size:.94rem}
  .map-card .coordinate{margin:10px 0;color:#275b40;font-size:.91rem}
  .map-card .consent{display:flex;gap:8px;align-items:start;margin:14px 0;font-size:.9rem}
  .map-card .consent label{font-weight:400;margin:0}
  .map-card .consent input{margin-top:6px}
  .map-note{color:#516659;font-size:.9rem;margin-top:11px}
  @media(max-width:780px){.map-grid{grid-template-columns:1fr}#map{height:360px}}


  html,body{height:100%;overflow:hidden}
  body{margin:0}
  .map-app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  .map-app-header{flex:0 0 64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:#173b2b;color:white}
  .map-app-header a{color:#f1f7e9;text-decoration:none;font-weight:700}
  .map-app-header a:hover{text-decoration:underline}
  .map-app-header .app-brand{display:flex;align-items:center;gap:10px}
  .map-app-header .app-brand svg{width:25px;height:25px}
  .map-app-header .app-title{font-size:1.1rem;font-weight:800}
  .map-app-header .app-label{font-size:.77rem;color:#d9ead9}
  .map-section{flex:1;min-height:0;padding:0!important;background:#e9f1e8}
  .map-section>.wrap{height:100%;width:100%;max-width:none;display:flex;flex-direction:column}
  .map-section .section-kicker,.map-section h2,.map-section .intro{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
  .map-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(335px,380px);gap:0;align-items:stretch}
  .map-grid>div:first-child{min-height:0;min-width:0;padding:12px 12px 8px;display:flex;flex-direction:column}
  .map-shell{min-height:0;flex:1;position:relative}
  #map{width:100%;height:100%;min-height:0;overscroll-behavior:contain;touch-action:pan-x pan-y}
  .map-help{margin:7px 0 0;min-height:0;font-size:.85rem}
  .map-note{margin:3px 0 0;font-size:.78rem}
  .map-grid>.map-card{min-width:0;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;border-radius:0;border-left:1px solid #d8e5d6;padding:20px 24px 50px}
  .map-card h3{margin:0 0 10px;font-size:1.3rem}
  .photo-picker{margin:12px 0}
  .photo-picker .photo-actions{gap:6px}
  .photo-picker .photo-actions label{padding:8px 10px}
  @media (max-width:760px){
    .map-app-header{flex-basis:56px;padding:0 12px}
    .map-app-header .app-label{display:none}
    .map-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,60%) minmax(0,40%)}
    .map-grid>div:first-child{padding:7px 8px 3px}
    .map-grid>.map-card{border-left:0;border-top:1px solid #d8e5d6;padding:16px 16px 70px}
    .map-help{font-size:.79rem}
    .map-note{display:none}
  }
  @media(max-height:520px) and (min-width:761px){.map-app-header{flex-basis:50px}}
  /* Kompakt skrásetingarskjal á desktop. */
  @media (min-width: 1100px) and (min-height: 680px){
    .map-grid{grid-template-columns:minmax(0,1fr) minmax(390px,440px)}
    .map-grid>.map-card{padding:12px 17px 12px;display:flex;flex-direction:column;gap:4px}
    .map-card h3{font-size:1.15rem;margin:0}
    .map-card p{font-size:.85rem;line-height:1.35;margin:0 0 5px}
    .map-card label{font-size:.86rem;margin:3px 0 2px}
    .map-card .outline{margin:0;padding:8px 10px}
    .map-card .coordinate{font-size:.82rem;margin:1px 0}
    .map-card .photo-picker{margin:1px 0;gap:3px}
    .map-card .photo-picker .photo-actions{gap:5px}
    .map-card .photo-picker .photo-actions label{font-size:.82rem;padding:6px 8px;margin:0}
    .map-card .photo-picker small{font-size:.72rem;line-height:1.2}
    .map-card textarea{rows:2;min-height:52px;padding:7px}
    .map-card .consent{margin:3px 0;gap:7px}
    .map-card .consent label{font-size:.75rem;line-height:1.25;margin:0}
    .map-card button[type="submit"]{padding:10px;margin-top:3px}
    .map-card .feedback{min-height:22px;margin:0;font-size:.8rem}
    .map-card .photo-preview:not([hidden]){max-height:100px}
  }
  .map-grid>.map-card [hidden]{display:none!important}
  .map-card select,.map-card input[type="text"]{width:100%;border:1px solid #b7caba;border-radius:9px;padding:10px;font:inherit;margin:4px 0 12px}
  .lifecycle-map-tools{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:8px 12px;flex-shrink:0}
  .lifecycle-map-tools label{font-weight:700;font-size:.9rem}
  .lifecycle-map-tools select{min-height:40px;border:1px solid #b7caba;border-radius:8px;background:#fffdf8;padding:6px;font:inherit}
  .lifecycle-legend{display:flex;flex-wrap:wrap;gap:5px 12px;list-style:none;margin:0;padding:0;font-size:.82rem}
  .lifecycle-legend li{display:flex;align-items:center;gap:5px}
  .lifecycle-marker{display:block;border:0;background:none}
  .lifecycle-marker img{display:block;width:100%;height:100%}
  .lifecycle-legend .lifecycle-marker{position:relative;width:22px;height:22px;flex:0 0 22px}
  .plant-guide-link{border-left:3px solid #26723a;padding:6px 10px;margin:8px 0 14px;background:#f1f5ec}
  .plant-guide-link a{color:#173b2b;font-weight:700;text-decoration:underline}
  .plant-guide-link small{display:block;font-size:.78rem;margin-top:3px}
  @media(max-height:480px){.lifecycle-map-tools{padding-block:3px;gap:5px}.lifecycle-map-tools label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.lifecycle-map-tools select{font-size:.82rem;min-height:34px}.lifecycle-legend{font-size:.75rem}}
