/* Anton (Google Fonts) — applied to all <h2> below.
   @import must stay at the very top of the file to be valid. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

html {
  font-size: 14px;
}

.anton-heading {
  font-family: 'Anton', sans-serif;
  font-size: 24pt;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: normal;
}

.btn-indigo {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}
.btn-indigo:hover,
.btn-indigo:focus {
    background-color: #4338ca;
    border-color: #4338ca;
    color: #fff;
}
.btn-indigo:active,
.btn-indigo.active,
.show > .btn-indigo.dropdown-toggle {
    background-color: #3730a3;
    border-color: #3730a3;
    color: #fff;
}
.btn-indigo:focus {
    box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.5);
}
.btn-indigo:disabled,
.btn-indigo.disabled {
    background-color: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
    opacity: 0.65;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* App colour tokens. Light values below; dark values in the
   "Dark mode" section further down ([data-bs-theme="dark"]). */
:root {
  --app-bg: #f5f7fb;          /* page background */
  --app-surface: #ffffff;     /* cards */
  --app-border: #e6e8ee;      /* card borders */
  --app-divider: #f0f0f3;     /* card header dividers */
  --app-weekend: #f5f5f5;     /* weekend columns in the calendar */
}

body {
  margin-bottom: 60px;
  background-color: var(--app-bg);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.site-title {
  font-family: 'Gochi Hand', cursive;
  font-size: 1.75rem;
  color: #00aff0;
  margin-left: 10px;
}

/* Calendar / FullCalendar responsive tweaks */
#calendar {
  max-width: 100%;
}

.fc .fc-toolbar.fc-header-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fc .fc-toolbar-title {
  font-size: 1.25rem;
}

@media (max-width: 575.98px) {
  .fc .fc-toolbar.fc-header-toolbar {
    justify-content: center;
  }

  .fc .fc-toolbar-title {
    font-size: 1.05rem;
  }

  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    font-size: 0.8rem;
  }
}

/* Keep page content from overflowing horizontally on small screens */
.container,
main {
  max-width: 100%;
  overflow-x: hidden;
}

/* FullCalendar buttons: light instead of primary blue.
   The bootstrap5 theme renders the buttons as Bootstrap .btn-primary, so we
   override Bootstrap's button CSS variables. This handles every state
   (default / hover / active / disabled) without specificity wars or !important. */
.fc .btn-primary {
  --bs-btn-color: #212529;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #ced4da;
  --bs-btn-hover-color: #212529;
  --bs-btn-hover-bg: #e2e6ea;
  --bs-btn-hover-border-color: #dae0e5;
  --bs-btn-active-color: #212529;
  --bs-btn-active-bg: #dae0e5;
  --bs-btn-active-border-color: #d3d9df;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #ced4da;
  --bs-btn-focus-shadow-rgb: 216, 217, 219;
  /* .btn-sm sizing (guaranteed even if the JS class add misses a re-render) */
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

/* Fallback for the standard (non-bootstrap) FullCalendar theme. */
.fc .fc-button-primary {
  --fc-button-bg-color: #f8f9fa;
  --fc-button-border-color: #ced4da;
  --fc-button-text-color: #212529;
  --fc-button-hover-bg-color: #e2e6ea;
  --fc-button-hover-border-color: #dae0e5;
  --fc-button-active-bg-color: #dae0e5;
  --fc-button-active-border-color: #d3d9df;
  --fc-button-active-text-color: #212529;
}

/* =======================================================================
   Dark mode (portal only). The toggle in _Layout sets data-bs-theme on <html>;
   Bootstrap 5.3 handles its own components, this covers our custom colours.
   ======================================================================= */
[data-bs-theme="dark"] {
  --app-bg: #12161c;
  --app-surface: #1b2129;
  --app-border: #2a313b;
  --app-divider: #262c35;
  --app-weekend: rgba(255, 255, 255, .03);
  /* Bootstrap surfaces (cards, modals, inputs, tables) use the same tone as our cards. */
  --bs-body-bg: #1b2129;
  --bs-body-bg-rgb: 27, 33, 41;
  --bs-secondary-bg: #232a33;
  --bs-tertiary-bg: #20262f;
  --bs-border-color: #2f3742;
}
[data-bs-theme="dark"] body { background-color: var(--app-bg); }

/* Focus ring: the light theme uses a white inner ring. */
[data-bs-theme="dark"] .btn:focus,
[data-bs-theme="dark"] .btn:active:focus,
[data-bs-theme="dark"] .btn-link.nav-link:focus,
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--app-bg), 0 0 0 0.25rem #258cfb;
}

