/* Skolshield Front — Modern SaaS Landing Page */

/* Google Fonts - Lato */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic');

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Navbar */
.navbar-brand {
    font-size: 1.4rem;
    color: #0061f2 !important;
}

/* Masthead */
header.masthead {
    position: relative;
    background-color: #343a40;
    background: url("../assets/img/backgrounds/bg-masthead.b10039e097a3.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;
}
header.masthead:before {
    content: "";
    position: absolute;
    /* Heavy navy scrim: the photo is a texture, the copy must stay readable */
    background-color: #0a1930;
    background-image: linear-gradient(180deg, rgba(10, 25, 48, 0.55) 0%, rgba(10, 25, 48, 0.9) 100%);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.86;
}
header.masthead:not(.product-hero) h1,
header.masthead:not(.product-hero) .lead,
header.masthead:not(.product-hero) small {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
header.masthead:not(.product-hero) .lead {
    color: #dbe6f6;
}
header.masthead h1, header.masthead .h1 {
    font-size: 2rem;
}
@media (min-width: 768px) {
    header.masthead {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    header.masthead h1, header.masthead .h1 {
        font-size: 3rem;
    }
}

/* ============ Home masthead: the teaser loop beside the copy ============ */

/* The copy stands on solid navy (the same gradient as the reel band below, so
   the two read as one dark block); the film never runs behind it. On lg+ the
   film is contained in the columns the copy leaves free, inside the same
   .container as every other section, so its right edge lines up with the
   page margin instead of the viewport (2026-10-12: it used to hang off the
   header itself and ran to the screen edge). Its own background is the same
   navy, and a mask feathers the edges, so the UI appears to float rather
   than sit in a rectangle. The poster <img> is under the <video>, which
   fades in only once it is actually playing — a refused autoplay never shows
   a black box. */
header.masthead.masthead-video {
    background:
        radial-gradient(60rem 30rem at 72% 50%, rgba(0, 97, 242, 0.28), transparent 65%),
        linear-gradient(180deg, #0a1930 0%, #10264a 100%);
    overflow: hidden;
    isolation: isolate;
}
header.masthead.masthead-video:before { display: none; }
/* The media box is a positioned sibling of the copy's row inside the
   container; keep the copy painted above the feathered edge of the film. */
header.masthead.masthead-video .container > .row { position: relative; z-index: 1; }
.masthead-media {
    position: relative;
    z-index: 0;
    pointer-events: none;
}
.masthead-media img,
.masthead-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.masthead-media video {
    opacity: 0;
    transition: opacity 0.9s ease;
}
.masthead-media video.is-playing { opacity: 1; }
@media (max-width: 991.98px) {
    /* Phones: copy only for now (2026-10-06). The portrait cut read as a
       second screen under the copy rather than a hero; a new cut is coming.
       The script does not load the film below this breakpoint either. */
    .masthead-media { display: none; }
}
@media (min-width: 992px) {
    /* Wide: the landscape cut in the columns right of the copy (col-lg-6 →
       the other 6/12, col-xl-5 → 7/12), flush with the container's content
       edge and vertically centred. The box is 16:9 like the film so the mask
       feathers the film's own edges: soft on the left where it meets the
       copy, lightly top and bottom. */
    .masthead-media {
        position: absolute;
        top: 50%;
        right: calc(var(--bs-gutter-x, 1.5rem) * .5);
        width: 50%;
        aspect-ratio: 16 / 9;
        transform: translateY(-50%);
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, #000 24%, #000 100%),
            linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(90deg, transparent 0%, #000 24%, #000 100%),
            linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
        mask-composite: intersect;
    }
}
@media (min-width: 1200px) {
    .masthead-media { width: 58.333333%; }
}

/* Bootstrap's .container keeps a fixed 12px side padding, but a .g-5 row sets
   --bs-gutter-x: 3rem and pulls -24px margins — so every g-5 row inside a
   container hangs 12px off each edge and gives phones a horizontal scrollbar.
   The wide gutter is only wanted once the columns sit side by side, so below
   lg drop it to something the container can absorb. Vertical spacing is left
   alone: --bs-gutter-y still separates the stacked columns. */
@media (max-width: 991.98px) {
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* Bootstrap .badge is white-space: nowrap, which is right for a chip like
   "30 elever" and wrong for the sentence-length ones we use as eyebrows
   ("Uppdaterat för lagändringen ... (SFS 2026:1096)"). On a 320px phone those
   ran 30px past the edge. Wrapping only kicks in when the badge would not
   fit anyway, so short chips are unaffected; scoped below sm so no desktop
   layout can start wrapping. */
@media (max-width: 575.98px) {
    .badge {
        white-space: normal;
        max-width: 100%;
    }
}

/* Features Icons */
.features-icons {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.features-icons .features-icons-item {
    max-width: 20rem;
}
.features-icons .features-icons-item .features-icons-icon {
    height: 7rem;
}
.features-icons .features-icons-item .features-icons-icon i {
    font-size: 4.5rem;
}

/* Cards */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}
/* Opt-out for large content cards where the lift reads as a jump, not a hint */
.card.card-static {
    transition: none;
}
.card.card-static:hover {
    transform: none;
}
/* Portal (kundzon) cards are functional containers, not clickable teasers —
   the lift reads as a jump. Disable it for every card on portal pages. */
.portal-page .card {
    transition: box-shadow 0.2s ease;
}
.portal-page .card:hover {
    transform: none;
}
.rounded-4 {
    border-radius: 1rem !important;
}

/* Call to Action */
.call-to-action {
    position: relative;
    background-color: #343a40;
    background: url("../assets/img/backgrounds/bg-masthead.b10039e097a3.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.call-to-action:before {
    content: "";
    position: absolute;
    background-color: #1c375e;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
}

/* Footer */
footer.footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/* 19px of link is under the 24x24 minimum for a touch target; the padding
   brings it up without moving anything visually. */
footer .list-unstyled a {
    display: inline-block;
    padding: 0.2rem 0;
}
footer a:hover {
    color: #0061f2 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
}

/* ============ Product tour (/produkten/) ============ */

/* Inner-page hero: slimmer than the home masthead, and the same height on
   every page that carries one. The floor stops a two-line hero (about,
   contact, privacy, gdpr, faq) collapsing to a sliver while kommun runs to
   twice that; centring keeps the copy off the top edge once it does.
   /pricing/ overrides padding-bottom to make room for the calculator that
   pulls up into it. */
header.masthead.product-hero,
header.masthead.film-hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Browser chrome around screenshots */
.browser-frame {
    background: #e9ecf1;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 3.5rem rgba(28, 55, 94, 0.25);
    overflow: hidden;
}
.browser-frame-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
}
.browser-frame-bar span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #c8cdd6;
}
.browser-frame-bar span:first-child { background: #f1707a; }
.browser-frame-bar span:nth-child(2) { background: #f5c26b; }
.browser-frame-bar span:nth-child(3) { background: #6bcf8f; }
.browser-frame img {
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}

/* Sticky pane tracks the scrolling steps */
.tour-sticky {
    position: sticky;
    top: 5rem;
}

/* Steps: generous spacing gives the observer room to switch shots */
.tour-step {
    padding: 3.5rem 0;
    border-left: 3px solid #e3e7ee;
    padding-left: 1.5rem;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.55;
}
.tour-step.active {
    border-left-color: #0061f2;
    opacity: 1;
}
@media (max-width: 991.98px) {
    .tour-step {
        opacity: 1;               /* no sticky pane to sync with */
        border-left: none;
        padding-left: 0;
        padding: 2rem 0;
    }
}
.tour-step-eyebrow {
    color: #0061f2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
.tour-step-img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(28, 55, 94, 0.15);
    margin-top: 1rem;
    cursor: zoom-in;
}

/* Fact chips */
ul.fact-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
ul.fact-chips li {
    background: #eef4ff;
    color: #0061f2;
    border: 1px solid #d3e2ff;
    border-radius: 50rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    /* nowrap keeps a chip on one line, which is right until the chip is
       longer than the phone — "Material for the Schools Inspectorate and BEO"
       hung 30px off a 320px screen. */
    ul.fact-chips li {
        white-space: normal;
    }
}

/* Phone frame for the mobile shot */
.phone-frame {
    max-width: 300px;
    border: 10px solid #1f2733;
    border-radius: 2.2rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(28, 55, 94, 0.25);
    background: #1f2733;
}
.phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    cursor: zoom-in;
}

/* Lightbox */
.shot-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.92);
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}
.shot-lightbox.open {
    display: flex;
}
.shot-lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.5);
}

/* Home page teaser */
.home-shot-teaser .browser-frame {
    transform: rotate(-1deg);
    transition: transform 0.25s ease;
}
.home-shot-teaser .browser-frame:hover {
    transform: rotate(0deg) scale(1.01);
}

/* ============ Product tour: polish pass ============ */

/* Typography: tighter, heavier display text on the product page */
.product-page h1,
.product-page h2 {
    font-weight: 900;               /* real Lato Black, loaded in the @import */
    letter-spacing: -0.02em;
}
.product-page h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Hero: dark navy gradient + glow + dot grid instead of the recycled photo */
header.masthead.product-hero,
header.masthead.film-hero {
    background:
        radial-gradient(70rem 35rem at 70% -10%, rgba(0, 97, 242, 0.4), transparent 60%),
        radial-gradient(50rem 30rem at 10% 110%, rgba(0, 97, 242, 0.18), transparent 60%),
        linear-gradient(160deg, #0a1930 0%, #10264a 55%, #0a1930 100%);
}
header.masthead.product-hero:before,
header.masthead.film-hero:before {
    background-color: transparent;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 1;
}
.product-hero h1 {
    background: linear-gradient(100deg, #ffffff 55%, #8fbcff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffffff; /* fallback */
}
.product-hero .lead,
.film-hero .lead {
    color: #c2d3ec;
}
.product-hero .btn-primary {
    box-shadow: 0 0.75rem 2rem rgba(0, 97, 242, 0.45);
}

/* Fact strip: fuses with the hero into one dark block */
.fact-strip {
    background: #0a1930;
    border-bottom: 1px solid rgba(127, 177, 255, 0.15);
}
.fact-strip .text-primary {
    color: #7fb1ff !important;
}
.fact-strip .text-muted {
    color: #8ba0c0 !important;
}

/* Browser chrome: layered shadow + centered URL pill */
.browser-frame {
    border: 1px solid rgba(10, 25, 48, 0.08);
    box-shadow:
        0 2.5rem 5rem rgba(10, 25, 48, 0.25),
        0 0.5rem 1.25rem rgba(10, 25, 48, 0.12);
}
.browser-frame-bar {
    position: relative;
    align-items: center;
    min-height: 2.1rem;
}
.browser-frame-url {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border: 1px solid #dde3ec;
    border-radius: 50rem;
    color: #8a93a3;
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.3rem 1.1rem;
    white-space: nowrap;
}
.browser-frame-url .fa-lock {
    font-size: 0.6rem;
    color: #6bcf8f;
}

/* Steps: ghost numbers via CSS counters + slide-in on activation */
.tour-steps {
    counter-reset: tourstep;
}
.tour-step {
    counter-increment: tourstep;
    transform: translateX(-6px);
    transition: border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.tour-step.active {
    transform: translateX(0);
}
.tour-step-eyebrow::before {
    content: counter(tourstep, decimal-leading-zero);
    font-size: 1.5rem;
    font-weight: 900;
    color: #c9d7ee;
    margin-right: 0.6rem;
    vertical-align: -0.12em;
    transition: color 0.3s ease;
}
.tour-step.active .tour-step-eyebrow::before {
    color: #0061f2;
}
@media (max-width: 991.98px) {
    .tour-step {
        transform: none;
    }
}

/* Soft glow behind the sticky mac frame */
.tour-sticky::before {
    content: "";
    position: absolute;
    inset: -10% -8%;
    background: radial-gradient(closest-side, rgba(0, 97, 242, 0.14), transparent);
    z-index: -1;
}

/* Demo CTA card: inverted navy — the one dark card on a light section */
.demo-cta-card {
    background:
        radial-gradient(40rem 20rem at 85% -20%, rgba(0, 97, 242, 0.45), transparent 60%),
        linear-gradient(150deg, #0e2242, #0a1930);
    color: #ffffff;
}
.demo-cta-card h2 {
    color: #ffffff;
}
.demo-cta-card .text-muted {
    color: #b8c7dd !important;
}
.demo-cta-card .text-primary {
    color: #7fb1ff !important;
}
.demo-cta-card .btn-primary {
    box-shadow: 0 0.75rem 2rem rgba(0, 97, 242, 0.5);
}
.demo-cta-card .btn-outline-secondary {
    color: #d6e2f5;
    border-color: #45608c;
}
.demo-cta-card .btn-outline-secondary:hover {
    background: #21406e;
    border-color: #21406e;
    color: #ffffff;
}

/* Closing CTA: same navy language as the hero — photo CTA stays on other pages */
.product-page .call-to-action {
    background:
        radial-gradient(60rem 30rem at 30% 120%, rgba(0, 97, 242, 0.35), transparent 60%),
        linear-gradient(200deg, #0a1930 0%, #10264a 60%, #0a1930 100%);
}
.product-page .call-to-action:before {
    background-color: transparent;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 1;
}

/* Phone frame: notch + a light tilt that straightens on hover */
.phone-frame {
    position: relative;
    transform: rotate(2deg);
    transition: transform 0.25s ease;
}
.phone-frame:hover {
    transform: rotate(0deg);
}
.phone-frame::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 16px;
    background: #1f2733;
    border-radius: 50rem;
}

/* ============ Site-wide polish (home / GDPR / about) ============ */

/* Display typography everywhere, not just the product page */
main h1, main h2 {
    font-weight: 900;
    letter-spacing: -0.02em;
}
main h3 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* About: then-vs-now stat callouts */
.stat-then {
    background: #f6f7f9;
    border: 1px solid #e7eaef !important;
    color: #6c757d;
}
.stat-now {
    background:
        radial-gradient(30rem 15rem at 80% -30%, rgba(0, 97, 242, 0.4), transparent 60%),
        linear-gradient(150deg, #0e2242, #0a1930);
    color: #ffffff;
}
.stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.stat-then .stat-label { color: #8a93a3; }
.stat-now .stat-label { color: #7fb1ff; }
.stat-number {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.stat-then .stat-number {
    color: #8a93a3;
    text-decoration: line-through;
    text-decoration-thickness: 3px;
    text-decoration-color: rgba(232, 62, 62, 0.55);
}
.stat-caption {
    font-size: 0.85rem;
}
.stat-then .stat-caption { color: #97a0ad; }
.stat-now .stat-caption { color: #b8c7dd; }

/* ============ Pricing calculator ============ */
.calc-figure {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0061f2;
}
.calc-badge {
    background: #e2f5ea;
    color: #157347;
    border: 1px solid #bfe5cf;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    /* Bootstrap .badge is nowrap, and this label is a full sentence — at 393px
       wide it pushed every phone under ~400px into horizontal scroll. */
    white-space: normal;
    max-width: 100%;
}
.price-calculator .form-range::-webkit-slider-thumb {
    background: #0061f2;
}
.price-calculator .form-range::-moz-range-thumb {
    background: #0061f2;
}

/* ============ Pricing page: hero + presets ============ */
.price-hero {
    padding-bottom: 9rem !important;   /* room for the pulled-up calculator */
}
.price-hero-amount {
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(100deg, #ffffff 55%, #8fbcff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.price-hero-unit {
    display: block;
    color: #c2d3ec;
    margin-top: 0.5rem;
}
.price-hero-chip {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(143, 188, 255, 0.35);
    border-radius: 50rem;
    background: rgba(16, 38, 74, 0.6);
    color: #d6e2f5;
    font-size: 0.85rem;
    font-weight: 600;
}
.price-pull-up {
    margin-top: -6rem;
    position: relative;
    z-index: 1;
}
/* Kommun/friskola segmented control */
.mode-toggle {
    display: inline-flex;
    background: #eef1f6;
    border-radius: 50rem;
    padding: 0.25rem;
}
.mode-btn {
    border: none;
    background: transparent;
    border-radius: 50rem;
    padding: 0.4rem 1.4rem;
    font-weight: 700;
    color: #69707a;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.mode-btn.active {
    background: #0061f2;
    color: #ffffff;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 97, 242, 0.3);
}

.preset-chip {
    padding: 0.35rem 0.9rem;
    border: 1px solid #d4dae3;
    border-radius: 50rem;
    background: #f8f9fa;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.preset-chip:hover {
    border-color: #0061f2;
    color: #0061f2;
}
.preset-chip.active {
    background: #0061f2;
    border-color: #0061f2;
    color: #ffffff;
}

/* ============ Compliance section (home) ============ */
/* Two shots of the same incident, side by side, each captioned by viewer */
.compare-frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.compare-frame figure {
    margin: 0;
    border: 1px solid rgba(10, 25, 48, 0.08);
    border-radius: 0.6rem;
    overflow: hidden;
    background: #e9ecf1;
    box-shadow: 0 0.75rem 2rem rgba(10, 25, 48, 0.18);
}
.compare-frame figcaption {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1c375e;
    padding: 0.45rem 0.75rem;
    background: #f4f6fa;
    border-bottom: 1px solid #dde3ec;
}
.compare-frame img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 575.98px) {
    .compare-frame { grid-template-columns: 1fr; }
}
.compliance-table th[scope="row"] {
    font-weight: 600;
    white-space: normal;
    min-width: 12rem;
}
.compliance-table td, .compliance-table th {
    font-size: 0.92rem;
}
/* Phones: stack each rule over its description instead of a two-column squeeze */
@media (max-width: 575.98px) {
    .compliance-table thead { display: none; }
    .compliance-table tr, .compliance-table th, .compliance-table td { display: block; }
    .compliance-table th[scope="row"] { min-width: 0; border-bottom: 0; padding-bottom: 0.1rem; }
    .compliance-table td { padding-top: 0; color: #5c6570; }
}

/* ---- Sign-in section (home #inloggning): dark band, ladder, push illustration ---- */
.mfa-section {
    background: #0a1930;
    background-image: radial-gradient(60rem 30rem at 80% -10%, rgba(0, 97, 242, 0.35), transparent 60%);
    color: #e6edf7;
}
.mfa-section h2 { color: #fff; }
.mfa-section h3 { color: #fff; }
.mfa-badge {
    background: rgba(0, 97, 242, 0.25);
    color: #9cc2ff;
    border: 1px solid rgba(156, 194, 255, 0.35);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.9rem;
}
.mfa-lead { color: #b8c7de; }
.mfa-caption { color: #93a4bf; }
.mfa-section .browser-frame { box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45); }

.mfa-ladder {
    list-style: none;
    counter-reset: mfa;
    padding: 0;
    margin: 0;
    position: relative;
}
.mfa-ladder li {
    display: flex;
    gap: 1rem;
    padding: 0 0 1.5rem 0;
    position: relative;
}
.mfa-ladder li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: 2.9rem;
    bottom: 0;
    width: 2px;
    background: rgba(156, 194, 255, 0.25);
}
.mfa-ladder li p { color: #b8c7de; margin: 0; font-size: 0.95rem; }
.mfa-ladder-icon {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #9cc2ff;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}
.mfa-ladder-icon-hero {
    background: #0061f2;
    border-color: #0061f2;
    color: #fff;
    box-shadow: 0 0 0 6px rgba(0, 97, 242, 0.25);
}

.mfa-compare {
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}
.mfa-compare p { color: #b8c7de; font-size: 0.95rem; }
.mfa-compare-label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    margin-bottom: 0.6rem;
    color: #93a4bf;
}
.mfa-compare-us { border-color: rgba(0, 97, 242, 0.7); background: rgba(0, 97, 242, 0.12); }
.mfa-compare-us .mfa-compare-label { color: #9cc2ff; }
.mfa-compare-us p { color: #e6edf7; }

/* Illustration: lock card + phone with the number-matching push */
.mfa-illustration {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24rem;
    padding: 1rem 0;
}
.mfa-lock-card {
    width: 20rem;
    max-width: 100%;
    background: #fff;
    color: #1c375e;
    border-radius: 0.9rem;
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
    text-align: center;
    margin-right: 6rem;
}
.mfa-lock-icon { color: #0061f2; font-size: 1.6rem; }
.mfa-lock-title { font-weight: 700; font-size: 1.05rem; margin-top: 0.4rem; }
.mfa-lock-sub { color: #6c757d; font-size: 0.8rem; margin: 0.35rem 0 1rem; }
.mfa-lock-btn {
    background: #0061f2;
    color: #fff;
    border-radius: 0.4rem;
    padding: 0.55rem;
    font-weight: 600;
    font-size: 0.9rem;
}
.mfa-lock-hint { color: #6c757d; font-size: 0.75rem; margin-top: 0.7rem; }
.mfa-lock-number {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #0a1930;
    line-height: 1.1;
    margin: 0.25rem 0 0.5rem;
}
.mfa-lock-alt { font-size: 0.75rem; color: #0061f2; text-decoration: underline; }

.mfa-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12.5rem;
    height: 21rem;
    background: #101828;
    border: 6px solid #1f2733;
    border-radius: 2rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
    overflow: hidden;
    background-image: linear-gradient(180deg, #16223a 0%, #0f172a 100%);
}
.mfa-phone-top { height: 1.6rem; display: flex; justify-content: center; align-items: flex-start; }
.mfa-phone-top span { width: 4.5rem; height: 0.9rem; background: #1f2733; border-radius: 0 0 0.6rem 0.6rem; }
.mfa-push {
    margin: 1.5rem 0.55rem 0;
    background: rgba(255, 255, 255, 0.96);
    color: #1c375e;
    border-radius: 0.9rem;
    padding: 0.7rem 0.75rem 0.75rem;
    font-size: 0.72rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}
.mfa-push-head {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.68rem;
    margin-bottom: 0.35rem;
}
.mfa-push-head span { margin-left: auto; font-weight: 400; }
.mfa-push-title { font-weight: 700; font-size: 0.85rem; }
.mfa-push-text { color: #495057; margin-top: 0.15rem; }
.mfa-push-input {
    margin: 0.55rem auto 0.6rem;
    width: 4rem;
    border: 2px solid #0061f2;
    border-radius: 0.4rem;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #0a1930;
    padding: 0.15rem 0;
}
.mfa-push-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.mfa-push-deny { color: #6c757d; }
.mfa-push-ok {
    background: #0061f2;
    color: #fff;
    border-radius: 0.35rem;
    padding: 0.25rem 0.9rem;
    font-weight: 700;
}
@media (max-width: 575.98px) {
    .mfa-illustration { flex-direction: column; min-height: 0; gap: 1.25rem; }
    .mfa-lock-card { margin-right: 0; }
    .mfa-phone { position: static; height: auto; padding-bottom: 1.5rem; }
}

/* ---- Positioning schematic (home + kommun): where Skolshield sits ---- */
.schematic-frame, .schematic-zoom-body {
    --sch-paper: #ffffff;
    --sch-ink: #1c375e;
    --sch-ink-soft: #5b6b84;
    --sch-navy: #0a1930;
    --sch-blue: #0061f2;
    --sch-blue-soft: #eef4ff;
    --sch-blue-line: #b9d0fb;
    --sch-care: #edf3ef;
    --sch-care-line: #b9cfc3;
    --sch-care-ink: #2f5d50;
    --sch-mask: #c8552a;
    --sch-band-fill: rgba(0, 97, 242, 0.05);
}
.schematic-frame {
    position: relative;
    background: #fff;
    border: 1px solid #d5dde9;
    border-radius: 12px;
    padding: 1rem;
}
.schematic-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.schematic-zoom-btn {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 2;
    border: 1px solid #b9d0fb;
    background: #fff;
    color: #0061f2;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 50rem;
    padding: 0.3rem 0.75rem;
    box-shadow: 0 0.25rem 0.75rem rgba(10, 25, 48, 0.15);
}
@media (max-width: 767.98px) {
    /* right-edge fade: says "there is more" without hiding the drawing */
    .schematic-frame::after {
        content: "";
        position: absolute;
        top: 1px; right: 1px; bottom: 1px;
        width: 3.5rem;
        border-radius: 0 12px 12px 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 80%);
        pointer-events: none;
    }
    .schematic-scroll svg { cursor: zoom-in; }
}
/* Fullscreen overlay: the SVG at full width, scroll both ways, pinch to zoom */
.schematic-zoom {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #0a1930;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 3.25rem 1rem 1.5rem;
}
.schematic-zoom.open { display: block; }
.schematic-zoom-body {
    width: 1180px;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
}
.schematic-zoom-body svg { display: block; width: 1180px; min-width: 0; height: auto; }
.schematic-zoom-close {
    position: fixed;
    top: 0.6rem;
    right: 0.75rem;
    z-index: 2001;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
}
.schematic-zoom-close:focus-visible { outline: 2px solid #9cc2ff; outline-offset: 2px; }
.positioning-schematic {
    display: block;
    width: 100%;
    min-width: 900px;
    height: auto;
    font-family: 'Lato', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.positioning-schematic text { fill: var(--sch-ink); }
.positioning-schematic .sch-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; fill: var(--sch-ink-soft); }
.positioning-schematic .sch-law { font-size: 12.5px; fill: var(--sch-ink-soft); }
.positioning-schematic .sch-role { font-size: 14.5px; font-weight: 700; }
.positioning-schematic .sch-note { font-size: 13px; }
.positioning-schematic .sch-note-soft { font-size: 13px; fill: var(--sch-ink-soft); }
.positioning-schematic .sch-strong { font-size: 14px; font-weight: 700; }
.positioning-schematic .sch-care-t { fill: var(--sch-care-ink); }
.positioning-schematic .sch-tab { font-size: 13px; font-weight: 900; letter-spacing: 2px; fill: #fff; }
.positioning-schematic .sch-mask-t { fill: var(--sch-mask); font-weight: 700; }
.positioning-schematic .sch-law-sm { font-size: 11.5px; fill: var(--sch-ink-soft); }
.positioning-schematic .sch-tiny { font-size: 11px; }
.positioning-schematic .sch-note-sm { font-size: 12px; }
.schematic-legend { font-size: 0.92rem; color: #5b6b84; }
.schematic-legend .sw {
    display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px;
    vertical-align: -2px; margin-right: 0.45rem; border: 1px solid #d5dde9;
}
.positioning-statement h2 { font-weight: 900; letter-spacing: -0.01em; text-wrap: balance; }
.positioning-statement .lead { color: #5b6b84; }

/* ---- Auto-hiding navbar (sticky; slides out on scroll down, back on scroll up) ---- */
.site-nav {
    z-index: 1030;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}
.site-nav.nav-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
}

/* ============ Demofilmer (/video/) ============ */

/* .browser-frame img sets cursor: zoom-in for the lightbox; a player must not
   inherit it — its own controls are the affordance. */
.browser-frame video {
    display: block;
    width: 100%;
    height: auto;
    /* The films are 1600×900. Reserving the box keeps the page from jumping
       when the poster arrives — and keeps the reader's place across the
       in-place language switch, whose poster is per language. */
    aspect-ratio: 16 / 9;
    background: #0a1930;
}

.film-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c8cb5;
    margin-bottom: 0.5rem;
}

.film-aside-heading {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6c8cb5;
    margin-bottom: 0.75rem;
}

/* Chapter list: flat buttons, so a seek reads as navigation rather than a form */
.film-chapters,
.film-transcript-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}
.film-chapters {
    max-height: 26rem;
    overflow-y: auto;
}
.film-chapter {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    padding: 0.5rem 0.6rem;
    border-radius: 0 0.35rem 0.35rem 0;
    color: inherit;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.film-chapter:hover {
    background: rgba(0, 97, 242, 0.07);
}
.film-chapter.is-current {
    background: rgba(0, 97, 242, 0.1);
    border-left-color: #0061f2;
}
.film-chapter-time {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #6c8cb5;
    padding-top: 0.1rem;
}
.film-chapter.is-current .film-chapter-time {
    color: #0061f2;
    font-weight: 600;
}
.film-chapter-title {
    font-size: 0.95rem;
}

.film-transcript {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}
.film-transcript summary {
    cursor: pointer;
    font-weight: 600;
    color: #0061f2;
    padding: 0.4rem 0;   /* 24px of text is too small to tap */
}
.film-transcript-lines {
    margin-top: 1rem;
    columns: 2;
    column-gap: 2rem;
}
.film-transcript-lines li {
    break-inside: avoid;
    margin-bottom: 0.25rem;
}

/* Play badge over a poster: the still needs its own affordance */
.film-teaser-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(0, 97, 242, 0.92);
    color: #ffffff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.3rem; /* optical centring of the triangle */
    box-shadow: 0 0.75rem 2rem rgba(10, 25, 48, 0.45);
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.film-reel-start:hover .film-teaser-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #0061f2;
}

/* ---- The index: shelves of cards (2026-10-12) ----
   One card per film, YouTube-shaped: poster, runtime badge, title, two lines
   of blurb. The whole card is the link. Three columns at lg, two at md, one
   on phones (the row-cols classes in the template). */
.film-shelf h2 {
    font-weight: 800;
    letter-spacing: -0.01em;
}
.film-shelf-all {
    font-weight: 600;
    text-decoration: none;
}
.film-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(10, 25, 48, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0.35rem 1rem rgba(10, 25, 48, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.film-card:hover,
.film-card:focus-visible {
    color: inherit;
    transform: translateY(-3px);
    border-color: rgba(0, 97, 242, 0.35);
    box-shadow: 0 1rem 2rem rgba(10, 25, 48, 0.16);
}
.film-card-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0a1930;
    overflow: hidden;
}
.film-card-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}
.film-card:hover .film-card-thumb img { transform: scale(1.03); }
.film-card-duration {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    background: rgba(10, 25, 48, 0.85);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.film-card-duration .fa-clock { font-size: 0.7rem; }
/* The small play badge: the still needs its affordance even at thumbnail size */
.film-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(0, 97, 242, 0.9);
    color: #ffffff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.2rem;
    box-shadow: 0 0.5rem 1.25rem rgba(10, 25, 48, 0.4);
    opacity: 0.9;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.film-card:hover .film-card-play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}
.film-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.1rem 1.15rem;
}
.film-card-eyebrow {
    font-size: 0.72rem;
    margin-bottom: 0.35rem;
}
.film-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.4rem;
    color: #0a1930;
}
.film-card-blurb {
    font-size: 0.9rem;
    line-height: 1.45;
    color: #5b6b82;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .film-card,
    .film-card-thumb img,
    .film-card-play { transition: none; }
    .film-card:hover { transform: none; }
    .film-card:hover .film-card-thumb img { transform: none; }
}

/* ---- The watch page ---- */
/* Slimmer than the index hero: the player is the point, keep it near the top. */
header.masthead.film-watch-hero {
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
    min-height: 0;
}
.film-watch-hero h1 { font-size: 2.2rem; }
.film-watch-hero .film-eyebrow-light .film-hero-link { color: inherit; }
@media (min-width: 992px) {
    .film-watch-hero h1 { font-size: 2.6rem; }
}
/* Previous / next under the chapter rail */
.film-watch-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
}
.film-watch-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.film-watch-nav-link:only-child.text-end { margin-left: auto; }
.film-watch-nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6c8cb5;
}
.film-watch-nav-title {
    font-weight: 600;
    color: #0061f2;
}
.film-watch-nav-link:hover .film-watch-nav-title { text-decoration: underline; }

/* ============ Home reel: the overview film under the hero ============ */

/* Same navy as the product/film hero so the band reads as one dark block
   with the masthead above it, the film being the first thing after the
   headline. */
.film-reel {
    position: relative;
    padding: 4rem 0 4.5rem;
    color: #dbe6f6;
    background:
        radial-gradient(60rem 30rem at 50% 0%, rgba(0, 97, 242, 0.35), transparent 65%),
        linear-gradient(180deg, #0a1930 0%, #10264a 100%);
}
.film-reel:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.film-reel .container { position: relative; }
.film-reel h2 {
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.film-eyebrow-light { color: #7fb1ff; }
/* The Skolshield version on /video/ — the title attribute says how sure we are. */
.film-version { cursor: help; }
.film-reel-lead {
    color: #c2d3ec;
    font-size: 1.1rem;
}
.film-reel-more { color: #c2d3ec; }

.film-reel-frame {
    position: relative;
}
.film-reel-frame .browser-frame {
    box-shadow:
        0 0 0 1px rgba(127, 177, 255, 0.18),
        0 2.5rem 6rem rgba(0, 0, 0, 0.55),
        0 0 8rem rgba(0, 97, 242, 0.25);
}
/* The start button sits in the middle of the poster. The script turns the
   native controls off while it shows (Firefox would paint a second play badge
   under it) and on again once the film runs; the button hides on play. */
.film-reel-start {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: 0;
    padding: 3rem 3rem 4.5rem;   /* generous tap target around the badge */
    color: #ffffff;
    cursor: pointer;
}
.film-reel-start .film-teaser-play {
    position: static;
    transform: none;
    margin: 0 auto;
    width: 5.5rem;
    height: 5.5rem;
    font-size: 1.9rem;
}
.film-reel-start:hover .film-teaser-play {
    transform: scale(1.08);
}
.film-reel-start-label {
    display: block;
    margin-top: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}
.film-reel-start[hidden] { display: none; }

/* Chapter strip: the same seek buttons as /video/, laid out as pills */
.film-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-height: none;
    overflow: visible;
    margin-top: 1.75rem;
}
.film-strip .film-chapter {
    width: auto;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(127, 177, 255, 0.28);
    border-radius: 50rem;
    background: rgba(255, 255, 255, 0.05);
    color: #dbe6f6;
    font-size: 0.9rem;
}
.film-strip .film-chapter:hover {
    background: rgba(0, 97, 242, 0.35);
    border-color: rgba(127, 177, 255, 0.6);
}
.film-strip .film-chapter.is-current {
    background: #0061f2;
    border-color: #0061f2;
    color: #ffffff;
}
.film-strip .film-chapter-time {
    font-size: 0.78rem;
    color: #8ba0c0;
    padding-top: 0;
}
.film-strip .film-chapter.is-current .film-chapter-time {
    color: #dbe6f6;
}
.film-strip .film-chapter-title {
    font-size: inherit;
}

/* Pointer from /video/ back to the reel */
.film-hero-link {
    color: #8fbcff;
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 188, 255, 0.4);
}
.film-hero-link:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

@media (max-width: 767.98px) {
    .film-reel { padding: 3rem 0; }
    .film-reel-start { padding: 1.5rem 1.5rem 2.5rem; }
    .film-reel-start .film-teaser-play {
        width: 4rem;
        height: 4rem;
        font-size: 1.4rem;
    }
    .film-strip .film-chapter { font-size: 0.82rem; padding: 0.3rem 0.7rem; }
    .film-strip .film-chapter-time { display: none; }
}

@media (max-width: 991.98px) {
    .film-chapters {
        max-height: none;
    }
    .film-transcript-lines {
        columns: 1;
    }
}