/* Aylo Portal - samme cyan/navy brand-palet som Aylo.Display, se dets Colors.xaml. */

:root {
    --bg: #07091A;
    --bg-panel: #0D1525;
    --border: #1E2E50;
    --text: #E8EDF5;
    --text-muted: #8A9AB8;
    --accent: #00C2E0;
    --error: #D45F5F;

    /* Messing - PRODUKTETS EGEN ACCENT. Aylo.Display bruger #C8A96E (se dets Colors.xaml,
       Dark_Accent) overalt: pauseskærmens bådnavn, instrumentkortenes fremhævninger, lys-knapper.
       Sitet kørte udelukkende på cyan, så app og hjemmeside lignede to forskellige produkter.
       De to farver har nu hver sin opgave, og det er dét der giver siden dybde:
         cyan   = det FUNKTIONELLE - knapper, links, dataikoner, "live"
         messing = det REDAKTIONELLE - sektionsmærker, hårfine streger, det rolige og dyre
       Blandes de vilkårligt, forsvinder pointen - så hold rollerne. */
    --accent-warm: #C8A96E;

    /* Kortflade, en anelse lysere end panel-baggrunden. Uden den forskel kunne kort kun ses på
       deres kant, og hele siden blev til flader med streger imellem. */
    --surface: #111B31;

    /* Hårfin lysstribe langs kortenes overkant - det der får en mørk flade til at ligne et
       fysisk objekt med lys ovenfra i stedet for et hul i baggrunden. */
    --surface-hi: rgba(255, 255, 255, 0.055);

    /* ── Typografisk skala ──────────────────────────────────────────────────────
       Otte trin, og ikke ét mere. Forsiden havde tidligere femten forskellige størrelser
       (42, 34, 28, 26, 22, 19, 17, 16, 15, 14, 13, 12, 11 …) sat enkeltvis dér hvor de
       skulle bruges. Det er dét, der får en side til at se "næsten rigtig" ud uden at man
       kan pege på hvorfor: to overskrifter der er 2px fra hinanden læses ikke som to
       niveauer, bare som en fejl.

       De to største er flydende (clamp), så de skalerer med vinduet i stedet for at skulle
       overskrives i en media query - der er derfor heller ingen h1-undtagelse for mobil
       længere nede.

       De fire brødtekst-trin har været op og ned nogle gange, før de landede her. Undervejs
       blev de delt i to sæt - et større til PC og et mindre til tablet - fordi teksten så
       for lille ud på en skærm og for stor på en iPad. Det blev rullet tilbage igen: forskellen
       viste sig at være en browserindstilling på den ene maskine og ikke noget ved designet.
       Ét sæt værdier, der gælder alle vegne, er nemmere at holde rigtigt end to.

       Alt er sat HER og ikke i de enkelte sektioner, netop for at de følges ad. Skal der
       skrues igen, så skru her - og husk at overskrifterne har deres egne clamp-værdier
       ovenfor, som IKKE følger med, fordi de skalerer med vinduet i forvejen. */

    --fs-display: clamp(34px, 4.4vw, 50px);
    --fs-h2: clamp(25px, 2.9vw, 33px);
    --fs-h3: 18px;
    --fs-lede: 17px;
    --fs-body: 15px;
    --fs-sm: 15px;
    --fs-xs: 13px;
    --fs-label: 11px;

    --lh-display: 1.08;
    --lh-heading: 1.22;
    --lh-body: 1.65;

    /* Læselængde. Brødtekst bliver træls at læse over ca. 70 tegn - øjet mister linjen på
       vej tilbage til venstremargen. */
    --measure: 62ch;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Overskrifterne kører nu på Inter, ikke Space Grotesk.

   Space Grotesk er en geometrisk grotesk med meget runde bogstavformer og en bred aftegning. I
   store størrelser blev overskrifterne derfor både tunge og bløde - de fyldte mere end de sagde.
   Inter har smallere former og skarpere hjørner og står tydeligere ved samme størrelse.

   Space Grotesk indlæses stadig: logoet (se _HorizontalLogo.cshtml) er tegnet i den, og det er
   dér, den hører hjemme - som brandmærke, ikke som brødoverskrift. */
h1,
h2,
h3,
.section-title {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    /* 600 frem for 700: en halv vægt lettere gør de store overskrifter tyndere uden at de
       mister at være overskrifter. */
    font-weight: 600;
}

/* Forsidens sektionstitler.
   Den globale h2-regel længere nede (versaler, dæmpet farve, 16px) er skrevet til overskrifter
   INDE i portalen, hvor de fungerer som små etiketter over en tabel. På forsiden arvede de
   samme stil, og resultatet var udvaskede gråblå versaler der lignede deaktiveret tekst frem
   for overskrifter - og lange danske titler blev nærmest ulæselige i store bogstaver.
   Her er de i stedet nær-hvide, store og i almindelig sætningsform. */
.section-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    /* Strammere tracking end før (-0,022 mod -0,015). Inter har smallere bogstavformer, og de
       store overskrifter står skarpere når ordene holdes tættere sammen. */
    letter-spacing: -0.022em;
    text-transform: none;
    color: var(--text);
    font-weight: 600;
    text-align: center;
    margin: 0 0 40px;
    /* Fordeler ordene jævnt over linjerne, så en overskrift ikke ender med ét enligt ord på
       sidste linje. Browsere der ikke kender den, ignorerer den lydløst. */
    text-wrap: balance;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── App-shell (sidebar + indhold) - se _Layout.cshtml ─────────────────────
   Erstatter en tidligere vandret topbar. Layoutet stammer fra et Figma-udkast
   kunden fik lavet (se Dashboard.cshtml's dokumentation for detaljer/afvigelser). */

.app-body {
    margin: 0;
}

.brand-logo {
    display: block;
    height: 40px;
    width: auto;
}

.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-top {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-logo {
    display: block;
}

.sidebar-logo .brand-logo {
    height: 34px;
}

.sidebar-boat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
}

.sidebar-boat-card:hover {
    border-color: var(--accent);
    text-decoration: none;
}

.sidebar-boat-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.sidebar-boat-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sidebar-boat-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-boat-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.sidebar-boat-arrow {
    color: var(--text-muted);
    font-size: 13px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 0 10px 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 14px;
}

.sidebar-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sidebar-nav a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
    text-decoration: none;
}

.sidebar-nav a.active {
    color: var(--accent);
    background: rgba(0, 194, 224, 0.10);
}

.sidebar-bottom {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 194, 224, 0.15);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-user-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-form button {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}

.sidebar-logout-form button:hover {
    border-color: var(--error);
    color: var(--error);
}

.app-main {
    flex: 1;
    min-width: 0;
}

.help-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    z-index: 20;
}

.help-fab:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* ── Indhold ────────────────────────────────────────────────────────────── */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px 64px;
}

h1 {
    margin: 0 0 8px;
    font-size: 26px;
}

h2 {
    margin: 32px 0 12px;
    font-size: 16px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mt {
    margin-top: 24px;
}

.muted {
    color: var(--text-muted);
}

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Stat-grid (nøgletal) ───────────────────────────────────────────────── */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.stat {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat .label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat .value {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

/* ── Bådens "hero" (navn + status) ──────────────────────────────────────── */

.boat-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 8px;
}

.boat-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.boat-hero-text h1 {
    margin: 0;
}

.boat-updated {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-muted);
}

.boat-updated-none {
    color: var(--error);
}

/* ── Gauges (fart/motor) ────────────────────────────────────────────────── */

.gauge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 8px;
}

.gauge-with-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gauge-caption {
    font-size: 12px;
    color: var(--text-muted);
}

.gauge {
    position: relative;
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gauge-svg {
    width: 100%;
    height: auto;
}

.gauge-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
    stroke-linecap: round;
}

.gauge-fill {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: d 0.3s;
}

.gauge-tick {
    stroke: var(--border);
    stroke-width: 1.5;
}

.gauge-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 18px;
}

.gauge-value {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 34px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1;
}

.gauge-unit {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.gauge-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: -6px;
}

/* ── Tank-gauges ────────────────────────────────────────────────────────── */

.tank-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tank-body {
    position: relative;
    width: 56px;
    height: 120px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.tank-fill {
    width: 100%;
    transition: height 0.3s;
}

.tank-percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.tank-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Panel (indramning af gauges/tanke/slider - se Index.cshtml) ──────────── */

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.panel h2 {
    margin-top: 0;
}

/* ── Dashboard-header ───────────────────────────────────────────────────── */

.content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.content-header h1 {
    margin: 0 0 4px;
}

.content-header-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ACB6E;
    display: inline-block;
}

.content-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.live-badge {
    background: rgba(58, 203, 110, 0.12);
    color: #3ACB6E;
    border: 1px solid rgba(58, 203, 110, 0.35);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ── Nøgletal-kort ──────────────────────────────────────────────────────── */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.metric-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}