/* Light buttons (Logout, calendar toolbar, etc.) become subtle dark buttons. */
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .fc .btn-primary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: #262d37;
  --bs-btn-border-color: #353d49;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #2f3742;
  --bs-btn-hover-border-color: #3d4654;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #353d49;
  --bs-btn-active-border-color: #434c5a;
  --bs-btn-disabled-color: #8a93a0;
  --bs-btn-disabled-bg: #262d37;
  --bs-btn-disabled-border-color: #353d49;
  --bs-btn-focus-shadow-rgb: 60, 70, 84;
}

/* FullCalendar */
[data-bs-theme="dark"] .fc {
  --fc-border-color: var(--app-border);
  --fc-page-bg-color: var(--app-surface);
  --fc-neutral-bg-color: rgba(255, 255, 255, .04);
  --fc-list-event-hover-bg-color: rgba(255, 255, 255, .06);
  --fc-today-bg-color: rgba(0, 175, 240, .12);
  --fc-now-indicator-color: #f46a6a;
  --fc-button-bg-color: #262d37;
  --fc-button-border-color: #353d49;
  --fc-button-text-color: var(--bs-body-color);
  --fc-button-hover-bg-color: #2f3742;
  --fc-button-hover-border-color: #3d4654;
  --fc-button-active-bg-color: #353d49;
  --fc-button-active-border-color: #434c5a;
}

/* FullCalendar's Bootstrap 5 theme hard-codes light grey borders and shading. */
[data-bs-theme="dark"] .fc-theme-bootstrap5 .fc-scrollgrid,
[data-bs-theme="dark"] .fc-theme-bootstrap5 td,
[data-bs-theme="dark"] .fc-theme-bootstrap5 th,
[data-bs-theme="dark"] .fc-theme-bootstrap5 .fc-timegrid-divider,
[data-bs-theme="dark"] .fc-theme-bootstrap5 .fc-list,
[data-bs-theme="dark"] .fc-theme-bootstrap5 .fc-list-day-cushion {
  border-color: var(--app-border);
}
[data-bs-theme="dark"] .fc-theme-bootstrap5-shaded {
  background-color: rgba(255, 255, 255, .05);
}

/* Main navigation: highlight the section you're in. */
.navbar .main-nav-link {
  border-radius: 6px;
  padding-left: .75rem !important;
  padding-right: .75rem !important;
  transition: color .15s, background-color .15s;
}
.navbar .main-nav-link:hover { color: #0093cb !important; }
.navbar .main-nav-link.active {
  color: #0093cb;
  background-color: rgba(0, 175, 240, .10);
  font-weight: 600;
}
[data-bs-theme="dark"] .navbar .main-nav-link.active,
[data-bs-theme="dark"] .navbar .main-nav-link:hover {
  color: #3cc6f7 !important;
}
[data-bs-theme="dark"] .navbar .main-nav-link.active { background-color: rgba(0, 175, 240, .16); }
@media (min-width: 576px) {
  .navbar .main-nav-link { margin-right: .15rem; }
}

/* Pagination (DataTables etc.): use the app accent instead of Bootstrap blue. */
.pagination {
  --bs-pagination-active-bg: #00aff0;
  --bs-pagination-active-border-color: #00aff0;
  --bs-pagination-active-color: #ffffff;
  --bs-pagination-hover-color: #0093cb;
  --bs-pagination-focus-color: #0093cb;
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0, 175, 240, .25);
}

