/* ===== Sequence by HubMatic – markedsføringsside (sequence.hubmatic.dk) =====

   Samme fundament som docmate.hubmatic.dk: samme farver, samme skrifttype, samme
   knapper og sektioner. De to programmer hører til samme familie og skal se sådan ud.
   Det der er nyt her, er visningen af selve sekvensdiagrammet — den tegnes med SVG i
   programmets egne farver, så mockuppen ligner det man rent faktisk henter.
*/
:root {
    /* Sequences egne farver. Logoet består af præcis to: den beige bundfarve
       #F0ECE7 og det næsten sorte mærke #1E1C1C. Resten er afledt af dem, så
       hele siden bærer programmets eget udtryk frem for Docmates blå.

       Variabelnavnene er beholdt fra Docmate, så de to stilark stadig kan
       sammenlignes linje for linje — kun værdierne er skiftet. */
    --navy: #1E1C1C;          /* logoets sorte */
    --navy-dark: #000000;
    --navy-light: #8C8378;    /* dæmpet, til de små overskrifter */
    --ink: #1E1C1C;
    --muted: #6B6560;
    --line: #E7E2DA;
    --bg: #FFFFFF;
    --bg-alt: #F7F5F2;
    --bg-soft: #F0ECE7;       /* logoets beige */
    --green: #2E9E5B;
    --orange: #C4683A;
    --red: #C0392B;
    --radius: 16px;
    --shadow: 0 20px 60px -20px rgba(30, 28, 28, 0.22);
    --shadow-sm: 0 4px 18px rgba(30, 28, 28, 0.07);

    /* Knappernes farve står for sig selv, så den kan skiftes ét sted.
       Beige knapper: --btn: #F0ECE7 og --btn-text: #1E1C1C */
    --btn: #1E1C1C;
    --btn-text: #FFFFFF;

    /* Programmets egne farver — kun inde i mockuppen */
    --wire: #2B3A67;
    --step-fill: #DDE3F5;
    --step-stroke: #2B3A67;
    --canvas-grid: #E6EAF2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: 24px; }
.container-narrow { max-width: 780px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; }

/* ===== Knapper ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 11px;
    /* En <button> arver ikke skrifttypen — browseren bruger sin egen til
       formularelementer. Det så man ikke, da alle knapper var <a>; det kom frem,
       da «Min side» og «Køb» blev rigtige knapper. */
    font-family: inherit;
    font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
    border: 1.5px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); box-shadow: 0 10px 26px -8px rgba(30,28,28,.45); }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--bg-soft); color: var(--navy); }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { box-shadow: 0 10px 26px -8px rgba(0,0,0,.35); }
.btn-outline-light { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.12); }
.btn-lg { padding: 14px 26px; font-size: 16px; }