.metric-card-head {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.metric-card-value {
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.metric-unit {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: 4px;
    font-weight: 400;
}

.metric-card-caption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Dashboard-rækker ───────────────────────────────────────────────────── */

.dash-row-2 {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 16px;
}

.dash-row-3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.panel-head h2 {
    margin: 0;
}

.badge-running,
.badge-idle {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 5px;
}

.badge-running {
    background: rgba(58, 203, 110, 0.12);
    color: #3ACB6E;
    border: 1px solid rgba(58, 203, 110, 0.35);
}

.badge-idle {
    background: rgba(138, 154, 184, 0.10);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* ── Kompas ─────────────────────────────────────────────────────────────── */

.compass {
    display: flex;
    justify-content: center;
    margin: 8px 0 16px;
}

.compass-svg {
    width: 168px;
    height: 168px;
}

.position-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.position-stat-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.position-stat-row {
    display: flex;
    gap: 24px;
}

.position-stat-row > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Batteri-liste ──────────────────────────────────────────────────────── */

.battery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.battery-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

.battery-row .label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.battery-row .value {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.battery-soc {
    font-size: 14px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Tidsrejse (fuld bredde nederst) ────────────────────────────────────── */

.panel-slider {
    margin-top: 16px;
}

/* ── Afspilningskontroller (TripDetail - genspil af en historisk tur) ─────── */

.playback-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-btn:hover {
    background: rgba(0, 194, 224, 0.12);
}

.speed-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.speed-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.speed-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.speed-btn.active {
    background: rgba(0, 194, 224, 0.12);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* ── Profil-formular ────────────────────────────────────────────────────── */

.profile-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 520px;
}

.profile-form label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 16px;
}

.profile-form input,
.profile-form textarea,
.profile-form select {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 13px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}

.profile-form textarea {
    resize: vertical;
}

.profile-form input:focus,
.profile-form textarea:focus,
.profile-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.profile-form input:disabled {
    color: var(--text-muted);
    opacity: 0.7;
}

.profile-form-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.profile-form-checkline label {
    margin-top: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 13px;
}

/* ── Alarm-opsætning (Pages/Alarms.cshtml) ─────────────────────────────────── */

.status-banner {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.status-banner.status-pending {
    border-color: #E8A040;
    color: #E8A040;
}

.status-banner.status-applied {
    border-color: #3ACB6E;
    color: #3ACB6E;
}

.status-banner.status-rejected {
    border-color: #E85050;
    color: #E85050;
}

.status-banner.status-neutral {
    color: var(--text-muted);
}

.alarm-rule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: none;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.alarm-rule-row:last-child {
    border-bottom: none;
}

.alarm-rule-row select,
.alarm-rule-row input[type="number"] {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    width: auto;
}

.alarm-rule-row label {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-form-row {
    display: flex;
    gap: 12px;
}

.profile-form-row > div {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-form button {
    margin-top: 20px;
    background: var(--accent);
    border: none;
    color: #0D1525;
    font-weight: 600;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: fit-content;
    padding-left: 24px;
    padding-right: 24px;
}

.profile-form button:hover {
    filter: brightness(1.08);
}

/* ── Tidsslider ─────────────────────────────────────────────────────────── */

.date-form input[type="date"] {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 10px;
    border-radius: 6px;
}

.history-time {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

.panel input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.slider-range {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Ture ───────────────────────────────────────────────────────────────── */

.trip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.trip-row {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trip-row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text);
    text-decoration: none;
    flex: 1;
    min-width: 220px;
}

.trip-row-main:hover {
    text-decoration: none;
}

.trip-row-main:hover .trip-row-name {
    color: var(--accent);
}

.trip-row-name {
    font-size: 15px;
    font-weight: 600;
}

.trip-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 2px 6px;
    vertical-align: middle;
}

.trip-row-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}

.trip-row-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.trip-rename-form {
    display: flex;
    gap: 8px;
}

.trip-rename-form input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13px;
    width: 160px;
}

.trip-rename-form button,
.trip-delete-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.trip-rename-form button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.trip-delete-btn:hover {
    border-color: var(--error);
    color: var(--error);
}

#tripMap {
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}

#dashMap {
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    margin: 16px 0 4px;
}

/* ── Login ──────────────────────────────────────────────────────────────── */

.login-body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 32px;
    width: 100%;
    max-width: 460px;
}

.login-card .brand-logo {
    height: 84px;
    margin: 0 auto 4px;
}

.login-subtitle {
    color: var(--text-muted);
    text-align: center;
    margin: 4px 0 24px;
    font-size: 13px;
}

.login-error {
    background: rgba(212, 95, 95, 0.15);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

.login-card form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-card label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.login-card input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
}

.login-card button {
    margin-top: 20px;
    background: var(--accent);
    border: none;
    color: #0D1525;
    font-weight: 600;
    padding: 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.login-card button:hover {
    filter: brightness(1.08);
}

.login-footer-link {
    text-align: center;
    font-size: 13px;
    margin: 12px 0 0;
}

.login-footer-link a {
    color: var(--text-muted);
}

.login-footer-link a:hover {
    color: var(--accent);
}

/* ── Offentligt site (forside/support) - se _PublicLayout.cshtml ──────────── */

.public-body {
    margin: 0;
}

.btn-solid,
.btn-ghost {
    display: inline-block;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

.btn-solid {
    background: var(--accent);
    color: #0D1525;
    border: 1px solid var(--accent);
}

.btn-solid:hover {
    filter: brightness(1.08);
    text-decoration: none;
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.btn-lg {
    padding: 14px 26px;
    font-size: 15px;
}

/* ── Rulning til sektionerne ────────────────────────────────────────────────────

   Genvejene i menuen ruller blødt i stedet for at hoppe. Det er browserens egen rulning
   og ikke et script: den følger med, hvis brugeren griber ind undervejs, og den koster
   ingenting.

   scroll-margin-top er ikke pynt. Bjælken er fastlåst hen over indholdet, så uden den
   ville browseren stille sektionens top præcis dér, hvor bjælken dækker - og man ville
   lande på en overskrift, man ikke kan se. 96 px er den lave bjælkes højde plus lidt luft. */
html {
    scroll-behavior: smooth;
}

#marina,
#logbook,
#analysis,
#smart,
#ais {
    scroll-margin-top: 96px;
}

/* Har brugeren bedt styresystemet om mindre bevægelse, hopper vi i stedet. En side, der
   ruller af sig selv, er præcis dét, den indstilling findes for at slippe for. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── Header ─────────────────────────────────────────────────────────────── */


.public-header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Ligger transparent HEN OVER hero-billedet i stedet for at støde op til det - se
   Index.cshtml (ViewData["TransparentHeader"]) og _PublicLayout.cshtml.

   fixed og ikke absolute: absolute ruller bjælken væk sammen med heroen, og så er menuen
   borte resten af siden. fixed tager den også ud af flowet, så heroen stadig starter helt
   oppe i toppen bag den - det er dét, absolute blev brugt til. */
.public-header--overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: transparent;
    border-bottom: none;
    transition: background-color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

/* Rullet forbi toppen: bjælken får bund og bliver lavere. Uden bundfarven ville menuen stå
   oven på hvad som helst, der kom rullende op nedefra - og de lyse sektioner ville gøre den
   hvide tekst ulæselig. Sløringen er en pyntedetalje; falder den bort i en gammel browser,
   er baggrunden alligevel 94 % dækkende. */
.public-header--overlay.is-stuck {
    background: rgba(9, 15, 30, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30);
}

.public-header--overlay .public-header-inner,
.public-header--overlay .brand-logo {
    transition: padding 260ms ease, height 260ms ease;
}

/* 68 px logo plus 28 px luft er 96 px bjælke. Det er fint hen over heroen, hvor der ikke er
   andet, men for meget at slæbe rundt på resten af siden - derfor den lavere udgave. */
.public-header--overlay.is-stuck .public-header-inner {
    padding-top: 6px;
    padding-bottom: 6px;
}

.public-header--overlay.is-stuck .brand-logo {
    height: 44px;
}

/* --border er for mørk/lav-kontrast til at ses hen over foto-baggrunden - lidt lysere/synlig
   kant her, kun i overlay-tilstand. */
.public-header--overlay .btn-ghost {
    border-color: rgba(232, 237, 245, 0.35);
}

.public-header--overlay .btn-ghost:hover {
    border-color: var(--accent);
}

/* Bredden følger sektionerne nedenfor (1180) og ikke sin egen værdi. Logoet er 440x90, så ved
   68 px højde fylder det 332 px - og med seks menupunkter plus to knapper var der 11 px for
   lidt i en bjælke på 1100. Det var derfor menuen kun brød øverst på siden: rullede man,
   skrumpede logoet til 44 px, og så var der pludselig plads. */
.public-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.public-brand {
    display: flex;
    align-items: center;
}

.public-brand .brand-logo {
    height: 68px;
    width: auto;
}

/* Menuen bærer nu syv links og ikke to. flex-wrap er sikkerhedsnettet: bliver vinduet for
   smalt, brydes de til en linje mere i stedet for at skubbe knapperne ud over kanten. */
.public-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    flex: 1;
}

/* Under 1200 px rækker bredden ikke længere til det store logo. Det skrumper her i stedet for
   at lade menuen bryde - en menu på to linjer gør bjælken 40 px højere og flytter alt indhold
   ned, hver gang vinduet er en anelse for smalt. Ved 44 px, samme højde som den rullede
   tilstand, holder de seks punkter på én linje ned til omkring 1000 px. Derunder bryder de,
   og det er med vilje: alternativet er at gøre teksten så lille, at menuen ikke kan læses. */
@media (max-width: 1200px) {
    .public-brand .brand-logo {
        height: 44px;
    }
}

.public-nav a {
    color: var(--text-muted);
    font-size: 15px;
}

.public-nav a:hover {
    color: var(--accent);
    text-decoration: none;
}

.public-header-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Burger ─────────────────────────────────────────────────────────────────────
   Grænsen på 1060 px er målt og ikke rund for syns skyld: med seks menupunkter (470 px),
   logoet og de to knapper er der 63 px luft ved 1060 og kun 3 px ved 1000. Under 1060 er
   der altså ikke plads til én linje, og to linjer gør bjælken 40 px højere hver gang
   vinduet er en anelse for smalt. Så hellere en burger. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(232, 237, 245, 0.22);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.nav-toggle:hover {
    border-color: var(--accent);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--text);
    transition: transform 200ms ease, opacity 200ms ease;
}

/* Åben: de tre streger bliver til et kryds. Stregerne står 7 px fra midten (2 px høje med
   5 px imellem), så de skal flyttes ind FØR de drejes - ellers mødes de ikke. */
.public-header.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.public-header.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.public-header.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1060px) {
    .public-header-inner {
        flex-wrap: wrap;
        gap: 14px 16px;
    }

    /* Skubber burgeren helt ud til højre. flex-grow og ikke margin-left:auto, for margin
       ville også gælde over 1060, hvor knappen er skjult og logoet skal stå normalt. */
    .public-brand {
        flex: 1;
    }

    .nav-toggle {
        display: flex;
    }

    /* Panelet er ikke et element for sig: de to brydes ned under logoet af den flex-wrap,
       der lige er sat. Bjælken er position:fixed, så den vokser ned OVER indholdet i stedet
       for at skubbe siden.

       flex: 0 0 100% og IKKE width: 100%. Navigationen har flex: 1 i sin grundregel, og det
       er kort for flex: 1 1 0% - en flex-basis på nul, der slår enhver width ihjel. Med
       width alene blev menuen stående ved siden af logoet i stedet for under det. */
    .public-nav,
    .public-header-cta {
        display: none;
        flex: 0 0 100%;
    }

    .public-header.is-open .public-nav {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: 6px;
        border-top: 1px solid var(--border);
    }

    .public-header.is-open .public-nav a {
        padding: 11px 2px;
        font-size: 16px;
    }

    .public-header.is-open .public-header-cta {
        display: flex;
        padding-bottom: 6px;
    }

    /* Uden bund ville en åben menu stå oven på hero-videoen med hvid tekst i vandet. */
    .public-header--overlay.is-open {
        background: rgba(9, 15, 30, 0.97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--border);
    }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
    background: radial-gradient(ellipse at top right, rgba(0, 194, 224, 0.10), transparent 60%), var(--bg);
    padding: 64px 24px;
}

/* Rent fuldt-bredt, næsten-fuld-skærm billede (à la starlink.com) - INGEN tekst ovenpå
   længere (den sad dumt oven på fotoet, se samtalen "teksten hen over billedet skal helt
   væk") - kun navigationen ligger transparent hen over den øverste del (se
   .public-header--overlay). To lette scrims: én foroven så nav-logo/links forbliver
   læselige mod himlen, én forneden så overgangen til næste sektion ikke bliver en hård kant. */
.hero--photo {
    position: relative;
    min-height: 60vh;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(4, 7, 15, 0.55) 0%, rgba(4, 7, 15, 0) 20%, rgba(4, 7, 15, 0) 74%, rgba(4, 7, 15, 0.94) 100%),
        url("/images/hero-ocean.png") center / cover no-repeat;
}