/* =======================================================================
   Checkboxes, radios and switches (all portal pages)
   Larger, rounded, app accent colour, soft focus ring, label lined up.
   ======================================================================= */
.form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-top: .15em;
  border: 1.5px solid #c3c9d2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, background-position .2s ease;
}
.form-check-input[type="checkbox"] { border-radius: 5px; }
.form-check-input:hover { border-color: #00aff0; }
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #00aff0;
  border-color: #00aff0;
}
.form-check-input:checked:hover { background-color: #0093cb; border-color: #0093cb; }
/* Soft accent ring for keyboard focus only (overrides the generic focus ring above). */
.form-check-input:focus,
.form-check-input:active:focus {
  border-color: #00aff0;
  box-shadow: none;
}
.form-check-input:focus-visible {
  box-shadow: 0 0 0 .22rem rgba(0, 175, 240, .25);
}
.form-check-input:disabled { cursor: not-allowed; }
.form-check-input:disabled ~ .form-check-label { cursor: not-allowed; }

/* Checkbox + label on one line, label clickable. */
.form-check:not(.form-switch):not(.form-check-inline) {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding-left: 0;
}
.form-check:not(.form-switch):not(.form-check-inline) .form-check-input {
  float: none;
  margin: 0;
  flex-shrink: 0;
}
.form-check-label {
  cursor: pointer;
  user-select: none;
}

/* Switches (on/off toggles), same look everywhere: grey track, white knob
   with a soft shadow, accent blue when on. The label turns blue when on. */
.form-switch {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-left: 0;
  min-height: 22px;
}
.form-switch .form-check-input,
.form-switch .form-check-input:focus,
.form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-11 -11 22 22'%3e%3cdefs%3e%3cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3e%3cfeDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%23000' flood-opacity='.25'/%3e%3c/filter%3e%3c/defs%3e%3ccircle r='8' fill='%23fff' filter='url(%23s)'/%3e%3c/svg%3e");
}
.form-switch .form-check-input {
  float: none;
  margin: 0;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background-color: #d5d9df;
  background-size: auto 100%;
  background-position: left center;
}
.form-switch .form-check-input:hover { background-color: #c8cdd4; }
.form-switch .form-check-input:checked {
  background-color: #00aff0;
  background-position: right center;
}
.form-switch .form-check-input:checked:hover { background-color: #0093cb; }
.form-switch .form-check-label {
  color: #74788d;
  font-weight: 500;
  transition: color .15s ease;
}
.form-switch .form-check-input:checked + .form-check-label { color: #0093cb; }
[data-bs-theme="dark"] .form-switch .form-check-input { background-color: #3a424e; }
[data-bs-theme="dark"] .form-switch .form-check-input:hover { background-color: #454e5b; }
[data-bs-theme="dark"] .form-switch .form-check-input:checked { background-color: #00aff0; }
[data-bs-theme="dark"] .form-switch .form-check-label { color: #98a2b3; }
[data-bs-theme="dark"] .form-switch .form-check-input:checked + .form-check-label { color: #3cc6f7; }

/* Dark mode */
[data-bs-theme="dark"] .form-check-input {
  background-color: #232a33;
  border-color: #4a5361;
}
[data-bs-theme="dark"] .form-check-input:hover { border-color: #3cc6f7; }
[data-bs-theme="dark"] .form-check-input:checked,
[data-bs-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
  background-color: #00aff0;
  border-color: #00aff0;
}
[data-bs-theme="dark"] .form-check-input:focus,
[data-bs-theme="dark"] .form-check-input:active:focus { box-shadow: none; }
[data-bs-theme="dark"] .form-check-input:focus-visible { box-shadow: 0 0 0 .22rem rgba(0, 175, 240, .3); }

/* Theme toggle in the top navigation: show the icon for the theme you'd switch to. */
.theme-toggle {
  background: none;
  border: 0;
  font-size: 1.1rem;
  line-height: 1;
}
.theme-toggle .theme-icon-to-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-to-light { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-to-dark { display: none; }

/* =======================================================================
   Public landing page (_LayoutPublic + Home/Index) - layout B, "Mørk top"
   Everything here is scoped to .public-html / .public-page, so the
   signed-in portal chrome is untouched.
   ======================================================================= */

/* The app runs at 14px base (16px from 768px up). The landing page carries a
   lot of small type, so pin it at 16px everywhere. */
html.public-html {
    font-size: 16px;
}

/* site.css gives body a 60px bottom margin and the grey app background for the
   absolutely-positioned portal footer. The landing footer is in flow. */
body.public-page {
    margin-bottom: 0;
    background-color: #ffffff;

    /* How far the hero mock hangs below the dark band. Declared here so both
       #hero (which pulls the mock down) and #vaerdi (which pads to clear it)
       read the same number, and the breakpoints only override this one value. */
    --overhang: 9.5rem;
}

@media (max-width: 991.98px) {
    body.public-page {
        --overhang: 6rem;
    }
}

@media (max-width: 575.98px) {
    body.public-page {
        --overhang: 4rem;
    }
}

/* site.css sets `overflow-x: hidden` on .container and main to stop horizontal
   overflow on small screens. A single `hidden` axis makes the other axis
   compute to `auto`, which turns <main> into a scroll container: anchor links
   (#funktioner, #priser) then scroll <main> instead of the window, and
   scroll-margin-top stops working. `clip` prevents the horizontal overflow
   without creating a scroll container. */
.public-page main,
.public-page .container {
    overflow-x: clip;
    overflow-y: visible;
}

/* Bootstrap's .container opens to 1140px at xl and 1320px at xxl, a wider
   measure than this page reads well at, so cap it for the public pages.
   No media query on purpose: site.css already sets `.container { max-width:
   100% }` app-wide, which beats Bootstrap's tiers, so a min-width query here
   would snap the content from full-bleed to 1100px at the breakpoint. A plain
   cap clamps instead — 1100px when there is room, full width below that.
   The navbar uses .container-fluid, so the header still spans the full width. */
.public-page .container {
    max-width: 1100px;
}

/* ---------- Dark header (opt-in via ViewData["HeaderOnDark"]) ---------- */
/* Solid rather than transparent: the header is sticky, so once the hero band
   has scrolled past it still needs its own ground to stay readable. */
.navbar.public-header-dark {
    background-color: #0c447c;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.navbar.public-header-dark .site-title {
    color: #ffffff;
}

.public-navlink-dark {
    color: #c8ddf1;
}

.public-navlink-dark:hover,
.public-navlink-dark:focus {
    color: #ffffff;
}

/* ---------- Buttons (.btn-primary is scoped to _Layout.cshtml.css) ---------- */
.btn-brand {
    background-color: #00aff0;
    border-color: #00aff0;
    color: #ffffff;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: #0095cc;
    border-color: #0095cc;
    color: #ffffff;
}

.btn-soft {
    background-color: #eef4fa;
    border-color: #dce9f6;
    color: #185fa5;
}

.btn-soft:hover,
.btn-soft:focus {
    background-color: #dce9f6;
    border-color: #b5d4f4;
    color: #0c447c;
}

.public-page .btn-xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: .5rem;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}

.public-page .btn-xl:hover {
    transform: translateY(-1px);
}

.public-page .btn-w {
    width: 100%;
}

/* ---------- Section furniture ---------- */
.public-page .eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #0089bd;
}

.public-page .section-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    letter-spacing: .01em;
    color: #0c447c;
    margin: .5rem 0 0;
}

.public-page .section-lead {
    color: #6b7280;
    font-size: 1.05rem;
    margin: .75rem 0 0;
    max-width: 44rem;
}

.public-page .section-head {
    margin-bottom: 2.25rem;
}

.public-page .section-head.center {
    text-align: center;
    max-width: 44rem;
    margin-inline: auto;
}

.public-page .section-head.center .section-lead {
    margin-inline: auto;
}

/* ---------- Scroll-reveal (opt-in per element) ---------- */
.public-page .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
                transform .7s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}

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

@media (prefers-reduced-motion: reduce) {
    .public-page .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ---------- Hero: the dark band ---------- */
/* The mock below hangs 150px past the band's bottom edge; #vaerdi adds matching
   top padding so the two never collide. Change them together. */
#hero.hero-band {
    background: #0c447c;
    padding-block: clamp(2rem, 4vw, 3.5rem) 1.5rem;
}

.hero-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    line-height: 1.05;
    letter-spacing: .01em;
    color: #ffffff;
    margin: .7rem 0 0;
}

.hero-lead {
    font-size: 1.1rem;
    color: #b8d5ee;
    margin: 1rem 0 0;
    max-width: 34rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #ffffff;
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .85rem;
    font-weight: 600;
}

.hero-badge i {
    color: #00aff0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.public-page .ticks {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.4rem;
}

.public-page .ticks li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .92rem;
}

.hero-band .ticks li {
    color: #b8d5ee;
}

.hero-band .ticks i {
    color: #00aff0;
    flex: none;
}

/* ---------- Kinetic typography ---------- */
/* One orchestrated moment in the hero, CSS only so there is no flash before a
   script runs and it still works with JS off. Both effects collapse to their
   finished state under prefers-reduced-motion. */

/* The headline rises a word at a time. --kw is the word index, set inline by
   the view; 70ms apart is fast enough not to feel like a loading screen. */
.hero-title .kw {
    display: inline-block;
    animation: kwRise .62s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--kw, 0) * 70ms);
}

@keyframes kwRise {
    from {
        opacity: 0;
        transform: translateY(.45em) rotate(1.2deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.kinetic {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    margin-top: 1.6rem;
}

.kinetic-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #7fb4dd;
    white-space: nowrap;
}

/* All three phrases share one grid cell, so the cell is as wide as the longest
   of them in whichever language is active and nothing shifts as they swap. */
.kinetic-stack {
    display: grid;
}

.kinetic-stack > span {
    grid-area: 1 / 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0;
    /* `forwards`, not `both`: with `backwards` the delayed phrases would show
       their first keyframe before their turn and all three would stack up at
       load. Held hidden by the opacity above until each one starts. */
    animation: kineticCycle 9s linear infinite forwards;
}

.kinetic-stack > span:nth-child(2) { animation-delay: 3s; }
.kinetic-stack > span:nth-child(3) { animation-delay: 6s; }

@keyframes kineticCycle {
    0%, 28% {
        opacity: 1;
        transform: none;
    }
    34%, 96% {
        opacity: 0;
        transform: translateY(-.35em);
    }
    100% {
        opacity: 0;
        transform: translateY(.45em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title .kw {
        animation: none;
    }

    .kinetic-stack > span {
        animation: none;
        opacity: 0;
    }

    .kinetic-stack > span:first-child {
        opacity: 1;
    }
}

/* ---------- Hero mock: browser frame + SMS phone, overlapping the band ---------- */
.hero-mock {
    display: grid;
    grid-template-columns: 1fr 9.5rem;
    gap: .9rem;
    align-items: start;
    /* The band's own 1.5rem bottom padding is added back, so what is left
       below the band edge is exactly --overhang. */
    margin-bottom: calc(-1 * (var(--overhang) + 1.5rem));
}

.hero-frame {
    background: #ffffff;
    border: 1px solid #b5d4f4;
    border-radius: .9rem;
    overflow: hidden;
    box-shadow: 0 24px 48px -24px rgba(4, 27, 48, .7);
}

.hero-frame-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .8rem;
    background: linear-gradient(180deg, #f7fbfe, #eaf3fb);
    border-bottom: 1px solid #dce9f6;
}

.hero-frame-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #cfdeed;
    flex: none;
}

.hero-frame-url {
    flex: 1;
    margin-left: .4rem;
    background: #ffffff;
    border: 1px solid #dce9f6;
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .68rem;
    color: #7e93a8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-frame-body {
    padding: .8rem;
}

/* ---------- Mock: mini calendar ---------- */
.mini-cal {
    border: 1px solid #e2ebf3;
    border-radius: .5rem;
    overflow: hidden;
    background: #ffffff;
}

.mini-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    background: #f6fafd;
    border-bottom: 1px solid #e2ebf3;
    font-size: .8rem;
    font-weight: 600;
    color: #185fa5;
}

.mini-cal-views {
    display: flex;
    gap: .2rem;
}

.mini-cal-views span {
    font-size: .66rem;
    font-weight: 600;
    color: #7e93a8;
    background: #ffffff;
    border: 1px solid #dce9f6;
    border-radius: .25rem;
    padding: 0 .35rem;
}

.mini-cal-views span.on {
    background: #00aff0;
    border-color: #00aff0;
    color: #ffffff;
}

.mini-cal-dow,
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.mini-cal-dow {
    border-bottom: 1px solid #eef4fa;
}

.mini-cal-dow span {
    text-align: center;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #9db1c4;
    padding: .3rem 0;
}

.mini-cal-day {
    /* The hero row is bottom-aligned so the mock's negative margin gives a
       predictable overhang; that only looks right if the mock is about as tall
       as the headline column, otherwise dark band is left empty above it.
       Roomy rows also suit a hero-sized calendar. Reduced below 992px, where
       the columns stack and height no longer has to match anything. */
    min-height: 5.4rem;
    border-right: 1px solid #f2f7fb;
    border-bottom: 1px solid #f2f7fb;
    padding: .15rem .2rem;
    position: relative;
}

.mini-cal-day:nth-child(7n) {
    border-right: 0;
}

.mini-cal-day em {
    font-style: normal;
    font-size: .62rem;
    color: #9db1c4;
}

.mini-cal-day.muted {
    background: #fbfdff;
}

.appt-chip {
    display: block;
    font-size: .6rem;
    line-height: 1.5;
    color: #ffffff;
    border-radius: .2rem;
    padding: 0 .25rem;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appt-chip.c1 { background: #00aff0; }
.appt-chip.c2 { background: #22c55e; }
.appt-chip.c3 { background: #f59e0b; }
.appt-chip.c4 { background: #8b5cf6; }

.appt-chip.dragging {
    transform: rotate(-4deg) scale(1.08);
    box-shadow: 0 8px 14px -6px rgba(12, 68, 124, .7);
    position: relative;
    z-index: 2;
}

.drop-slot {
    display: block;
    border: 1.5px dashed #00aff0;
    background: rgba(0, 175, 240, .09);
    border-radius: .2rem;
    height: .9rem;
    margin-top: .15rem;
}

.drag-cursor {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    font-size: .7rem;
    color: #0c447c;
}

/* ---------- Mock: SMS phone ---------- */
.sms-phone {
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 1rem;
    background: #f6fafd;
    padding: .7rem .55rem;
    display: grid;
    gap: .45rem;
    align-content: start;
}

.sms-notch {
    width: 2.2rem;
    height: .22rem;
    border-radius: 999px;
    background: #cfdeed;
    margin: 0 auto;
}

.sms-who {
    font-size: .62rem;
    color: #9db1c4;
    text-align: center;
}

.sms-bubble {
    background: #ffffff;
    border: 1px solid #e2ebf3;
    border-radius: .6rem .6rem .6rem .15rem;
    padding: .4rem .5rem;
    font-size: .68rem;
    line-height: 1.4;
    color: #37506a;
}

.sms-bubble strong {
    display: block;
    font-size: .64rem;
    color: #0c447c;
    margin-bottom: .1rem;
}

/* ---------- Shared icon tile ---------- */
.public-page .fic {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .7rem;
    background: #e6f1fb;
    color: #0089bd;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ---------- Value row (clears the overlapping hero mock) ---------- */
#vaerdi {
    scroll-margin-top: 5rem;
    padding-block: calc(var(--overhang) + clamp(2rem, 4vw, 3.5rem)) clamp(2.5rem, 5vw, 4rem);
}

.vgrid h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #0c447c;
    margin: .8rem 0 0;
}

.vgrid p {
    font-size: .95rem;
    color: #6b7280;
    margin: .35rem 0 0;
}

/* ---------- Features: two columns of hairline-ruled rows ---------- */
#funktioner {
    scroll-margin-top: 5rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background: #f5f7fb;
    border-block: 1px solid #e5edf5;
}

.frows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
}

.fr {
    display: flex;
    gap: .9rem;
    padding-block: 1.15rem;
    border-top: 1px solid #dfe8f1;
}

.fr h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: #0c447c;
    margin: 0;
}

.fr p {
    font-size: .93rem;
    color: #6b7280;
    margin: .2rem 0 0;
}

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

/* ---------- Pricing: one lifted card ---------- */
#priser {
    scroll-margin-top: 5rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    background:
        radial-gradient(ellipse at top, rgba(0, 175, 240, .08) 0%, transparent 60%),
        linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
    border-bottom: 1px solid #e5edf5;
}

/* Two tiers: 199/month on automatic renewal, 249/month without. Cards are
   flex columns stretched to equal height by the grid, with the button pushed
   down by margin-top:auto so both CTAs sit on the same line. Their content is
   near-identical, so equal height costs no dead space. */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 64rem;
    margin-inline: auto;
}

.price-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #b5d4f4;
    border-radius: 1rem;
    padding: 2rem clamp(1.2rem, 2.5vw, 1.9rem);
    text-align: center;
}

/* Any card carrying a ribbon needs the positioning context and the extra top
   padding to clear it; .featured adds the highlight treatment on top. */
.price-card.featured,
.price-card.tagged {
    position: relative;
    padding-top: 2.6rem;
}

.price-card.featured {
    border-color: #00aff0;
    background: linear-gradient(180deg, #e6f1fb 0%, #ffffff 62%);
    box-shadow: 0 30px 60px -34px rgba(12, 68, 124, .5);
}

.price-tag {
    position: absolute;
    top: -.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: #00aff0;
    color: #ffffff;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .85rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Deep blue so the prepaid ribbon reads as a second, distinct claim rather
   than a repeat of the featured card's. */
.price-tag-alt {
    background: #185fa5;
}

.price-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #185fa5;
    margin: 0;
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 1.4rem auto;
    display: grid;
    gap: .55rem;
    text-align: left;
    max-width: 17rem;
}

/* The renewal terms are what separate the two tiers, so they get their own
   icon and weight rather than reading as one more feature tick. */
.price-card li.renew {
    margin-top: .35rem;
    padding-top: .65rem;
    border-top: 1px dashed #d6e4f5;
    font-weight: 600;
    color: #185fa5;
}

.price-card li.renew i {
    color: #185fa5;
}

.price-card .btn-xl {
    margin-top: auto;
}

@media (max-width: 991.98px) {
    /* Straight to one column: two-up would orphan the third card. */
    .price-grid {
        grid-template-columns: 1fr;
        max-width: 32rem;
    }
}

/* ---------- Prepaid period selector (radio + :checked, no JS) ---------- */
.period {
    margin-bottom: .4rem;
}

/* Off-screen but focusable, so the label row is the visible control. */
.period-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.period-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    padding: .25rem;
    margin-top: 1rem;
    background: #eef4fa;
    border: 1px solid #dce9f6;
    border-radius: .6rem;
}

.period-tabs label {
    padding: .35rem .2rem;
    border-radius: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: #5d7387;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    margin: 0;
}

.period-tabs label:hover {
    color: #0c447c;
}

#period-3:checked ~ .period-tabs label[for="period-3"],
#period-6:checked ~ .period-tabs label[for="period-6"],
#period-12:checked ~ .period-tabs label[for="period-12"] {
    background: #00aff0;
    color: #ffffff;
}

/* Keyboard focus has to be visible on the label, since the input is off-screen. */
#period-3:focus-visible ~ .period-tabs label[for="period-3"],
#period-6:focus-visible ~ .period-tabs label[for="period-6"],
#period-12:focus-visible ~ .period-tabs label[for="period-12"] {
    outline: 2px solid #0c447c;
    outline-offset: 2px;
}

