/* OKI Shop · fælles design for dansk forside og informationssider. */
/* Farver og grundindstillinger kan ændres i :root øverst. */

:root {
  --ink:#203a33;
  --text:#35463f;
  --green:#285c48;
  --paper:#faf9f5;
  --line:#dce3da;
  --soft:#eaf0e5;
  --muted:#5b6b62}
  * {
    box-sizing:border-box}
    html {
      scroll-behavior:smooth;
      scroll-padding-top:30px}
      body {
        margin:0;
        background:var(--paper);
        color:var(--text);
        font:17px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}
        a {
          color:var(--green);
          text-underline-offset:4px}
          a:hover {
            color:#133e2b}
            a:focus-visible,summary:focus-visible {
              outline:3px solid #c27835;
              outline-offset:5px}
              .wrap {
                width:min(1150px,calc(100% - 44px));
                margin:auto}
                header {
                  display:flex;
                  align-items:center;
                  justify-content:space-between;
                  gap:25px;
                  padding:26px 0;
                  border-bottom:1px solid var(--line)}
                  .brand {
                    font-size:27px;
                    font-weight:800;
                    letter-spacing:-1px;
                    text-decoration:none;
                    color:var(--ink)}
                    nav {
                      display:flex;
                      flex-wrap:wrap;
                      gap:22px;
                      font-size:14px}
                      nav a {
                        text-decoration:none}
                        .langs {
                          white-space:nowrap}
                          .langs a[aria-current] {
                            font-weight:800;
                            text-decoration:underline}
                            h1,h2,h3 {
                              color:var(--ink);
                              line-height:1.15;
                              letter-spacing:-.035em}
                              h1 {
                                font-size:clamp(40px,5.1vw,65px);
                                margin:15px 0 25px}
                                h2 {
                                  font-size:clamp(29px,3.4vw,41px);
                                  margin:10px 0 20px}
                                  h3 {
                                    font-size:23px;
                                    margin:0 0 15px}
                                    p {
                                      margin:0 0 19px}
                                      .eyebrow {
                                        font-size:12px;
                                        text-transform:uppercase;
                                        letter-spacing:.15em;
                                        font-weight:750;
                                        color:var(--green)}
                                        .hero {
                                          display:grid;
                                          grid-template-columns:1.2fr .8fr;
                                          gap:65px;
                                          align-items:center;
                                          padding:75px 0 65px}
                                          .lead {
                                            font-size:20px;
                                            line-height:1.6}
                                            .actions {
                                              display:flex;
                                              gap:12px;
                                              flex-wrap:wrap;
                                              margin:25px 0 18px}
                                              .btn {
                                                display:inline-flex;
                                                align-items:center;
                                                justify-content:center;
                                                padding:13px 21px;
                                                border-radius:8px;
                                                background:var(--green);
                                                color:white;
                                                text-decoration:none;
                                                font-weight:650;
                                                font-size:15px;
                                                border:1px solid var(--green)}
                                                .btn:hover {
                                                  background:#1b4333;
                                                  color:white}
                                                  .btn.alt {
                                                    background:transparent;
                                                    color:var(--green)}
                                                    .btn.alt:hover {
                                                      background:var(--soft)}
                                                      .small {
                                                        font-size:14px;
                                                        color:var(--muted)}
                                                        .hero-art {
                                                          position:relative;
                                                          padding:27px;
                                                          background:var(--soft);
                                                          border-radius:24px;
                                                          transform:rotate(1deg)}
                                                          .hero-art img {
                                                            width:100%;
                                                            display:block;
                                                            border-radius:10px;
                                                            box-shadow:0 15px 35px #203a3314}
                                                            .hero-label {
                                                              background:#fff;
                                                              border:1px solid var(--line);
                                                              padding:15px 19px;
                                                              border-radius:12px;
                                                              margin:20px 0 0;
                                                              transform:rotate(-1deg);
                                                              font-size:15px}
                                                              .hero-label strong {
                                                                display:block;
                                                                font-size:21px;
                                                                color:var(--ink)}
                                                                .band {
                                                                  display:flex;
                                                                  justify-content:space-between;
                                                                  gap:20px;
                                                                  flex-wrap:wrap;
                                                                  padding:21px 0;
                                                                  border-top:1px solid var(--line);
                                                                  border-bottom:1px solid var(--line);
                                                                  font-size:14px}
                                                                  .section {
                                                                    padding:76px 0;
                                                                    border-bottom:1px solid var(--line)}
                                                                    .intro {
                                                                      max-width:710px}
                                                                      .two {
                                                                        display:grid;
                                                                        grid-template-columns:1fr 1fr;
                                                                        gap:25px;
                                                                        margin-top:30px}
                                                                        .card {
                                                                          background:white;
                                                                          border:1px solid var(--line);
                                                                          border-radius:16px;
                                                                          padding:32px}
                                                                          .card.soft {
                                                                            background:var(--soft)}
                                                                            .tag {
                                                                              display:inline-block;
                                                                              font-size:12px;
                                                                              text-transform:uppercase;
                                                                              letter-spacing:.1em;
                                                                              color:var(--green);
                                                                              margin-bottom:19px}
                                                                              .demo {
                                                                                display:grid;
                                                                                grid-template-columns:1.45fr .75fr;
                                                                                gap:30px;
                                                                                align-items:start;
                                                                                margin-top:35px}
                                                                                figure {
                                                                                  margin:0}
                                                                                  figure a {
                                                                                    display:block}
                                                                                    figure img {
                                                                                      width:100%;
                                                                                      height:auto;
                                                                                      display:block;
                                                                                      border:1px solid var(--line);
                                                                                      border-radius:12px;
                                                                                      box-shadow:0 12px 28px #203a330a}
                                                                                      .admin-img {
                                                                                        max-height:510px;
                                                                                        object-fit:contain;
                                                                                        background:#f4f3ee}
                                                                                        figcaption {
                                                                                          font-size:14px;
                                                                                          margin-top:15px}
                                                                                          figcaption strong {
                                                                                            display:block;
                                                                                            color:var(--ink);
                                                                                            font-size:17px}
                                                                                            .steps,.features {
                                                                                              display:grid;
                                                                                              grid-template-columns:repeat(3,1fr);
                                                                                              gap:28px;
                                                                                              margin-top:33px}
                                                                                              .step {
                                                                                                padding-top:22px;
                                                                                                border-top:2px solid #c4d6c6}
                                                                                                .num {
                                                                                                  font-size:14px;
                                                                                                  color:var(--green);
                                                                                                  font-weight:bold;
                                                                                                  margin-bottom:15px}
                                                                                                  .step h3 {
                                                                                                    font-size:21px}
                                                                                                    .step p,.feature p {
                                                                                                      font-size:15px}
                                                                                                      .feature {
                                                                                                        padding:22px 0;
                                                                                                        border-top:1px solid var(--line)}
                                                                                                        .feature h3 {
                                                                                                          font-size:19px}
                                                                                                          .pricing {
                                                                                                            background:var(--soft);
                                                                                                            border-radius:20px;
                                                                                                            padding:40px;
                                                                                                            margin-top:30px}
                                                                                                            .prices {
                                                                                                              display:grid;
                                                                                                              grid-template-columns:1fr 1fr;
                                                                                                              gap:26px}
                                                                                                              .price {
                                                                                                                padding:25px;
                                                                                                                background:white;
                                                                                                                border-radius:12px;
                                                                                                                border:1px solid var(--line)}
                                                                                                                .amount {
                                                                                                                  font-size:48px;
                                                                                                                  line-height:1.2;
                                                                                                                  letter-spacing:-.05em;
                                                                                                                  font-weight:750;
                                                                                                                  color:var(--ink)}
                                                                                                                  .amount span {
                                                                                                                    font-size:19px;
                                                                                                                    font-weight:400;
                                                                                                                    letter-spacing:0}
                                                                                                                    .price p {
                                                                                                                      margin:12px 0 0}
                                                                                                                      .included {
                                                                                                                        display:grid;
                                                                                                                        grid-template-columns:1fr 1fr;
                                                                                                                        gap:10px 25px;
                                                                                                                        padding-left:20px;
                                                                                                                        margin:28px 0}
                                                                                                                        .payment-note {
                                                                                                                          padding:18px 22px;
                                                                                                                          border-left:3px solid var(--green);
                                                                                                                          background:#f7faf4;
                                                                                                                          margin-top:28px}
                                                                                                                          .payment-note p {
                                                                                                                            margin:0}
                                                                                                                            .faq {
                                                                                                                              max-width:850px;
                                                                                                                              margin-top:30px}
                                                                                                                              details {
                                                                                                                                border-top:1px solid var(--line);
                                                                                                                                padding:20px 0}
                                                                                                                                details:last-child {
                                                                                                                                  border-bottom:1px solid var(--line)}
                                                                                                                                  summary {
                                                                                                                                    font-weight:650;
                                                                                                                                    color:var(--ink);
                                                                                                                                    cursor:pointer}
                                                                                                                                    details p {
                                                                                                                                      margin:14px 0 0}
                                                                                                                                      .final {
                                                                                                                                        padding:55px;
                                                                                                                                        background:var(--ink);
                                                                                                                                        color:#eff4ed;
                                                                                                                                        border-radius:22px;
                                                                                                                                        margin:65px 0}
                                                                                                                                        .final h2 {
                                                                                                                                          color:white}
                                                                                                                                          .final .eyebrow {
                                                                                                                                            color:#bad2b9}
                                                                                                                                            .final .btn {
                                                                                                                                              background:#e6efde;
                                                                                                                                              border-color:#e6efde;
                                                                                                                                              color:var(--ink)}
                                                                                                                                              .final .btn.alt {
                                                                                                                                                color:white;
                                                                                                                                                background:transparent}
                                                                                                                                                .guides {
                                                                                                                                                  display:flex;
                                                                                                                                                  gap:15px 28px;
                                                                                                                                                  flex-wrap:wrap;
                                                                                                                                                  font-size:14px}
                                                                                                                                                  footer {
                                                                                                                                                    padding:15px 0 38px;
                                                                                                                                                    font-size:13px}
                                                                                                                                                    footer nav {
                                                                                                                                                      font-size:13px;
                                                                                                                                                      gap:15px}
                                                                                                                                                      footer p {
                                                                                                                                                        margin:17px 0}
                                                                                                                                                        @media(max-width:800px) {
                                                                                                                                                          header {
                                                                                                                                                            align-items:flex-start}
                                                                                                                                                            nav {
                                                                                                                                                              gap:11px 15px;
                                                                                                                                                              justify-content:flex-end}
                                                                                                                                                              .hero {
                                                                                                                                                                grid-template-columns:1fr;
                                                                                                                                                                gap:30px;
                                                                                                                                                                padding:45px 0}
                                                                                                                                                                .hero-art {
                                                                                                                                                                  max-width:480px;
                                                                                                                                                                  margin:auto;
                                                                                                                                                                  transform:none}
                                                                                                                                                                  .steps,.features {
                                                                                                                                                                    grid-template-columns:1fr}
                                                                                                                                                                    .two {
                                                                                                                                                                      grid-template-columns:1fr}
                                                                                                                                                                      .demo {
                                                                                                                                                                        grid-template-columns:1fr}
                                                                                                                                                                        .demo figure:nth-child(2) {
                                                                                                                                                                          max-width:390px}
                                                                                                                                                                          .prices {
                                                                                                                                                                            grid-template-columns:1fr}
                                                                                                                                                                            .section {
                                                                                                                                                                              padding:48px 0}
                                                                                                                                                                              .pricing {
                                                                                                                                                                                padding:24px}
                                                                                                                                                                                .included {
                                                                                                                                                                                  grid-template-columns:1fr}
                                                                                                                                                                                  .final {
                                                                                                                                                                                    padding:30px}
                                                                                                                                                                                    .band {
                                                                                                                                                                                      gap:8px 20px}
                                                                                                                                                                                      .wrap {
                                                                                                                                                                                        width:calc(100% - 32px)}
                                                                                                                                                                                      }
                                                                                                                                                                                      @media(prefers-reduced-motion:reduce) {
                                                                                                                                                                                        html {
                                                                                                                                                                                          scroll-behavior:auto}
                                                                                                                                                                                        }

/* Informationssider i footeren */
.info-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 58px 0;
}
.info-page h1 {
  font-size: clamp(34px, 4.5vw, 49px);
}
.info-page h2 {
  font-size: 25px;
  margin-top: 36px;
}
.info-page h3 {
  font-size: 21px;
  margin-top: 26px;
}
.info-page address {
  font-style: normal;
  line-height: 1.9;
}
.info-page ul, .info-page ol {
  padding-left: 24px;
}
.muted {
  color: var(--muted);
}