/* ── Video i heroen ───────────────────────────────────────────────────────────
   Videoen lægger sig OVEN PÅ baggrundsbilledet i stedet for at erstatte det. Dermed er fotoet
   automatisk reserve: mangler filen, fejler den, eller er browseren sat til at spare data, ser
   man præcis den hero der var før. Ingen tom sort flade under nogen omstændigheder.

   z-index 0 og scrim'en ovenpå i z-index 1: uden det ville videoen dække de to gradienter, og
   navigationen øverst ville stå direkte på et lyst himmelbillede. */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Toner op når den første frame er klar (se .is-ready) - ellers blinker der et sort felt
       mellem fotoet og videoens start. */
    opacity: 0;
    transition: opacity 900ms ease;
}

.hero-video.is-ready {
    opacity: 1;
}

/* Samme to scrims som fotoet har, gentaget oven på videoen: én foroven så navigationen kan
   læses mod himlen, én forneden så overgangen til næste sektion ikke bliver en hård kant. */
.hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Den nederste mørkning starter ved 74 %. Den lå oprindeligt på 72 og fyldte for meget; sat
       op til 84 blev den til en stribe, og logo, undertitel og knap stod nærmest oven på selve
       videoen. 74 er mellemvejen: nok mørke til at bære teksten, uden at æde motivet.

       Den ØVERSTE mørkning er derimod gjort en anelse kraftigere. Navigationen ligger oven på
       videoen, og et lyst billede - skum, himmel - gjorde "Forside" og "Support" næsten
       ulæselige. De to ender af gradienten løser hver sin opgave og skal ikke justeres samlet. */
    background: linear-gradient(180deg,
        rgba(4, 7, 15, 0.55) 0%,
        rgba(4, 7, 15, 0) 20%,
        rgba(4, 7, 15, 0) 74%,
        rgba(4, 7, 15, 0.94) 100%);
}

/* Har brugeren bedt systemet om mindre bevægelse, skal en autospillende baggrundsvideo ikke
   køre. Fotoet nedenunder træder i stedet - og det er en fuldgyldig hero, ikke en nødløsning. */
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        display: none;
    }
}

/* ── Heroens indhold: logo, produktløfte og bestil-knap ───────────────────────────
   Forankret i BUNDEN og ikke midt i billedet: videoens motiv - båden, kølvandet - ligger i den
   øverste to tredjedele, og en centreret blok ville lægge sig oven i det. Nederst falder den
   desuden sammen med den mørkning, der i forvejen er der, så teksten kan læses uden at der skal
   lægges en ekstra plade bag den.

   z-index 2, altså over begge scrims (z-index 1). Under dem ville den nederste mørkning tage
   præcis den kontrast, teksten lever af. */
.hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 24px 28px;
    text-align: center;
    pointer-events: none;
}

/* Kun knappen skal kunne trykkes. Blokken dækker hele bunden af videoen, og uden dette ville
   den opsluge klik på alt, der måtte ligge under den. */
.hero-overlay .btn-solid {
    pointer-events: auto;
}

.hero-overlay .brand-logo {
    width: 300px;
    max-width: 72vw;
    height: auto;
    /* Skygge frem for en plade bagved: logoet skal kunne læses mod både lyst skum og mørkt vand,
       uden at der lægges en firkant hen over videoen. */
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.75));
}

.hero-tagline {
    margin: 0;
    font-family: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E8F4FF;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.hero-order {
    pointer-events: auto;
    min-width: 190px;
}

/* Telefon: logoet og linjen skæres ned, og blokken rykker tættere på bunden. En 393 dp skærm har
   ikke plads til de 300 px logo plus en spatieret linje uden at det fylder halvdelen af heroen. */
@media (max-width: 640px) {
    .hero-overlay {
        gap: 14px;
        padding: 0 18px 22px;
    }

    .hero-overlay .brand-logo {
        width: 220px;
    }

    .hero-tagline {
        font-size: 14px;
        letter-spacing: 0.1em;
    }
}


/* ── Produktløftet på mørk bund (se section1.png i designmaterialet) ──────────────
   Baggrunden er IKKE en flad farve. To gløder oven på den mørke bund: én bred og køligt blå
   oppe bag overskriften, og én svagere varm nede bag enhederne. Det er dem, der gør fladen til
   et rum med lys i stedet for et rektangel med tekst på - og de er grunden til, at montagen kan
   stå frit uden ramme. */
.intro-dark {
    position: relative;
    padding: 96px 24px 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(23, 60, 105, 0.55) 0%, rgba(9, 14, 30, 0) 62%),
        radial-gradient(80% 55% at 50% 92%, rgba(200, 169, 110, 0.10) 0%, rgba(9, 14, 30, 0) 70%),
        #070B18;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    overflow: hidden;
}

.intro-dark-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.intro-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 22px;
}

/* Overskriften er TUNGERE end sidens øvrige (700 mod 600). Det er sidens ene store udsagn, og
   det er dét, designet viser - resten af overskrifterne blev med vilje lettere, se h1/h2/h3
   længere oppe. */
.intro-headline {
    margin: 0;
    font-size: clamp(38px, 6vw, 66px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

/* Guldet er lysere end brandets --accent-warm (#C8A96E). Den messing er sat til hårfine streger
   og små etiketter; ved 66 px på mørk bund bliver den grumset og ligner mest af alt beige. Her
   skal linjen lyse, som den gør i designet. Ét sted at rette, hvis den skal tilbage til messing. */
.intro-headline-gold {
    display: block;
    color: #D9B54F;
}

.intro-sub {
    margin: 22px auto 0;
    max-width: 620px;
    font-size: var(--fs-lede);
    line-height: 1.55;
    color: #8FA3C0;
    text-wrap: pretty;
}

/* Montagen må gerne være bredere end teksten - den er sektionens billede, ikke en illustration
   inde i en spalte.

   Bredden følger skærmen (min-udtrykket) og er ikke låst til ét tal. På en 2560 px skærm stod
   den ellers som en lille ø midt i en meget bred flade.

   Selve PNG'en er beskåret til motivet. Den kom med 25 % gennemsigtig kant foroven og 23 %
   forneden, og de tomme kanter skubbede enhederne langt væk fra underrubrikken. Det er rettet i
   filen frem for med negative margener her - et billede, der opfører sig som alle andre
   billeder, er nemmere at flytte rundt på senere. */
.intro-shot {
    margin: 40px auto 0;
    max-width: min(1240px, 92vw);
}

.intro-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* Teksten under montagen. Smal spalte og god luft mellem afsnittene: hvert afsnit er ét udsagn
   om produktet, og de skal kunne læses hver for sig frem for at flyde sammen til én blok. */
.intro-copy {
    margin: 44px auto 0;
    max-width: 660px;
    color: #94A6C2;
    font-size: var(--fs-body);
    line-height: 1.7;
    text-wrap: pretty;
}

.intro-copy p {
    margin: 0 0 20px;
}

.intro-copy p:last-child {
    margin-bottom: 0;
}

/* Åbningen er lidt større og lysere - den er sætningen, der siger hvad AYLO ER, og resten
   uddyber den. */
.intro-copy-lead {
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #C3D2E6;
}

/* Afslutningen i samme guld som overskriftens anden linje, så sektionen lukkes med den farve den
   åbnede med. Ikke en fremhævning af indholdet - en ramme om det. */
.intro-copy-close {
    margin-top: 28px;
    color: #D9B54F;
}

@media (max-width: 640px) {
    .intro-copy {
        margin-top: 30px;
    }
}

/* Brødtekst og knapper under montagen. De står ikke i designudsnittet, men hører til sektionen -
   derfor deres egen luft, så de ikke klistrer op ad billedet. */
.intro-dark .hero-lede {
    margin: 8px auto 0;
    max-width: 640px;
}

.intro-dark .hero-cta {
    margin-top: 28px;
    padding-bottom: 84px;
}

@media (max-width: 640px) {
    .intro-dark {
        padding: 60px 18px 0;
    }

    .intro-eyebrow {
        letter-spacing: 0.24em;
        margin-bottom: 16px;
    }

    .intro-shot {
        margin-top: 32px;
    }

    .intro-dark .hero-cta {
        padding-bottom: 52px;
    }
}

/* ── Havneguiden: telefon til venstre, tekst til højre ────────────────────────────
   Samme flade som kort-sektionen nedenunder (--bg-panel), så de to mørke sektioner hænger
   sammen og adskiller sig fra den næsten sorte intro ovenover. */
.marina-guide {
    padding: 84px 24px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

/* Telefonen er den smalle spalte. Teksten får resten - fire punkter med to linjer hver har brug
   for bredden, mens en telefon ikke bliver bedre af at blive større. */
.marina-guide-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: 64px;
    align-items: center;
}



.marina-guide-headline {
    margin: 14px 0 0;
    /* Portalens globale h2 er versaler og dæmpet - den er skrevet til små etiketter over en
       tabel inde i appen. Her er det en rigtig overskrift og skal stå som den er skrevet. */
    text-transform: none;
    text-align: left;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #FFFFFF;
    text-wrap: balance;
}

.marina-guide-lede {
    margin: 22px 0 0;
    max-width: 54ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #8FA3C0;
    text-wrap: pretty;
}

/* Tallet fremhæves, fordi det er sætningens påstand. Lysere frem for federe: fed skrift midt i
   et afsnit larmer, en lysere farve løfter uden at bryde linjen. */
.marina-guide-lede strong {
    font-weight: 600;
    color: #DCE6F4;
}

.point-list {
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 22px;
}

.point-list li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 18px;
    align-items: start;
}

/* Ikonet i en tonet flise. Farven kommer fra selve flisen og ikke fra et ikon-bibliotek: emoji
   tegnes af styresystemet og har deres egne farver, så flisen er det eneste sted, vi kan give
   dem en fælles form og en rolig baggrund at stå på. */
.point-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    font-size: 20px;
    line-height: 1;
}

.point-icon--blue {
    background: #14294D;
    border: 1px solid #1E3A6B;
}

.point-icon--rose {
    background: #3A1B27;
    border: 1px solid #5C2A3C;
}

.point-icon--gold {
    background: #2E2413;
    border: 1px solid #4A3A1C;
}

.point-text {
    display: block;
    color: #8FA3C0;
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.point-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: var(--fs-body);
    font-weight: 600;
}

/* Under 900 px stables de to spalter. Telefonen får et loft, så den ikke fylder hele skærmen
   på en tablet i højformat, hvor spalten ellers bliver meget bred. */
/* ── Split-sektionerne på en tablet ─────────────────────────────────────────────────
   Havneguide, logbog og analyse er alle "billede i den ene spalte, tekst i den anden", og
   alle tre gav billedet en maksimalbredde beregnet til en stor skærm. Mellem 900 og 1180 px
   blev det til en klemt tekstspalte - værst i analysen, hvor tablet-rammen tog 560 px og
   efterlod 337 px til teksten på en tablet i højformat på 1024.

   Loftet over billedspalten sænkes derfor i hele det bånd. Teksten skal have flertallet af
   bredden; billedet er illustration til den og ikke omvendt.

   De tre regler står ikke samlet, men hver for sig lige efter sin egen sektions grundregel.
   En media query giver ikke ekstra specificitet: står grundreglen senere i filen, vinder
   den, uanset at den anden står i en media query. Samlet ét sted virkede kun for
   havneguiden, hvis grundregel tilfældigvis står først. */