.period-panel {
    display: none;
}

#period-3:checked ~ .period-panels .period-panel:nth-child(1),
#period-6:checked ~ .period-panels .period-panel:nth-child(2),
#period-12:checked ~ .period-panels .period-panel:nth-child(3) {
    display: block;
}

.period-sms {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: #e6f1fb;
    color: #185fa5;
    font-size: .85rem;
    font-weight: 600;
}

/* ---------- SMS packages ---------- */
.sms-packs {
    max-width: 26rem;
    margin: 2rem auto 0;
    background: #ffffff;
    border: 1px solid #b5d4f4;
    border-radius: 1rem;
    padding: 1.5rem clamp(1.2rem, 3vw, 1.8rem);
}

.sms-packs h3 {
    font-size: 1.02rem;
    font-weight: 600;
    color: #0c447c;
    margin: 0 0 .9rem;
    text-align: center;
}

.sms-packs table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.sms-packs th,
.sms-packs td {
    padding: .5rem .2rem;
    border-bottom: 1px solid #eef4fa;
    font-size: .95rem;
}

.sms-packs th {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7e93a8;
    border-bottom-color: #dce9f6;
}

.sms-packs th:last-child,
.sms-packs td:last-child {
    text-align: right;
}

.sms-packs td {
    color: #37506a;
}