/* ===== Tilbage til HubMatic ===== */
.hubbar { background: var(--ink); color: #C9D3E6; font-size: 13.5px; }
.hubbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.hubbar a { display: inline-flex; align-items: center; gap: 7px; transition: color .15s; }
.hubbar a:hover { color: #fff; }
.hubbar-back { font-weight: 600; color: #fff; }
.hubbar-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.hubbar-back:hover svg { transform: translateX(-3px); }
@media (max-width: 600px) { .hubbar-more { display: none; } }

/* ===== Topbjælke ===== */
/*
    Bjælken er fast og følger med, når man ruller.

    Den slørede baggrund er pillet ud med vilje. En fast bjælke med backdrop-filter
    tvinger browseren til at regne indholdet bagved om, for hver eneste pixel der
    rulles — og det var dét, der gjorde siden træg. Baggrunden er næsten helt hvid i
    forvejen, så forskellen er til at overse.
*/
.nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
/* Ordmærket er bredt. Det holdes lavere end Docmates, så menuen har plads
   til sine fem punkter uden at de brækker over flere linjer. */
.logo-img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 15px; white-space: nowrap; transition: color .15s; }
.nav-links a:hover { color: var(--navy); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* «Køb» og «Min side» beholder knappens fede skrift. Det var ikke vægten der var
   gal — det var skrifttypen, og den rettes i .btn ovenfor. */

/* ===== Hero ===== */
.hero {
    background:
        radial-gradient(900px 480px at 85% 0%, #F0ECE7 0%, transparent 65%),
        linear-gradient(#fff, var(--bg-alt));
    padding-block: 72px 88px;
    overflow: hidden;
}
/* Teksten til venstre, skærmbillederne til højre — de får den store halvdel. */
.hero-inner { display: grid; grid-template-columns: 1fr 1.45fr; gap: 48px; align-items: center; }
.badge {
    display: inline-block; background: var(--bg-soft); color: var(--navy);
    font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -1.2px; }
.hero h1 .hl { color: var(--navy); }
.lead { font-size: 18.5px; color: var(--muted); margin: 22px 0 30px; max-width: 540px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.platform {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px 6px 10px;
}
.platform svg { width: 17px; height: 17px; color: var(--navy); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Programvinduet ===== */
/* Billedet har sin egen vindueskant med titellinje, så rammen her skal kun runde
   hjørnerne af og løfte det fra siden. En ekstra kant ville give dobbelt vindue. */
.hero-visual { position: relative; }
.appshot {
    width: 100%; height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow);
}
/* ===== Nøglepunkter ===== */
.trust { border-block: 1px solid var(--line); background: #fff; }
.trust-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 28px; }
.trust-item { display: flex; align-items: center; gap: 13px; }
.trust-item strong { display: block; font-size: 15px; }
.trust-item span { color: var(--muted); font-size: 13.5px; }
.trust-ic, .feature-icon, .industry-icon {
    display: grid; place-items: center; flex: none;
    background: var(--bg-soft); color: var(--navy);
}
.trust-ic { width: 42px; height: 42px; border-radius: 11px; }
.trust-ic svg, .feature-icon svg, .industry-icon svg, .cm-note svg {
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.trust-ic svg { width: 21px; height: 21px; }

/* ===== Sektioner ===== */
.section { padding-block: 96px; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.eyebrow { display: inline-block; color: var(--navy-light); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.section-head h2, .spot-text h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.6px; margin: 10px 0 14px; }
.section-head p { color: var(--muted); font-size: 18px; }

/* Funktioner */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: #D3DDEC; }
.feature-icon { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; }
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 15px; }

/* Fokus-sektioner */
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.spot-reverse .spot-text { order: 2; }
.spot-text p { color: var(--muted); font-size: 17px; max-width: 500px; }
.checks { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; font-weight: 500; }
.checks li::before {
    content: ""; position: absolute; left: 0; top: 3px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E1C1C' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.spot-visual { display: flex; justify-content: center; }
.card-mock {
    width: 100%; max-width: 460px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 22px; box-shadow: var(--shadow);
}
.cm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.cm-head b { display: block; font-size: 16px; }
.cm-head span { font-size: 13px; color: var(--muted); }
.cm-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .07em; text-transform: uppercase; margin: 4px 0 12px; }
.cm-note {
    display: flex; align-items: center; gap: 9px; margin-top: 18px;
    background: var(--bg-soft); color: var(--navy); border-radius: 10px;
    font-size: 13px; font-weight: 600; padding: 10px 12px;
}
.cm-note svg { width: 17px; height: 17px; flex: none; }
.tag { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 99px; white-space: nowrap; }
.tag.green { background: #DCF3E4; color: #1F7A43; }
.tag.orange { background: #FCE6D9; color: #B84A1C; }

/* Simuleringskortet */
.sim-row {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px; margin-bottom: 7px;
}
.sim-row > div { flex: 1; min-width: 0; }
.sim-row b { display: block; font-size: 14px; }
.sim-row span { font-size: 12px; color: var(--muted); }
.lamp { width: 11px; height: 11px; border-radius: 50%; background: #C9D3E6; flex: none; }
.sim-row.on { background: #F0F9F3; border-color: #BDE3CB; }
.sim-row.on .lamp { background: var(--green); }
.bar { height: 5px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: var(--navy); }

/* Kodekortet */
.code {
    background: #211F1E; border-radius: 14px; padding: 18px 20px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 12.5px; line-height: 1.75; color: #C7D2E6; overflow-x: auto;
}
.code .k { color: #7FB0FF; font-weight: 600; }
.code .c { color: #6C7E9C; font-style: italic; }
.code .n { color: #9CE0B4; }
.code-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.code-head i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--navy); background: var(--bg-soft); border-radius: 99px; padding: 3px 10px; letter-spacing: 0; }

/* Trin */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps.two { grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* Kortene med hvem der bruger programmet: ikon i stedet for tal, og en liste under. */
.steps.two .step-num { color: #fff; }
.steps.two .step-num svg { width: 23px; height: 23px; }
.steps.two .checks { margin-top: 18px; }
.steps.two .checks li { font-size: 15px; font-weight: 400; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.step-num {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 18px;
    background: var(--navy); color: #fff; font-weight: 800; font-size: 19px;
    display: grid; place-items: center;
}
.step h3 { font-size: 19px; margin-bottom: 6px; }
.step p { color: var(--muted); }

/* ===== Download ===== */
.download-card {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: 22px;
    padding: 44px; box-shadow: var(--shadow-sm);
}
.dl-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.5px; }
.dl-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 26px; color: var(--muted); font-size: 14.5px; }
.dl-meta span { display: inline-flex; align-items: center; gap: 7px; }
.dl-meta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.req-list { list-style: none; display: grid; gap: 12px; }
.req-list li { display: flex; gap: 12px; font-size: 14.5px; }
.req-list b { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.req-list i { font-style: normal; color: var(--navy); flex: none; }
.req-list svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notice {
    display: flex; gap: 12px; align-items: flex-start;
    background: #FFF8E8; border: 1px solid #F3DFAE; border-radius: 12px;
    padding: 14px 16px; margin-top: 28px; font-size: 14.5px; color: #6B5311;
}
.notice svg { width: 19px; height: 19px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notice b { display: block; margin-bottom: 2px; color: #4E3D0C; }

/* ===== Priser ===== */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px 28px;
}
.price-card.featured { border: 2px solid var(--navy); box-shadow: var(--shadow); }
.price-tag {
    position: absolute; top: -13px; left: 28px;
    background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
    padding: 5px 13px; border-radius: 999px;
}
.price-card h3 { font-size: 21px; }
.price-desc { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 2px; }
.price .amount { font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -1.5px; line-height: 1; }
.price .per { color: var(--muted); font-weight: 600; }
.price-note { color: var(--muted); font-size: 13.5px; min-height: 22px; margin-bottom: 20px; }
.btn-block { width: 100%; }
.price-card ul { list-style: none; margin-top: 24px; display: grid; gap: 10px; }
.price-card li { position: relative; padding-left: 28px; font-size: 15px; }
.price-card li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%;
    background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E1C1C' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.price-foot { text-align: center; color: var(--muted); font-size: 14px; margin-top: 26px; }

/* ===== FAQ ===== */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 2px 20px; transition: border-color .15s; }
.faq details[open] { border-color: #C9D5EA; }
.faq summary {
    cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--navy); font-size: 22px; font-weight: 600; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); padding: 0 0 18px; }
.faq details p a { color: var(--navy); font-weight: 600; }

/* ===== Kontakt ===== */
.cta { background: var(--navy); color: #fff; padding-block: 84px; position: relative; overflow: hidden; }
.cta::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(700px 300px at 80% 0%, rgba(255,255,255,.14), transparent 70%);
    pointer-events: none;
}
.cta-inner { position: relative; text-align: center; max-width: 680px; margin: 0 auto; }
.cta h2 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.5px; }
.cta p { font-size: 18px; opacity: .85; margin: 12px 0 30px; }
.cta .hero-cta { justify-content: center; }

/* ===== Footer ===== */
.footer { background: #fff; border-top: 1px solid var(--line); padding-block: 56px 0; }
/* Fem spalter: mærket, og fire med links — produkt, kontakt, vilkår og firma. */
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 28px; }
.footer-brand .logo-img { height: 40px; margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: 14.5px; max-width: 260px; }
.hub-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--navy); }
.hub-link:hover { text-decoration: underline; }
.footer-col h4 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a, .footer-col address { display: block; color: var(--muted); font-size: 14.5px; font-style: normal; padding: 3px 0; line-height: 1.7; }
.footer-col a:hover { color: var(--navy); }
.footer-bottom {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px;
    border-top: 1px solid var(--line); margin-top: 44px; padding-block: 22px; font-size: 13.5px; color: var(--muted);
}
.footer-bottom a:hover { color: var(--navy); }

/* ===== Responsiv ===== */
@media (max-width: 1040px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
    .hero-inner, .spot, .download-card { grid-template-columns: 1fr; gap: 44px; }
    .spot-reverse .spot-text { order: 0; }
    .steps, .steps.two { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 30px; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
}
@media (max-width: 600px) {
    .container { padding-inline: 18px; }
    .nav-inner { min-height: 72px; }
    .logo-img { height: 32px; }
    .nav-actions { gap: 4px; }
    .nav-actions .btn { padding: 9px 12px; font-size: 14px; }
    .feature-grid, .trust-inner, .footer-inner { grid-template-columns: 1fr; }
    .section { padding-block: 64px; }
    .hero { padding-block: 44px 56px; }
    .mock-body { grid-template-columns: 1fr; }
    .mock-side { display: none; }
    .download-card { padding: 24px; }
    .card-mock { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ===== Licenskortene =====
   Mærket er et billede, ikke tekst, så kortet bygges op omkring det: billedet øverst
   i fuld bredde, og ingen overskrift under — navnet står allerede på mærket. */
/* ===== De to grupper af licenser =====
   Tre personlige og to til et sted. Fem lige store kort i én række bliver for
   smalle, og uden overskrifter ville de to nederste bare se ud som om de var
   blevet til overs. */
/* Alle fem på én række, så de kan sammenlignes uden at rulle. Kortene bliver
   smalle, og derfor ligger alt det lange bag «Se hvad du får». */
.license-grid.license-grid-fem {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

/* Smallere kort tåler ikke samme luft og skriftstørrelse. */
.license-grid-fem .license-card { padding: 16px 14px 16px; }
.license-grid-fem .license-badge { width: 100%; max-width: none; }
.license-grid-fem .license-for { font-size: 0.82rem; min-height: 3.4em; margin-bottom: 8px; }
.license-grid-fem .price .amount { font-size: 30px; letter-spacing: -1px; }
.license-grid-fem .price .per { font-size: 0.8rem; }
.license-grid-fem .price-note { font-size: 12px; margin-bottom: 14px; min-height: 0; }
.license-grid-fem .btn { padding-inline: 10px; font-size: 14px; }
.license-grid-fem .license-mere > summary { font-size: 0.82rem; }
.license-grid-fem .license-card li { font-size: 0.85rem; padding-left: 22px; }
.license-grid-fem .license-fod { font-size: 0.8rem; }

/* Under fuld bredde kan fem ikke stå pænt. Så bryder de i stedet. */
@media (max-width: 1180px) {
    .license-grid.license-grid-fem {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* Kortene er lige høje, så rækken står af på samme linje. Indholdet er forskelligt
   langt, og det er fodnoten, der tager forskellen: den skubbes helt ned i bunden
   af kortet og står dermed ud for de andres. */
.license-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Kortene holdes lave, så alle fem kan ses uden at rulle. Det, der fylder — hvad
   licensen kan, og reglerne for nøglen — ligger bag «Se hvad du får». */
.license-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow-sm);
}

.license-card.featured {
    border-color: var(--navy);
    box-shadow: var(--shadow);
}

/* Mærket er kortets ansigt, men det er også det, der fylder mest. Det skaleres
   ned, så alle fem kort kan ses uden at rulle — selve billedet er urørt. */
.license-badge {
    display: block;
    width: 74%;
    max-width: 240px;
    height: auto;
    margin: 0 0 10px;
}

.license-for {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 0.9rem;
    min-height: 2.6em;      /* så priserne står på linje, uanset tekstlængden */
}

.license-card .price {
    margin: 0 0 12px;
}

/* ===== «Se hvad du får» =====
   Punktlisten og reglerne er det, der gør et kort højt. De ligger derfor foldet
   ind, så fem kort kan ses på én gang — og den, der vil sammenligne, folder ud.
   Kortene i et gitter er uafhængige, så to kan være åbne ad gangen. */
.license-mere {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.license-mere > summary {
    cursor: pointer;
    list-style: none;
    color: var(--green-ink, #0a7a3f);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Browserens egen trekant væk — vi tegner vores egen, så den kan vendes. */
.license-mere > summary::-webkit-details-marker { display: none; }

.license-mere > summary::after {
    content: "";
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s;
}

.license-mere[open] > summary::after {
    transform: rotate(-135deg) translateY(-1px);
}

.license-mere > summary:hover { text-decoration: underline; }

.license-card ul {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.license-card li {
    position: relative;
    padding: 0 0 0 26px;
    margin: 0 0 10px;
    font-size: 0.95rem;
}

.license-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
}

/* Det en licens ikke kan, skal kunne ses lige så hurtigt som det den kan. */
.license-card li.license-no {
    color: var(--muted);
}

.license-card li.license-no::before {
    content: "–";
    color: var(--navy-light);
}

/* Hvor tit nøglen må skiftes.
   Det er den eneste forskel mellem School og de andre, og dermed hele grunden til,
   at en skole skal vælge School. Derfor står det på hvert kort — ikke kun i FAQ'en. */
.license-fod {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.license-fod b {
    color: var(--ink);
    font-weight: 700;
}

.license-fod-fri b { color: var(--green); }

@media (max-width: 640px) {
    .license-card { padding: 18px 18px 22px; }
}

/* Den side man står på.
   En knap der fører hen hvor man allerede er, skal kunne ses som netop dét — ellers
   leder man efter et menupunkt der ikke findes. Den er markeret, ikke slået fra:
   et klik gør bare ingenting, og det er bedre end en knap der ser i stykker ud. */
.btn.is-current {
    background: var(--bg-soft);
    color: var(--navy);
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: default;
}

.btn.is-current:hover {
    background: var(--bg-soft);
    color: var(--navy);
}

/* Knap med et ikon foran teksten. Ikonet er en streg, ikke en flade — så følger det
   tekstens farve af sig selv, også når knappen er markeret eller holdes over. */
.btn-icon { display: inline-flex; align-items: center; gap: 7px; }

.btn-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* «hidden» er en attribut, ikke en klasse, og browserens egen regel for den er
   display:none med den laveste vægt der findes. Enhver display-regel herunder slår
   den ud af kraft — og så stod købsboksen åben og tom, så snart siden blev indlæst. */
[hidden] { display: none !important; }

/* ===== Købsboksen =====
   Åbnes fra forsiden og fra købssiden. Indholdet skrives af kob.js. */
.kob-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 24px;
    overflow-y: auto;
    background: rgba(30, 28, 28, 0.55);

    /* Sløringen skal regne baggrunden om, hver gang noget bag den ændrer sig. Laget
       siges fra over for resten af siden, så der ikke tegnes mere end nødvendigt. */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    contain: paint;
    will-change: transform;
}

/* Siden bagved må ikke kunne rulles, mens boksen er åben. */
body.kob-aaben { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .kob-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(30, 28, 28, .66); }
}

.kob-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--bg);
    border-radius: var(--radius);
    padding: 30px 30px 26px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
}

.kob-card h2 { margin: 0 0 18px; font-size: 1.5rem; }

.kob-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.kob-close:hover { background: var(--bg-soft); color: var(--navy); }

.kob-lead { margin: 0 0 20px; color: var(--muted); font-size: 0.95rem; }

/* ---- Trin 1: vælg licens ---- */
.kob-valg {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 16px;
    width: 100%;
    text-align: left;
    padding: 16px 18px;
    margin: 0 0 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
}

.kob-valg:hover { border-color: var(--navy); background: var(--bg-alt); }
/* Både kolonne og række skal siges. Med kun rækken placerer browseren selv
   elementerne i den første ledige celle, og så havnede prisen til venstre for navnet. */
.kob-valg-navn { grid-column: 1; grid-row: 1; font-weight: 700; }
.kob-valg-hvad { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 0.9rem; }
.kob-valg-pris { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 700; white-space: nowrap; text-align: right; }
.kob-valg-pris small { font-weight: 500; color: var(--muted); }

/* ---- Trin 2: konto ---- */
.kob-form .field { display: block; margin: 0 0 14px; }
.kob-form .field > span { display: block; font-size: 0.9rem; font-weight: 600; margin: 0 0 6px; }

.kob-form input[type="text"],
.kob-form input[type="email"],
.kob-form input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg);
    color: var(--ink);
}

.kob-form input:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(30, 28, 28, 0.08);
}

.kob-typer { display: flex; flex-wrap: wrap; gap: 14px; }
.kob-typer label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; cursor: pointer; }

.kob-skift { text-align: center; margin: 16px 0 0; }

/* En knap der skal se ud som et link. Stod før kun i app.css, og derfor fik den
   browserens eget knapudseende på forsiden — med ramme og det hele. */
.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.92rem;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.linkish:hover { color: var(--navy); }

/* ---- Trinene øverst i boksen ---- */
.kob-trin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    font-size: 0.82rem;
    color: var(--muted);
}

.kob-trin span,
.kob-trin button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
}

/* Et færdigt trin kan klikkes — det er vejen tilbage, hvis man har skrevet forkert. */
.kob-trin button { cursor: pointer; }
.kob-trin button:hover { color: var(--navy); }
.kob-trin button:hover b { background: var(--navy); }

.kob-trin b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    flex: none;
}

.kob-trin .nu { color: var(--navy); font-weight: 700; }
.kob-trin .nu b { background: var(--navy); color: #fff; }
.kob-trin .klar b { background: var(--green); color: #fff; }

.kob-trin i {
    flex: 1;
    height: 1px;
    background: var(--line);
    font-style: normal;
}

/* ---- Opsummeringen før betaling ---- */
.kob-linje {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
}

.kob-linje:last-of-type { border-bottom: 0; }
.kob-linje span:first-child { color: var(--muted); }

/* ---- Trin 3: antal og sum ---- */
.kob-antal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
}

.kob-tal { display: flex; align-items: center; gap: 0; }

.kob-tal button {
    width: 38px;
    height: 38px;
    font-size: 18px;
    background: var(--bg);
    border: 1px solid var(--line);
    cursor: pointer;
    color: var(--ink);
}

.kob-tal button:first-child { border-radius: 10px 0 0 10px; }
.kob-tal button:last-child { border-radius: 0 10px 10px 0; }
.kob-tal button:hover { background: var(--bg-soft); }

.kob-tal input {
    width: 64px;
    height: 38px;
    text-align: center;
    font: inherit;
    border: 1px solid var(--line);
    border-inline: 0;
    background: var(--bg);
    color: var(--ink);
    -moz-appearance: textfield;
}

.kob-tal input::-webkit-outer-spin-button,
.kob-tal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.kob-sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
}

.kob-sum strong { font-size: 1.4rem; }
.kob-moms { margin: 4px 0 18px; color: var(--muted); font-size: 0.86rem; }
.kob-midt { text-align: center; margin: 10px 0 0; }

/* Hvem man er logget ind som. Står lige over knappen, så man når at opdage en
   forkert konto, inden der bliver betalt. */
.kob-konto {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-alt);
    color: var(--muted);
    font-size: 0.88rem;
}

/* ===== Boksen skal ligne portalens =====
   Det er MyHUBMATIC-kontoen, man logger ind på — og så skal boksen se ud som den,
   man møder på hubmatic.dk. Farverne og målene herunder er HubMatics, ikke
   Sequences, og de gælder kun inde i boksen. Resten af siden er uberørt. */
.kob-overlay { background: rgba(15, 26, 21, .5); }

.kob-card {
    --hm-green:  #00BF63;
    --hm-tekst:  #0F1A15;
    --hm-muted:  #5B6A63;
    --hm-kant:   #E1E8E4;
    --hm-soft:   #E4F7EC;

    max-width: 520px;
    background: #FFFFFF;
    border: 1px solid var(--hm-kant);
    border-radius: 20px;
    padding: 30px 30px 26px;
    box-shadow: 0 30px 80px -24px rgba(15, 26, 21, .45);
}
.kob-card h2 { font-size: 24px; line-height: 1.2; color: var(--hm-tekst); }
.kob-card .kob-lead { color: var(--hm-muted); font-size: 15px; }

/* Små versaler over felterne, som i portalen */
.kob-card .kob-form .field > span,
.kob-card .kob-felt label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--hm-muted);
}
.kob-card .kob-form input,
.kob-card .kob-felt input {
    border: 1px solid var(--hm-kant); border-radius: 11px;
    font-size: 15px; padding: 12px 14px; color: var(--hm-tekst);
}
.kob-card .kob-form input:focus,
.kob-card .kob-felt input:focus {
    border-color: var(--hm-green);
    box-shadow: 0 0 0 3px var(--hm-soft);
}

/* Den grønne knap. Den gælder kun i boksen – Sequences egne knapper bliver mørke. */
.kob-card .btn-primary {
    background: var(--hm-green);
    border-color: var(--hm-green);
    color: #03140A;
    font-weight: 700;
    box-shadow: 0 6px 20px -6px rgba(0, 191, 99, .55);
}
.kob-card .btn-primary:hover { background: #00AD5A; border-color: #00AD5A; }
.kob-card .btn-outline { background: #fff; border-color: #CFD9D4; color: var(--hm-tekst); }
.kob-card .btn-outline:hover { border-color: var(--hm-green); color: var(--hm-green); }

/* Knappen har luft over sig som i portalen — feltet over den har 14 px under sig,
   og de 18 px her giver den samme afstand de to steder. */
.kob-card .btn-block { width: 100%; margin-top: 18px; }

.kob-card .linkish { color: var(--hm-green); font-weight: 600; text-decoration: none; }
.kob-card .linkish:hover { text-decoration: underline; }
.kob-card .kob-valg { border-color: var(--hm-kant); border-radius: 13px; }
.kob-card .kob-valg:hover { border-color: var(--hm-green); background: #F7FAF8; }
.kob-card .kob-sum, .kob-card .kob-linje { border-color: var(--hm-kant); }
.kob-card .kob-konto { background: #F7FAF8; color: var(--hm-muted); }
.kob-card .kob-close:hover { background: #F7FAF8; color: var(--hm-tekst); }

/* MyHUBMATIC-mærket i login-boksen. Det er den samme konto som i portalen, og
   boksen skal se ud som den, man møder på hubmatic.dk. */
.myhub-word { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.kob-titel { display: block; margin-top: 6px; }

/* Øjet ved adgangskoden */
.kob-pw { position: relative; display: block; }
.kob-pw input { width: 100%; padding-right: 46px; }
.kob-oeje {
    position: absolute; top: 0; right: 0; height: 100%; width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
}
.kob-oeje svg { width: 20px; height: 20px; }
.kob-oeje:hover { color: var(--text); }
/* Den grønne er HubMatics, ikke Sequences – mærket skal se ud som i portalen. */
.myhub-word span { color: #00BF63; }

/* Felterne i fakturabestillingen */
.kob-felt { margin: 0 0 12px; }
.kob-felt label {
    display: block;
    margin: 0 0 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
}
.kob-felt input {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.95rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.kob-felt input:focus { outline: none; border-color: var(--green, #00BF63); }
.kob-to { display: flex; gap: 12px; }
/* Oprettelsens felter hedder .field og skal dele pladsen på samme måde. */
.kob-to > .field { flex: 1; min-width: 0; }

/* ===== Sidepanelet med oplysninger om virksomheden eller skolen =====

   Felterne hører til oprettelsen, men de gør boksen dobbelt så høj, og så skal man
   rulle for at nå knappen. I stedet skyder de ud til højre for boksen, hvor der er
   plads i forvejen.

   Panelet er altid tegnet — det kan ikke glide ind, hvis det først bliver til, når
   man vælger. Derfor «visibility» og ikke «display».

   Reglerne står også i hubmatic.dk's style.css. Købsboksen findes begge steder, og
   på Sequences forside er det her stilark, der tegner den. */
.kob-org {
    position: absolute;
    left: calc(100% + 18px);
    top: 0;
    width: 310px;
    max-height: 100%;
    overflow-y: auto;

    background: var(--bg);
    border: 1px solid var(--hm-kant, #E1E8E4);
    border-radius: var(--radius);
    padding: 22px;
    box-shadow: 0 24px 60px -22px rgba(15, 26, 21, .4);
    text-align: left;

    opacity: 0;
    visibility: hidden;
    transform: translateX(-14px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.kob-org.vis {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.kob-org-top {
    margin: 0 0 16px;
    font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--hm-muted, #5B6A63);
}

/* Svaret fra CVR-opslaget. Grønt når firmaet blev fundet, dæmpet rødt når det ikke
   blev — men aldrig en spærring, så det skal ikke se ud som en fejl. */
.kob-cvr-svar { font-size: 13px; margin: -6px 0 12px; min-height: 18px; color: var(--hm-muted, #5B6A63); }
.kob-cvr-ja   { color: var(--hm-green, #00BF63); }
.kob-cvr-nej  { color: #B4533F; }

/*
    Ikke plads ved siden af.

    Under den her bredde ville panelet enten ligge uden for skærmen eller oven i
    boksen. Så falder det tilbage til at stå under de øvrige felter.
*/
@media (max-width: 1080px) {
    .kob-org {
        position: static;
        width: auto;
        max-height: none;
        margin: 0 0 16px;
        box-shadow: none;
        transform: none;
        transition: none;
    }
    .kob-org:not(.vis) { display: none; }
}
.kob-to .kob-felt { flex: 1; min-width: 0; }

.kob-fejl {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FBECEA;
    color: var(--red);
    font-size: 0.92rem;
}

@media (max-width: 520px) {
    .kob-card { padding: 24px 20px 20px; }
    .kob-overlay { padding-top: 3vh; }
}

/* ===== Menuen under «Min side» ===== */
.minside-menu { position: relative; }

.minside-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 210px;
    padding: 6px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 44px -14px rgba(30, 28, 28, .3);
}

.minside-drop a,
.minside-drop button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    cursor: pointer;
}

.minside-drop a:hover,
.minside-drop button:hover { background: var(--bg-soft); }

/* Hvem man er logget ind som. Ikke et punkt man kan trykke på. */
.minside-hvem {
    margin: 0;
    padding: 8px 12px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.minside-drop [data-logud] { color: var(--red); }

/* ===== Virker sammen med ===== */
.logos { padding-block: 44px 48px; background: var(--bg); border-bottom: 1px solid var(--line); }

.logos-head {
    margin: 0 0 26px;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
    letter-spacing: .02em;
}

.logos-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px 56px;
}

.logo-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
}

/* Logoerne kommer fra hver sit sted og har hver sin farve. Gråtoner holder striben
   rolig og lader dem stå som en gruppe; farven kommer frem, når musen er over. */
.logo-tile img {
    max-height: 44px;
    max-width: 180px;
    width: auto;
    filter: grayscale(1);
    opacity: .62;
    transition: filter .2s, opacity .2s;
}

.logo-tile:hover img { filter: none; opacity: 1; }

/* Reservevisningen, når en logofil mangler. */
.logo-tile b {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy-light);
}

.logos-note {
    max-width: 68ch;
    margin: 26px auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

@media (max-width: 640px) {
    .logos-row { gap: 22px 32px; }
    .logo-tile, .logo-tile img { height: 34px; max-height: 34px; }
}

/* Erklæringen ved studielicensen. Den skal kunne læses, ikke bare krydses af. */
.kob-erklaering {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
}
.kob-erklaering input { margin-top: 3px; flex: none; width: 16px; height: 16px; cursor: pointer; }