@media (max-width: 1180px) {
    .marina-guide-inner {
        grid-template-columns: minmax(180px, 270px) 1fr;
        gap: 40px;
    }
}

/* På en iPad i højformat (768 px) er der stadig plads til telefonen VED SIDEN AF teksten -
   den skal bare være mindre. Det er pointen i sektionen: man skal kunne se app'en og læse
   om den samtidig. Først under 700 px giver det op og stabler. */
@media (max-width: 1000px) {
    .marina-guide {
        padding: 64px 20px;
    }

    .marina-guide-inner {
        grid-template-columns: minmax(170px, 250px) 1fr;
        gap: 32px;
    }
}

@media (max-width: 700px) {
    .marina-guide {
        padding: 56px 20px;
    }

    .marina-guide-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        justify-items: center;
        text-align: left;
    }

    .phone {
        max-width: 280px;
    }
}


/* ── Telefonen: skærmbillede bagved, ramme ovenpå ─────────────────────────────────
   Rammen (phone-frame.png) har en GENNEMSIGTIG skærmflade. Skærmbilledet ligger derfor bagved
   og skinner igennem, i stedet for at være brændt ind i et færdigt montagebillede. Det er
   forskellen på at skifte én fil og at skulle have lavet en ny montage, hver gang appen ændrer
   sig.

   Tallene herunder er MÅLT på rammen, ikke gættet: åbningen er x 36..603 og y 80..1209 af
   640x1280. Ændres rammen, skal de fire procenter måles igen. */
.phone {
    position: relative;
    width: 100%;
}

.phone-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.phone-screen {
    position: absolute;
    left: 5.63%;
    top: 6.25%;
    width: 88.75%;
    height: 88.28%;
    overflow: hidden;
    /* Appens egen baggrundsfarve. Ses kun hvis skærmbilledet ikke helt udfylder åbningen -
       så er hullet mørkt som resten af appen frem for gennemsigtigt ned til sektionen. */
    background: #0B1020;
    /* Følger rammens indvendige hjørner, så skærmbilledet ikke stikker ud i kanterne. */
    border-radius: 6% / 3%;
}

/* Skærmbilledet fylder åbningens BREDDE og forankres i toppen - det beskæres ikke i siderne.

   Formaterne passer nemlig ikke sammen: åbningen er 0,50 (en høj, moderne telefon), mens
   skærmbilledet er 0,625. Fyldte vi hele åbningen med "cover", ville der ryge 12 % af hver
   side - målt, ikke gættet - og det skærer ind i kortene i appen.

   I stedet står appens egen baggrundsfarve nedenunder, så billedet glider over i en tom side
   frem for at slutte med en kant. Skærmbilledets status- og navigationsbjælke er klippet væk;
   telefonens eget ur og app-dock hører ikke hjemme i en produktvisning. */
.phone-screen img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Systemanalyse: tekst til venstre, skærm til højre ────────────────────────────
   Spejlvendt af havneguiden ovenfor, så de to sektioner ikke står som gentagelser af hinanden.
   Lidt mørkere flade end havneguiden, så øjet kan se, at det er en ny sektion. */
.analysis {
    padding: 84px 24px;
    background: #0A1020;
    border-bottom: 1px solid var(--border);
}

.analysis-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(320px, 560px);
    gap: 64px;
    align-items: center;
}

/* Guld her, cyan i havneguiden. De to sektioner ligger lige efter hinanden, og øjenbrynet er
   det første, man læser - to forskellige farver siger "nyt emne" hurtigere end en overskrift. */
.analysis-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #D9B54F;
}

.analysis-headline {
    margin: 16px 0 0;
    text-transform: none;
    text-align: left;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #FFFFFF;
    text-wrap: balance;
}

/* Anden linje i cyan. Guldet er brugt på øjenbrynet i denne sektion, og to guldflader lige over
   hinanden ville gøre det uklart, hvad der er etiket og hvad der er overskrift. */
.analysis-headline-accent {
    display: block;
    color: #4FA6DC;
}

.analysis-lede {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #8FA3C0;
    text-wrap: pretty;
}

.analysis-lede strong {
    font-weight: 600;
    color: #DCE6F4;
}

.analysis-text .point-list {
    margin-top: 34px;
}

/* ── Tabletten: skærmbillede bagved, ramme ovenpå ─────────────────────────────────
   Samme princip som .phone. Tallene er MÅLT på tablet-frame.png: åbningen er x 24..999 og
   y 48..655 af 1024x720. Skiftes rammen, skal de måles igen. */
.tablet {
    position: relative;
    width: 100%;
}

.tablet-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.tablet-screen {
    position: absolute;
    left: 2.34%;
    top: 6.67%;
    width: 95.31%;
    height: 84.44%;
    overflow: hidden;
    background: #0B1020;
    border-radius: 1.5% / 2%;
}

.tablet-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ── Alarmkort ────────────────────────────────────────────────────────────────────
   Bygget som markup og ikke klippet ud af et skærmbillede: teksten kan rettes, den kan læses
   højt af en skærmlæser, og den bliver ikke uskarp på en stor skærm. */
.alert-card {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #0E1526;
    border: 1px solid #1B2540;
}

.alert-card-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #0B1020;
}

.alert-card--warn .alert-card-dot {
    background: #E0A82E;
}

.alert-card--ok .alert-card-dot {
    background: #4FBF7B;
}

.alert-card-body {
    display: block;
    min-width: 0;
}

.alert-card-head {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text);
}

.alert-card-time {
    font-weight: 400;
    color: var(--text-muted);
}

.alert-card-text {
    display: block;
    margin-top: 4px;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: #8FA3C0;
}

.alert-card--warn .alert-card-text strong {
    color: #E0A82E;
    font-weight: 600;
}

.alert-card-value {
    color: #E0A82E;
    font-weight: 600;
}

/* Se forklaringen ved havneguidens tilsvarende regel. */
@media (max-width: 1180px) {
    .analysis-inner {
        grid-template-columns: 1fr minmax(280px, 400px);
        gap: 44px;
    }
}

/* Under 900 px stables spalterne. Skærmen lægges ØVERST, fordi den er sektionens blikfang -

   en liste med fire punkter er en dårlig start på et afsnit, man ikke har set billedet til. */
@media (max-width: 900px) {

    .analysis {
        padding: 56px 20px;
    }

    .analysis-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .analysis-visual {
        order: -1;
    }
}

/* ── Logbog: lys sektion med et togt-kort ─────────────────────────────────────────
   Den eneste lyse sektion i den lange mørke stribe fra intro'en og ned. Det er med vilje:
   fire mørke sektioner i træk løber sammen, og et hvidt brud her giver øjet et hvil, inden
   analyse, smart kontrol og AIS tager over igen. Overskriften nulstiller den globale h2-regel,
   der ellers gør alle h2'er små, versale og dæmpede. */
.logbook {
    padding: 96px 24px;
    background: #FFFFFF;
}

.logbook-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr minmax(300px, 460px);
    gap: 72px;
    align-items: center;
}

.logbook-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #3E86B5;
}

.logbook-headline {
    margin: 16px 0 0;
    text-transform: none;
    text-align: left;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #0B1220;
    text-wrap: balance;
}

.logbook-headline-accent {
    display: block;
    color: #3E86B5;
}

.logbook-lede {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #4A5568;
    text-wrap: pretty;
}

.logbook-lede strong {
    color: #0B1220;
    font-weight: 600;
}

/* Punktlisten deles med havneguiden og analysen, men de står på mørk bund. Her vendes kun
   farverne - form, mål og afstande bliver, hvor de er, så de tre lister ligner hinanden. */
.point-list--light .point-icon--light {
    background: #EAF3FA;
    border: 1px solid #D3E5F3;
}

.point-list--light .point-text {
    color: #6B7C90;
}

.point-list--light .point-text strong {
    color: #0B1220;
}

/* Togt-kortet. Kvadratisk, fordi fotoet er kvadratisk: så er der ingen tvivl om, hvor meget
   af billedet der er synligt, og panelet lander samme sted uanset skærmbredde. */
.logbook-visual {
    display: flex;
    justify-content: center;
}

.voyage-card {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: hidden;
    background: #0B1220;
    box-shadow: 0 18px 44px rgba(15, 26, 46, 0.18);
}

.voyage-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Panelet er næsten uigennemsigtigt og ikke gennemsigtigt med sløring: vandet under det er
   uroligt, og små hvide tal på et uroligt billede bliver svære at læse. */
.voyage-stats {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 16px 18px 18px;
    border-radius: 14px;
    background: rgba(9, 19, 34, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.voyage-stats-head {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6FB0DA;
}

.voyage-grid {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px;
}

/* min-width: 0 - ellers nægter en gitterspalte at blive smallere end sit længste ord, og
   "Roskilde → Kalundborg" ville skubbe de to andre spalter sammen. */
.voyage-grid > div {
    min-width: 0;
}

.voyage-grid dt {
    font-size: 12px;
    font-weight: 500;
    color: #8296AD;
}

.voyage-grid dd {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #FFFFFF;
}

/* Under 900 px stables de to spalter, og kortet får et loft, så det ikke fylder hele skærmen
   på en tablet i højformat. Samme greb som i havneguiden. */
/* Se forklaringen ved havneguidens tilsvarende regel. */
@media (max-width: 1180px) {
    .logbook-inner {
        grid-template-columns: 1fr minmax(220px, 320px);
        gap: 40px;
    }
}

/* Samme som havneguiden: togt-kortet bliver ved med at stå til højre for teksten på en iPad
   i højformat, bare mindre. Kortet er kvadratisk, så det koster ikke meget bredde. */

@media (max-width: 1000px) {
    .logbook {
        padding: 64px 20px;
    }

    .logbook-inner {
        grid-template-columns: 1fr minmax(200px, 280px);
        gap: 32px;
    }

    /* Kortet er nu 320 px, og tre statistik-spalter deri bliver 85 px - dér brækker både
       "SW 12 kn" og rutenavnene midt over. To spalter, og ruten får hele bredden, fordi
       den er den eneste værdi med to stednavne i sig. */
    .voyage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voyage-grid > div:last-child {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {
    .logbook {
        padding: 56px 20px;
    }

    .logbook-inner {
        grid-template-columns: 1fr;
        gap: 36px;
        justify-items: center;
    }

    .logbook-text {
        max-width: 620px;
    }

    .voyage-card {
        max-width: 380px;
    }
}


/* På en telefon bliver tre spalter til to: 11 px etiketter i tre spalter på 320 px bliver til
   ét ord pr. linje, og panelet vokser sig højere end fotoet over det. */
@media (max-width: 480px) {
    .voyage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .voyage-stats {
        left: 12px;
        right: 12px;
        bottom: 12px;
        padding: 14px 14px 16px;
    }
}

/* ── Smart kontrol: tekst oven på en baggrundsvideo ───────────────────────────────
   Samme konstruktion som heroen øverst: video i bunden, en mørkning ovenpå, indholdet øverst.
   Rækkefølgen i z-index er dét, der gør teksten læselig - uden mørkningen imellem ville hvid
   tekst forsvinde i skum og himmel, hver gang klippet nåede et lyst billede. */
.smart {
    position: relative;
    overflow: hidden;
    padding: 110px 24px;
    background: #0A1020;
    border-bottom: 1px solid var(--border);
}

.smart-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Toner frem, når første billede er klar - ellers blinker der en sort flade mellem
       posterbilledet og videoens start. Se scriptet ved sektionen. */
    opacity: 0;
    transition: opacity 900ms ease;
}

.smart-video.is-ready {
    opacity: 1;
}

/* Mørkningen er KRAFTIGST TIL VENSTRE, hvor teksten står, og lettere til højre, så man stadig
   kan se, hvad videoen viser. En ensartet mørkning ville enten skjule videoen eller efterlade
   teksten ulæselig - den kan ikke gøre begge dele.

   Tallene er ikke valgt på øjemål. Klippet er målt: bag teksten har det middel-luma 84 og en
   lyseste pixel på 144 af 255. Regnet på den lyseste pixel - altså det værst tænkelige sted -
   giver mørkningen herunder 6,4:1 for den gyldne etiket og 5,5:1 for manchetten, som er de to
   svageste tekstfarver i sektionen. Begge ligger over WCAG's 4,5:1. Skifter I klippet ud med
   et lysere et, så mål det igen, før I letter mere:
     ffmpeg -i klip.mp4 -vf "crop=iw*0.45:ih:0:0,fps=1,signalstats,metadata=print" -f null - */
.smart::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(6, 10, 22, 0.72) 0%, rgba(6, 10, 22, 0.55) 42%, rgba(6, 10, 22, 0.15) 100%),
        linear-gradient(180deg, rgba(6, 10, 22, 0.35) 0%, rgba(6, 10, 22, 0) 30%);
}

.smart-inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
}