.sms-packs td:last-child {
    font-weight: 600;
    color: #0c447c;
}

.sms-packs tr:last-child td {
    border-bottom: 0;
}

.price-card li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .95rem;
    color: #37506a;
}

.price-card li i {
    color: #00aff0;
    flex: none;
    margin-top: .15rem;
}

.price-num {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 5.5vw, 4rem);
    line-height: 1;
    letter-spacing: .02em;
    color: #0c447c;
    margin-top: .7rem;
}

.price-num small {
    font-size: .3em;
    font-weight: 600;
    letter-spacing: .02em;
}

.price-period {
    color: #6b7280;
    font-size: .95rem;
}

.price-note {
    font-size: .82rem;
    color: #94a6b6;
    margin: 1.1rem 0 0;
    text-align: center;
}

/* ---------- Public footer ---------- */
.site-footer {
    width: 100%;
    background: #0c447c;
    color: #c8ddf1;
    padding-block: 2.75rem 1.25rem;
    font-size: .9rem;
}

.site-footer a {
    color: #c8ddf1;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer h2 {
    font-family: 'Gochi Hand', cursive;
    font-size: 1.6rem;
    color: #ffffff;
    font-weight: 400;
    margin-bottom: .35rem;
}

.site-footer h3 {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: .9rem;
}

.site-footer .footer-tagline {
    color: #9dc2e4;
    max-width: 22rem;
    margin-bottom: 0;
}

.site-footer address {
    margin-bottom: 0;
    line-height: 1.65;
    font-style: normal;
}

.footer-payment {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #9dc2e4;
    margin-top: 1rem;
}

.footer-payment i {
    color: #ffffff;
    font-size: 1.15rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: 2rem;
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    justify-content: space-between;
    font-size: .82rem;
    color: #9dc2e4;
}

/* ---------- Narrow screens ---------- */
/* The overlap itself comes from --overhang; only sizing changes here. */
@media (max-width: 991.98px) {
    .mini-cal-day {
        min-height: 3rem;
    }
}

@media (max-width: 575.98px) {
    .hero-mock {
        grid-template-columns: 1fr;
    }

    .sms-phone {
        max-width: 14rem;
    }
}