.smart-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #D9B54F;
}

.smart-headline {
    margin: 18px 0 0;
    max-width: 15ch;
    text-transform: none;
    text-align: left;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

/* Guldet begynder MIDT i sætningen og ikke på en ny linje - det er sådan, designet gør det, og
   det binder de to halvdele sammen i stedet for at dele overskriften i to. */
.smart-headline-accent {
    color: #D9B54F;
}

.smart-lede {
    margin: 26px 0 0;
    max-width: 48ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #C6D2E4;
}

.smart-lede strong {
    font-weight: 600;
    color: #FFFFFF;
}

/* Chips. En liste og ikke bare tekst: det ER en opremsning, og en skærmlæser skal kunne sige
   hvor mange der er. Punkttegnene er slået fra, formen kommer fra rammen. */
.smart-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.smart-chips li {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.07);
    color: #E8EDF5;
    font-size: var(--fs-sm);
    /* Glasagtig flade, så chippen hører til videoen bagved i stedet for at ligge som en
       udklippet knap oven på den. */
    backdrop-filter: blur(6px);
}

.smart-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 32px 0 0;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid rgba(217, 181, 79, 0.45);
    background: rgba(217, 181, 79, 0.10);
    color: #D9B54F;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.smart-note-icon {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 640px) {
    .smart {
        padding: 64px 18px;
    }

    .smart-headline {
        max-width: none;
    }

    .smart-note {
        display: flex;
    }
}

/* Har brugeren bedt om mindre bevægelse, står posterbilledet i stedet - samme valg som heroen. */
@media (prefers-reduced-motion: reduce) {
    .smart-video {
        display: none;
    }
}

/* ── AIS: centreret tekst og fire kort over et baggrundsfoto ──────────────────────
   Fotoet ligger som baggrund på selve sektionen og ikke som et <img>: det er dekoration, ikke
   indhold, og et billede uden betydning skal ikke fylde i en skærmlæsers oplæsning af siden.

   Mørkningen er lagt oven på i samme erklæring. To lag: en kølig blå tone over hele fladen, så
   fotoet hører til sitets farveholdning frem for at være et fremmedlegeme, og en lodret
   gradient, der er tungest i midten, hvor teksten står. */
.ais-data {
    position: relative;
    padding: 96px 24px;
    background:
        linear-gradient(180deg, rgba(8, 14, 28, 0.92) 0%, rgba(8, 14, 28, 0.86) 50%, rgba(8, 14, 28, 0.94) 100%),
        linear-gradient(180deg, rgba(20, 48, 92, 0.45) 0%, rgba(20, 48, 92, 0.45) 100%),
        url("/img/ais-bg.jpg") center / cover no-repeat;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.ais-data-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.ais-data-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #6FC7E8;
}

.ais-data-headline {
    margin: 18px auto 0;
    max-width: 20ch;
    text-transform: none;
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    text-wrap: balance;
}

.ais-data-headline-accent {
    display: block;
    color: #6FC7E8;
}

.ais-data-lede {
    margin: 22px auto 0;
    max-width: 62ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #C6D2E4;
    text-wrap: pretty;
}

.ais-data-lede strong {
    font-weight: 600;
    color: #6FC7E8;
}

/* auto-fit frem for fire faste spalter: fjerner eller tilføjer man et kort, fordeler gitteret
   sig selv i stedet for at efterlade et hul. */
/* auto-fit gav 3 spalter på en iPad i højformat, og så stod det fjerde kort alene på
   linjen nedenunder. Fire på én linje ville kræve spalter på 165 px, hvor overskrifterne
   brækker midt i et ord - derfor 2x2 dernede i stedet. Det er også pænere: kortene får
   samme proportion som resten af sektionen. */
.ais-data-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.ais-data-cards li {
    padding: 24px 22px;
    border-radius: 14px;
    /* Halvgennemsigtig frem for massiv: fotoet skal anes gennem kortene, ellers ligger de som
       fire udklippede firkanter oven på et billede, de ikke hører sammen med. */
    background: rgba(10, 17, 34, 0.72);
    border: 1px solid rgba(120, 160, 210, 0.20);
    backdrop-filter: blur(4px);
}

.ais-data-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #14294D;
    border: 1px solid #1E3A6B;
    font-size: 19px;
    line-height: 1;
}

.ais-data-cards h3 {
    margin: 18px 0 8px;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: #FFFFFF;
    text-transform: none;
}

.ais-data-cards p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: #8FA3C0;
}

.ais-data-footnote {
    margin: 40px auto 0;
    max-width: 70ch;
    font-size: var(--fs-xs);
    font-style: italic;
    line-height: 1.6;
    color: #7C8CA6;
}

@media (max-width: 900px) {
    .ais-data-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ais-data {
        padding: 60px 18px;
    }

    .ais-data-cards {
        margin-top: 32px;
    }
}

/* To spalter er rigtigt på en tablet, men på en telefon bliver de 157 px brede, og så står
   der to ord pr. linje i brødteksten. Én spalte hele vejen ned. */
@media (max-width: 560px) {
    .ais-data-cards {
        grid-template-columns: 1fr;
    }
}

/* ── Lys sektion ──────────────────────────────────────────────────────────────────
   Sektionen under heroen er hvid i stedet for mørkeblå. Farverne sættes som en modifikator på
   selve sektionen og ikke ved at rette :root: resten af sitet - dashboard, alarmer, konto - er
   stadig mørkt, og en ændring i rodvariablerne ville følge med derover.

   Alt der står på en mørk flade i forvejen, skal have en modpart her. Uden det ville
   overskrifter og brødtekst stå lyse på hvidt og være usynlige - og det er præcis den slags,
   der først opdages, når nogen kigger på siden. */
.features--light {
    background: #FFFFFF;
}

.features--light .features-intro h1,
.features--light .section-title,
.features--light .feature-card h3 {
    color: #0B1220;
}

.features--light .hero-lede,
.features--light .feature-card p {
    color: #4A5568;
}

/* Kortene vender om: mørk flade med skygge nedad bliver til en lys flade med en tydelig kant.
   Skyggen dæmpes kraftigt - den samme sorte skygge, der giver dybde på mørkt, ser ud som snavs
   på hvidt. */
.features--light .feature-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
    border-color: #E2E8F2;
    box-shadow: 0 6px 18px rgba(15, 26, 46, 0.07);
}

/* Lysstriben langs overkanten antyder lys ovenfra på en mørk flade. På en hvid flade er der
   intet at lyse op, og striben ville bare gøre kanten uskarp. */
.features--light .feature-card::before {
    display: none;
}

.features--light .feature-card:hover {
    border-color: #C9D6E8;
    box-shadow: 0 12px 26px rgba(15, 26, 46, 0.11);
}

/* Overskrift/pitch/CTA flyttet ned i selve "Alt hvad du skal bruge"-sektionen (sektion 2) i
   stedet for at ligge hen over fotoet - se Index.cshtml. */
.features-intro {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}

.features-intro h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    /* Kraftigere negativ tracking end h2: jo større graden er, jo mere luft har Space Grotesk
       mellem bogstaverne, og på 58px falder ordene fra hinanden uden den her. */
    letter-spacing: -0.025em;
    margin: 0 0 20px;
    text-wrap: balance;
}

.hero-lede {
    color: var(--text-muted);
    font-size: var(--fs-lede);
    line-height: var(--lh-body);
    margin: 0 auto 30px;
    max-width: 52ch;
    /* Undgår ét enligt ord på sidste linje i et centreret afsnit, hvor det er mest synligt. */
    text-wrap: pretty;
}

.hero-cta {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* ── Features ───────────────────────────────────────────────────────────── */

/* .section-title er samlet ét sted øverst i filen. Den stod tidligere OGSÅ her med font-size:
   28px, og da den her kom sidst i filen, vandt den - så titlerne var 28px selvom reglen ovenfor
   sagde noget andet. Præcis den slags kollision er umulig at få øje på i browseren, fordi
   resultatet ser "næsten rigtigt" ud. Lad den blive ét sted. */

.features {
    padding: 72px 24px;
}

.features-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
}

.feature-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
}

.feature-card h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

/* Brødtekst i kort. Orddeling er sat til fordi dansk har lange sammensatte ord -
   "farvandsafmærkning", "gæstesejlerpriser" - som i en smal spalte efterlader store huller i
   højremargen når de springer til næste linje. lang="da" er sat i _PublicLayout, så browseren
   ved hvor den må dele. */
.feature-card p,
.ais-card p,
.beta-point p,
.marina-points li {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
    hyphens: auto;
    /* Kun ORD PÅ 12 TEGN OG DEROVER må deles, med mindst 5 tegn før og 4 efter.
       Uden grænsen delte browseren også korte ord - "di-stance", "automa-tisk" - og fire brud i
       et lille afsnit larmer mere, end den ujævne højremargen gjorde. Med grænsen rammer den
       kun de lange sammensatte ord, som er dem der reelt laver huller: "brændstofforbrug",
       "farvandsafmærkning", "batterispænding". */
    hyphenate-limit-chars: 12 5 4;
    text-wrap: pretty;
}

/* ── Indtoning ved scroll ─────────────────────────────────────────────────────
   Klassen .reveal sættes af JAVASCRIPT (se bunden af Index.cshtml), ikke i markup'en. Det er
   bevidst: uden JavaScript bliver den aldrig sat, og så står alt synligt som normalt. Skrev vi
   den direkte i HTML'en, ville en fejl i scriptet - eller en browser med JS slået fra - efterlade
   en helt tom side.

   Kun opacity og transform animeres. De to kan browseren flytte uden at lægge siden om igen;
   animerer man fx højde eller margin, hakker det på en telefon. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.2, 1),
                transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Respekterer systemets indstilling. Bevægelse er pynt her - indholdet skal frem uanset hvad. */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Forsidens kort: fælles materiale ─────────────────────────────────────────────
   Alle kortagtige flader på forsiden deler ét udtryk, så siden hænger sammen. Tre greb, og de
   virker kun sammen:
     1) en svag lodret gradient, så fladen har en top og en bund i stedet for at være ensfarvet
     2) en blød skygge nedad, så kortet ligger OVEN PÅ baggrunden frem for i den
     3) en hårfin lysstribe langs overkanten (::before), som antyder lys ovenfra
   Uden dem var kortene bare baggrund med en streg omkring. */

.feature-card,
.ais-card,
.beta-point {
    position: relative;
    background: linear-gradient(180deg, var(--surface) 0%, var(--bg-panel) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    /* Bevægelsen ligger på transform+box-shadow, ikke på fx margin/top: de to kan browseren
       animere uden at lægge siden om igen. */
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.feature-card::before,
.ais-card::before,
.beta-point::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    /* Toner ud mod siderne - en streg i fuld bredde ville læses som en kant, ikke som lys. */
    background: linear-gradient(90deg, transparent, var(--surface-hi), transparent);
}

.feature-card:hover,
.ais-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.42);
    border-color: #2A3E68;
}

/* ── Nautiske kort ────────────────────────────────────────────────────────────── */

.charts {
    padding: 84px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.charts-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Messing, samme redaktionelle rolle som sektionsmærket. */
.charts-subhead {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-warm);
}

/* Landene som "chips" frem for en punktopstilling: det er en dækningsliste man SKIMMER for at
   se om ens eget farvand er med, ikke noget man læser linje for linje. */
.chart-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

.chart-countries li {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.charts-points li:last-child {
    padding-bottom: 0;
}

/* Forbeholdet står som en selvstændig, læsbar linje under sektionen - ikke som mikroskopisk
   fodnote. Det er en sikkerhedsoplysning, og et kort der bliver forvekslet med et godkendt
   søkort er præcis den fejl der gør skade. */
.charts-disclaimer {
    max-width: 760px;
    margin: 40px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* ── AIS ──────────────────────────────────────────────────────────────────────── */

.ais {
    padding: 84px 24px;
    /* Samme baggrund som selve siden, ikke .bg-panel som .steps bruger - de to sektioner ligger
       lige efter hinanden, og to panel-flader i træk ville flyde sammen til én stor kasse. */
    background: var(--bg);
}

.ais-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.ais-intro {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

/* Sektionsmærket er REDAKTIONELT - derfor messing og ikke cyan. Det er også dét, der bryder
   monokromien: uden en anden farve end den cyan der i forvejen sidder på ikoner, knapper og
   links, får øjet intet at hvile på ned gennem siden. */
.ais-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 5px 14px;
    border: 1px solid rgba(200, 169, 110, 0.42);
    border-radius: 999px;
    background: rgba(200, 169, 110, 0.07);
    color: var(--accent-warm);
    font-size: 11px;
    font-weight: 600;
    /* Bredere sperring end brødteksten: mærket skal læses som en etiket, ikke som en sætning. */
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ais-lede {
    margin: 18px auto 0;
    max-width: var(--measure);
    color: var(--text-muted);
    font-size: var(--fs-lede);
    line-height: var(--lh-body);
    text-wrap: pretty;
}

.ais-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ais-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 20px;
}

.ais-card h3,
.feature-card h3 {
    margin: 0 0 10px;
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.ais-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Pladser til skærmbilleder. Rammerne har et fast billedformat, så siden IKKE hopper når de
   rigtige billeder sættes ind - og så hullerne er synlige og lige store imens. Udskift
   .ais-shot-empty med et <img>; aspect-ratio og ramme sidder på figuren. */
/* Ulige spalter: det liggende tablet-billede får mest plads, det stående telefon-billede mindre.
   Med to lige spalter fik telefon-billedet et bredt tomt felt på hver side. */
.ais-shots {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.ais-shot {
    margin: 0;
}

/* Skærmbillede-ramme med FAST HØJDE og object-fit: contain.
   Grunden er at billederne kommer i to former: liggende fra tabletten om bord (16:10) og stående
   fra telefonen (10:16). Med et fast BILLEDFORMAT ville et stående skærmbillede blive skåret
   midt over i en liggende ramme - og et brugerfladebillede tåler ikke beskæring, så er pointen
   væk. Med fast HØJDE i stedet står de i stedet side om side i samme størrelse, som en tablet
   ved siden af en telefon, og intet klippes bort. */
.shot-frame,
.ais-shot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-panel);
    overflow: hidden;
}

/* Rammen er tegnet som en ENHED, ikke som et billedudsnit: mørkt kabinet, smal ramme hele vejen
   rundt, og en dyb skygge der løfter den fra siden. Forskellen er stor - et skærmbillede uden
   kabinet ligner dokumentation, det samme billede i et kabinet ligner et produktfoto. Kabinettet
   er tegnet i CSS og ikke et billede, så det skalerer og skifter tema med resten. */
.shot-frame {
    padding: 12px;
    border-radius: 20px;
    background: linear-gradient(180deg, #16202F 0%, #0A121D 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.45),
        /* Hårfin lyskant øverst indeni - kanten på et rigtigt kabinet fanger lys. */
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shot-frame img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Mindre radius end kabinettet - som på en rigtig skærm, hvor glasset sidder inden for kanten. */
    border-radius: 10px;
}

/* Den brede variant: ét billede i fuld sektionsbredde, til det skærmbillede der bærer sektionen.
   Her sættes højden IKKE - billedet fylder bredden og bestemmer selv højden. Med en fast højde
   ville et liggende billede få sorte bjælker i siderne, og hele pointen med et hero-billede er
   at det fylder. */
.shot-frame--wide {
    height: auto;
    margin-bottom: 40px;
    /* Bredere kant og kraftigere skygge: kabinettet er større, så rammen skal følge med, ellers
       ser den for tynd ud i forhold til fladen. */
    padding: 16px;
    border-radius: 26px;
    box-shadow:
        0 44px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shot-frame--wide img {
    width: 100%;
    height: auto;
    max-height: none;
    border-radius: 12px;
}

.ais-shot-empty {
    padding: 16px;
    border-style: dashed;
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
}

.ais-shot figcaption {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

.ais-callout {
    margin-top: 40px;
    padding: 28px 32px;
    background: var(--bg-panel);
    /* Accent-kant i venstre side frem for hele rammen - markerer at det her er sektionens
       egentlige pointe, uden at gøre det til endnu et kort i rækken ovenfor. */
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 12px;
}

.ais-callout h3 {
    margin: 0 0 12px;
    font-size: 20px;
}

.ais-callout p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
}

/* Forbeholdet skal kunne LÆSES - det er en sikkerhedsoplysning, ikke jura der gemmes væk.
   Mindre og dæmpet, men ikke usynlig. */
.ais-smallprint {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px !important;
}

/* ── Marina-databasen ─────────────────────────────────────────────────────────── */

.marinas-promo {
    padding: 84px 24px;
    /* Panel-flade, så den skiller sig fra AIS-sektionen lige over og "sådan kommer du i gang"
       lige under - tre sektioner i træk på samme baggrund flyder sammen til én lang væg. */
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.marinas-promo-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.marina-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Skifter side på hver anden split-sektion (kort → marinaer → logbog → lys), så øjet ikke
   møder den samme spalteopdeling seks gange i træk ned gennem siden. Kun rækkefølgen ændres -
   markup'en beholder teksten først, hvilket er dét mobilvisningen og skærmlæsere følger. */
.marina-split--reverse .marina-split-text {
    order: 2;
}

.marina-split--reverse .ais-shot {
    order: 1;
}

.marina-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.marina-points li {
    padding: 0 0 20px 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* Skillelinjen toner ud mod højre i stedet for at stoppe brat - en streg i fuld styrke hele
   vejen tegner et gitter, og punkterne skal læses som en liste, ikke som en tabel. */
.marina-points li:not(:last-child) {
    margin-bottom: 20px;
    border-bottom: none;
    background: linear-gradient(90deg, var(--border) 0%, transparent 92%) bottom left / 100% 1px no-repeat;
}

/* Overskriften i hver punkt står på sin egen linje - en <strong> midt i brødteksten ville
   drukne, og punkterne skal kunne skimmes. */
.marina-points strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text);
    font-size: 15px;
}

/* Rammerne har fast højde (se .shot-frame) - intet billedformat at sætte her længere. */

/* ── Lysstyring ───────────────────────────────────────────────────────────────── */

/* Forsiden veksler mellem sidebaggrund og panel hele vejen ned - kort(panel), AIS(bg),
   marinaer(panel), logbog(bg), lys(panel), alarmer(bg) - så sektionerne kan skelnes fra
   hinanden uden skillelinjer. Indsætter du en ny sektion, så bryd ikke rækkefølgen. */
.lights {
    padding: 84px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ── Overvågning og alarmer ───────────────────────────────────────────────────── */

.watch {
    padding: 84px 24px;
    background: var(--bg);
}

/* ── Beta-rekruttering ────────────────────────────────────────────────────────── */

.beta {
    padding: 84px 24px;
    /* Svag accent-tone i stedet for panel/baggrund-vekslen ovenfor - sektionen SKAL skille sig
       ud fra funktionsafsnittene, ellers læses tilbuddet som endnu en feature. Holdt dæmpet:
       en fuld cyan flade ville skrige, og resten af siden er mørk og rolig. */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(0, 194, 224, 0.13), transparent 62%),
        var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.beta-inner {
    max-width: 860px;
    margin: 0 auto;
}

.beta-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--accent);
    /* Mørk tekst på den lyse accent - cyan på cyan ville være ulæseligt. */
    color: #05233A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.beta h2 {
    margin: 0 0 18px;
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    text-wrap: balance;
    color: var(--text);
    /* Nulstiller de globale h2-regler (versaler, dæmpet farve, lille skrift), som er skrevet
       til overskrifter INDE i portalen - ikke til en forside-sektion. */
    text-transform: none;
    letter-spacing: normal;
}

.beta-lede {
    max-width: var(--measure);
    margin: 0 auto;
    color: var(--text-muted);
    font-size: var(--fs-lede);
    line-height: var(--lh-body);
    text-wrap: pretty;
}

.beta-lede strong {
    color: var(--text);
}

.beta-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
    text-align: left;
}

.beta-point {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 20px;
}

.beta-point h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.beta-point p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* .hero-cta er centreret via flex i forvejen - her skal knapperne bare have luft over sig. */
.beta .hero-cta {
    justify-content: center;
}

.watch-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    /* start og ikke center: billed-spalten er to skærmbilleder høj, og en lodret centreret
       tekst ville få et stort tomt felt over overskriften. */
    align-items: start;
    margin-top: 48px;
}

.watch-split-text h3,
.ais-callout h3 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: var(--lh-heading);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.watch-split-text p,
.ais-callout p {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: var(--measure);
    text-wrap: pretty;
}

.watch-split-text p:last-child {
    margin-bottom: 0;
}

.watch-split-text strong {
    color: var(--text);
}

/* Ligger allerede i en spalte - de to skærmbilleder stables derfor, i stedet for at blive
   presset ned i to meget smalle kolonner. */
.watch-shots {
    grid-template-columns: 1fr;
    margin-top: 0;
}

/* ── Sådan virker det ───────────────────────────────────────────────────── */

.steps {
    padding: 72px 24px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Samme baggrundsbillede som heroen, bare med en tungere ensfarvet scrim ovenpå (mere tekst
   at holde læsbart her end i selve heroen) - se .hero--photo. */
.steps--photo {
    background:
        linear-gradient(rgba(5, 9, 20, 0.88), rgba(5, 9, 20, 0.88)),
        url("/images/hero-ocean.png") center / cover no-repeat;
    border-top-color: rgba(30, 46, 80, 0.6);
    border-bottom-color: rgba(30, 46, 80, 0.6);
}

.steps-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.step {
    text-align: center;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 194, 224, 0.12);
    color: var(--accent);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 14px;
}

.step h3 {
    margin: 0 0 8px;
    font-size: 16px;
}

.step p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 32ch;
    margin-inline: auto;
}

/* ── Kom i gang / køb ───────────────────────────────────────────────────────────
   Sidens sidste argument og dens eneste prisliste. Lys bund som logbogen, men en anelse
   køligere end det hvide, så de tre hvide trinkort og det hvide abonnementskort kan ses som
   kort og ikke bare som tekst på en flade. */
.getstarted {
    padding: 96px 24px;
    background: #F2F5FA;
}

.getstarted-inner {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.getstarted-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    /* --accent (#00C2E0) er sat til mørk bund og bliver for lys her: den ville stå på 2,1:1
       mod den lyse flade. Denne er den samme kulør, kørt ned til 4,7:1. */
    color: #1B7FA6;
}

.getstarted-headline {
    margin: 16px 0 0;
    text-transform: none;
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: #0B1220;
    text-wrap: balance;
}

.getstarted-headline-accent {
    color: var(--accent-warm);
}

.getstarted-lede {
    margin: 20px auto 0;
    max-width: 56ch;
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: #4A5568;
    text-wrap: pretty;
}

/* ── De tre trin ────────────────────────────────────────────────────────────────
   En <ol>, fordi rækkefølgen ér indholdet: man kan ikke montere før man har bestilt. Numrene
   kommer fra en tæller og ikke fra tre håndskrevne 1/2/3 - så bliver de aldrig forkerte, hvis
   der bliver skudt et trin ind i midten. */
.step-cards {
    counter-reset: step;
    list-style: none;
    margin: 52px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.step-cards li {
    padding: 30px 28px 32px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E4EAF3;
    box-shadow: 0 6px 18px rgba(15, 26, 46, 0.06);
}

.step-cards li::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border-radius: 13px;
    background: #14213D;
    color: var(--accent-warm);
    font-size: 17px;
    font-weight: 700;
}

.step-cards h3 {
    margin: 0;
    text-transform: none;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: #0B1220;
}

.step-cards p {
    margin: 14px 0 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: #6B7C90;
}

/* ── De to priskort ─────────────────────────────────────────────────────────────
   Kun to kort, og de skal stå midt på siden og ikke spænde over hele bredden - en pris i en
   spalte på 560 px læses som en pris, den samme pris strakt over 1180 px læses som en tabel. */
.plans {
    margin: 34px auto 0;
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    text-align: left;
    align-items: start;
}

.plan {
    padding: 32px 30px 34px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.plan--package {
    background: linear-gradient(160deg, #142744 0%, #0C1830 100%);
    box-shadow: 0 18px 40px rgba(12, 24, 48, 0.28);
}

.plan--sub {
    background: #FFFFFF;
    border: 1px solid #E4EAF3;
    box-shadow: 0 6px 18px rgba(15, 26, 46, 0.06);
}

.plan-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.plan--package .plan-eyebrow {
    color: #4FB6DC;
}

.plan--sub .plan-eyebrow {
    color: #1B7FA6;
}

/* Tallet og enheden står på samme linje med forskellig vægt: det er tallet, øjet skal ramme,
   og "DKK/mo." må ikke konkurrere med det. */
.plan-price {
    margin: 14px 0 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.plan-price strong {
    font-size: clamp(38px, 4.4vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.plan-unit {
    font-size: var(--fs-lede);
    font-weight: 500;
}

.plan--package .plan-price strong { color: #FFFFFF; }
.plan--package .plan-unit         { color: #93A6C2; }
.plan--sub .plan-price strong     { color: #0B1220; }
.plan--sub .plan-unit             { color: #6B7C90; }

.plan-note {
    margin: 12px 0 0;
    padding-bottom: 22px;
    font-size: var(--fs-sm);
}

/* Stregen hører til noten og er ikke et element for sig: så kan et punkt tilføjes eller
   fjernes uden at nogen skal huske at flytte en <hr> med. */
.plan--package .plan-note {
    color: #93A6C2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.plan--sub .plan-note {
    color: #6B7C90;
    border-bottom: 1px solid #E4EAF3;
}

.plan-list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 16px;
    flex: 1;
}

.plan-list li {
    position: relative;
    padding-left: 26px;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.plan-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
}

.plan--package .plan-list li          { color: #D7E0EE; }
.plan--package .plan-list li::before   { color: var(--accent-warm); }
.plan--sub .plan-list li              { color: #3E4A5C; }
.plan--sub .plan-list li::before       { color: #1B7FA6; }

/* Knappen fylder hele kortets bredde. Den er sidens hovedhandling, og et kort med én knap i
   bunden læses hurtigere, når knappen ikke skal findes - den ér bunden. */
.plan-buy {
    margin-top: 28px;
    padding: 16px 24px;
    border-radius: 10px;
    background: var(--accent-warm);
    color: #14213D;
    /* Ét trin over brødteksten og derfor sat fast: knappen er sidens hovedhandling, og den
       skal ikke skrumpe sammen med den tekst, den står under. */
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: background-color 160ms ease, transform 160ms ease;
}

.plan-buy:hover {
    background: #D9BC7F;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Tilføjelsen om tabletten. Står efter listen og før knappen, adskilt af sin egen streg,
   så den ikke læses som endnu et punkt i det, pakken indeholder. */
.plan-addon {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: #93A6C2;
}

.plan-addon strong {
    color: #FFFFFF;
    font-weight: 600;
}

.plan-footnote {
    margin: 24px 0 0;
    font-size: var(--fs-xs);
    font-style: italic;
    line-height: 1.5;
    color: #8A97A8;
}

/* Under 900 px bliver tre trin til én spalte og de to priskort ligeså. Tre kort ved siden af
   hinanden på en telefon giver spalter på 100 px, hvor hvert ord får sin egen linje. */
/* Trinene stod som tre kort i fuld bredde og 110 px høje - en meget bred, meget tom kasse.
   Tre spalter giver 224 px hver på en iPad i højformat, og det er nok til fire linjers
   tekst. Priskortene kan også være ved siden af hinanden dernede (348 px hver). */
@media (max-width: 1000px) {
    .getstarted {
        padding: 64px 20px;
    }

    .step-cards {
        margin-top: 36px;
        gap: 16px;
    }

    .step-cards li {
        padding: 24px 20px 26px;
    }

    .step-cards li::before {
        width: 40px;
        height: 40px;
        margin-bottom: 18px;
    }

    .plans {
        max-width: none;
        gap: 16px;
    }

    .plan {
        padding: 26px 22px 28px;
    }
}

@media (max-width: 700px) {
    .getstarted {
        padding: 56px 20px;
    }

    .step-cards,
    .plans {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .plans {
        max-width: 460px;
    }
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.public-footer {
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
}

/* Var flex med space-between og flex-wrap. Så snart der ikke var plads til begge blokke på
   én linje, faldt linkene ned under brandet og efterlod en tom højreside i halvdelen af
   fodens højde. Et gitter med to spalter holder dem side om side helt ned til 700 px, hvor
   der faktisk ikke er plads mere - og bredden følger nu resten af siden (1180, ikke 1100). */
.public-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 40px;
    align-items: start;
}


.public-footer-brand {
    max-width: 320px;
}

.public-footer-brand .brand-logo {
    height: 30px;
    margin-bottom: 12px;
}

.public-footer-brand p {
    font-size: 13px;
    line-height: 1.6;
}

/* max-content på spalterne, så de er præcis så brede som deres længste link og ikke
   strækkes ud af gitteret. "Help" har kun ét punkt, efter support-siden røg ud. */
.public-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, max-content));
    gap: 48px;
}

/* Først her er der for lidt plads til brand-blokken og linkene ved siden af hinanden.
   På en iPad i højformat (768) er der rigeligt - derfor 700 og ikke 900. */
@media (max-width: 700px) {
    .public-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}



.public-footer-links h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.public-footer-links a {
    display: block;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 8px;
}

.public-footer-links a:hover {
    color: var(--accent);
}

.public-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    text-align: center;
    font-size: 12px;
}

/* ── Support-side ───────────────────────────────────────────────────────── */

.support-hero {
    padding: 56px 24px 24px;
    text-align: center;
}

.support-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}

.support-hero h1 {
    font-size: 34px;
    margin: 0 0 12px;
}

.support-body {
    padding: 24px 24px 72px;
}

.support-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 32px;
    align-items: start;
}

.support-contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contact-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.contact-hours {
    font-size: 12px;
}

.support-form-panel {
    margin-top: 0;
}

/* ── Responsivt (offentligt site) ───────────────────────────────────────── */

@media (max-width: 900px) {
    .hero--photo {
        min-height: 36vh;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* AIS-kortene går til én kolonne allerede her, ikke to som .feature-grid: teksten i dem er
       et par linjer længere, og to smalle spalter blev til høje, tynde søjler. */
    .ais-grid {
        grid-template-columns: 1fr;
    }

    .ais-shots {
        grid-template-columns: 1fr;
    }

    /* Lavere rammer på små skærme - 420px fylder næsten en hel telefonskærm i højden. */
    .shot-frame,
    .ais-shot-empty {
        height: 320px;
    }

    /* Den brede har allerede height:auto - kun bundmargenen strammes på små skærme. */
    .shot-frame--wide {
        margin-bottom: 28px;
    }

    /* Begge split-visninger til én spalte: teksten skal stå FØR billedet, hvilket den gør af
       sig selv når gitteret falder sammen, da tekst-blokken står først i markup'en. */
    .marina-split,
    .watch-split {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* I én spalte skal teksten ALTID stå først - ombytningen ovenfor er en ren
       skrivebords-variation og giver ingen mening når alt ligger under hinanden. */
    .marina-split--reverse .marina-split-text {
        order: 1;
    }

    .marina-split--reverse .ais-shot {
        order: 2;
    }

    .beta-points {
        grid-template-columns: 1fr;
    }



    .step-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .support-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 620px) {
    /* Ingen h1-undtagelse laengere - --fs-display er flydende og skalerer selv. */

    .ais,
    .charts,
    .marinas-promo,
    .lights,
    .watch,
    .beta {
        padding: 56px 20px;
    }

    .ais-callout {
        padding: 22px 20px;
    }

    .hero--photo {
        min-height: 26vh;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .public-footer-links {
        gap: 32px;
    }
}

/* ── Responsivt (sidebar/dashboard) ─────────────────────────────────────── */

@media (max-width: 900px) {
    .app-shell {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
    }

    .sidebar-top {
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
        gap: 16px;
    }

    .sidebar-boat-card {
        display: none;
    }

    .sidebar-nav {
        flex-direction: row;
    }

    .sidebar-nav-label {
        display: none;
    }

    .sidebar-bottom {
        border-top: none;
        border-left: 1px solid var(--border);
        flex-direction: row;
        align-items: center;
        padding: 12px 16px;
    }

    .sidebar-user-email {
        display: none;
    }

    .sidebar-logout-form button {
        width: auto;
    }

    .metric-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-row-2,
    .dash-row-3 {
        grid-template-columns: 1fr;
    }

    .help-fab {
        display: none;
    }
}

@media (max-width: 520px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .content-header {
        flex-direction: column;
    }

    .page {
        padding: 20px 16px 48px;
    }
}

/* ── Butikken: kurv, checkout, betaling, kvittering ─────────────────────────────────
   Siderne bruger _PublicLayout, som er mørk - modsat de lyse sektioner på forsiden. Farverne
   herunder er derfor det mørke sæt og ikke en gentagelse af købssektionens. */
.shop {
    /* 132 px foroven og ikke 88: topbjælken er position:fixed og ligger hen over indholdet, så
       uden det ville overskriften starte bag menuen. */
    padding: 132px 24px 88px;
    background: var(--bg);
    min-height: 70vh;
}

.shop-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.shop-inner--narrow {
    max-width: 720px;
}

.shop-title {
    margin: 0 0 8px;
    text-transform: none;
    text-align: left;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.026em;
    color: var(--text);
}

.shop-lede {
    margin: 0 0 32px;
    font-size: var(--fs-lede);
    color: var(--text-muted);
}

.shop-empty {
    margin-top: 24px;
    font-size: var(--fs-lede);
    color: var(--text-muted);
}

/* ── Kurven ────────────────────────────────────────────────────────────────────── */
.basket {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 40px;
    align-items: start;
}

.basket-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.basket-line h2 {
    margin: 0;
    text-transform: none;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0;
}

.basket-line-desc {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Forklaringen på en linje, kunden ikke selv har lagt i. Gul og ikke rød: det er en oplysning,
   ikke en fejl. */
.basket-line-locked {
    margin: 10px 0 0;
    font-size: var(--fs-sm);
    color: #D9B54F;
}

.basket-line-qty .qty-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.basket-line-qty input {
    width: 68px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
}

.basket-line-qty-fixed {
    display: inline-block;
    padding: 8px 14px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.basket-line-price {
    text-align: right;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.basket-remove {
    display: block;
    margin: 8px 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

.basket-remove:hover {
    color: var(--error);
}

.basket-summary {
    padding: 26px 24px 28px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.basket-summary h2,
.checkout-summary h2 {
    margin: 0 0 18px;
    text-transform: none;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0;
}

.basket-totals {
    margin: 0;
    display: grid;
    gap: 12px;
}

.basket-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.basket-totals dt {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.basket-totals dd {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-sm);
}

.basket-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.basket-total dt,
.basket-total dd {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text);
}

.basket-vat {
    margin: 14px 0 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.basket-checkout {
    display: block;
    margin-top: 22px;
    text-align: center;
}

.basket-suggest {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.basket-suggest h2 {
    margin: 0 0 16px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: var(--text);
    letter-spacing: 0;
}

.basket-suggest ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.basket-suggest li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.basket-suggest-name {
    flex: 1;
    color: var(--text);
    font-size: var(--fs-sm);
}

.basket-suggest-price {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* ── Checkout ──────────────────────────────────────────────────────────────────── */
.checkout {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 40px;
    align-items: start;
}

.checkout-step {
    margin: 0 0 26px;
    padding: 24px 24px 26px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* Trinnummeret er et tal i en cirkel og ikke bare "1." - det gør det til en rækkefølge, man
   kan se sig igennem, frem for tre kasser der tilfældigvis står under hinanden. */
.checkout-step legend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--text);
}

.checkout-step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #06121A;
    font-size: var(--fs-sm);
    font-weight: 700;
}

.checkout-step-note {
    margin: 0 0 18px;
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

.checkout-step label {
    display: block;
    margin: 16px 0 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.checkout-step input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text);
    font-size: var(--fs-body);
}

.checkout-step input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.checkout-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

.checkout-summary {
    padding: 26px 24px 28px;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    position: sticky;
    top: 96px;
}

.checkout-lines {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.checkout-lines li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--fs-sm);
    color: var(--text);
}

.checkout-line-qty {
    color: var(--text-muted);
}

.checkout-line-price {
    white-space: nowrap;
    color: var(--text-muted);
}

.checkout-back {
    display: inline-block;
    margin-top: 18px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* ── Betaling og kvittering ────────────────────────────────────────────────────── */
.pay-pending {
    margin: 28px 0;
    padding: 24px 26px;
    border-radius: 14px;
    background: rgba(217, 181, 79, 0.10);
    border: 1px solid rgba(217, 181, 79, 0.35);
}

.pay-pending h2 {
    margin: 0 0 10px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: #D9B54F;
    letter-spacing: 0;
}

.pay-pending p {
    margin: 0 0 10px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.pay-pending-note {
    font-weight: 600;
}

/* Udviklingsværktøjet skal SE ud som et udviklingsværktøj. Stribet baggrund og stiplet kant, så
   ingen kan tage fejl af det og en rigtig betalingsknap - heller ikke på et skærmbillede i en
   supportsag. */
.pay-dev {
    margin: 28px 0;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px dashed var(--error);
    background: repeating-linear-gradient(
        45deg,
        rgba(212, 95, 95, 0.06),
        rgba(212, 95, 95, 0.06) 10px,
        transparent 10px,
        transparent 20px);
}

.pay-dev h2 {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--fs-xs);
    color: var(--error);
}

.pay-dev p {
    margin: 0 0 14px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.receipt-license {
    margin: 28px 0;
    padding: 24px 26px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--accent);
}

.receipt-license h2 {
    margin: 0 0 12px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: var(--text);
    letter-spacing: 0;
}

.receipt-license-note {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
}

.receipt-address {
    margin: 28px 0;
}

.receipt-address h2 {
    margin: 0 0 8px;
    text-transform: none;
    font-size: var(--fs-h3);
    color: var(--text);
    letter-spacing: 0;
}

.receipt-address p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-muted);
}

/* ── Kurv i topbjælken ─────────────────────────────────────────────────────────── */
/* Kompakt: 40x40 og ikke en knap med tekst. Se kommentaren ved markuppen i _PublicLayout -
   bredden her er det, der afgør, om menuen kan stå på én linje. */
.basket-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text);
}

.basket-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

/* Tallet ligger OVEN PÅ ikonet i stedet for ved siden af - ellers ville det brede knappen ud
   igen, og det var netop dét, der var problemet. */
.basket-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #06121A;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* "Buy now" er en button i en form nu og ikke et link - knappen arver ikke browserens
   standardudseende, og formularen må ikke lægge afstand ind under kortet. */
.plan-buy-form {
    margin: 0;
    display: block;
}

button.plan-buy {
    display: block;
    width: 100%;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.btn-sm {
    padding: 8px 14px;
    font-size: var(--fs-sm);
}

/* Etiketter kun til skærmlæsere. Ikke display:none - det ville også skjule dem for
   skærmlæseren, og så var etiketten der lige så godt ikke. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .shop {
        padding: 108px 20px 64px;
    }

    .basket,
    .checkout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .checkout-summary {
        position: static;
    }

    .basket-line {
        grid-template-columns: 1fr auto;
        gap: 12px 16px;
    }

    .basket-line-main {
        grid-column: 1 / -1;
    }
}

/* Kontaktblokken i footeren. Adressen skal kunne læses som en adresse - altså med linjeskift
   og ikke som en sætning - og telefon/mail skal kunne trykkes på en telefon. */
.contact-details {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.8;
    color: var(--text-muted);
}

.contact-details strong {
    color: var(--text);
    font-weight: 600;
}

.contact-details a {
    color: var(--text-muted);
}

.contact-details a:hover {
    color: var(--accent);
}

.public-footer-contact {
    min-width: 200px;
}

/* ── Handelsbetingelser ─────────────────────────────────────────────────────────── */
.legal {
    padding: 132px 24px 88px;
    background: var(--bg);
}

.legal-inner {
    max-width: 760px;
    margin: 0 auto;
}

.legal-meta {
    margin: 0 0 36px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Nulstiller den globale h2-regel, der gør alle h2'er små, versale og dæmpede - i et
   juridisk dokument skal overskrifterne kunne skimmes for at finde det rigtige afsnit. */
.legal-inner h2 {
    margin: 40px 0 12px;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--fs-h3);
    font-weight: 600;
    color: var(--text);
}

.legal-inner p {
    margin: 0 0 14px;
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 68ch;
}

.legal-inner strong {
    color: var(--text);
}

.legal-inner .contact-details {
    margin-bottom: 18px;
}

/* ── Betalingsmidler ────────────────────────────────────────────────────────────── */
.pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

/* Hvid bund på hver mærkat, uanset hvor rækken står. Kortselskabernes rigtige mærker er
   tegnet til at ligge på hvidt, så når de bliver skiftet ind, passer rammen allerede. */
.pay-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid #D8E0EC;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1A2436;
    white-space: nowrap;
}

.pay-mark--visa      { color: #1A1F71; font-style: italic; letter-spacing: 0.06em; }
.pay-mark--mc        { color: #C8102E; }
.pay-mark--dankort   { color: #0F4C9C; }
.pay-mark--apple     { color: #000000; }
.pay-mark--google    { color: #3C4043; }
.pay-mark--mobilepay { color: #5A78FF; }

@media (max-width: 900px) {
    .legal {
        padding: 108px 20px 64px;
    }
}

/* Accept-fluebenet. Hele linjen er klikbar (label om både felt og tekst), fordi et 13x13
   afkrydsningsfelt er svært at ramme på en telefon. */
.checkout-accept {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 24px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    cursor: pointer;
}

.checkout-accept input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.checkout-accept span {
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

.checkout-accept a {
    color: var(--accent);
    text-decoration: underline;
}