/* ==========================================================================
   The Worki website. On top of Bootstrap 5.3 (no build step: CSS variables only).
   The colours, radii and shadows are the app's (its worki.css): copied, never invented.

   Palette
     Iris   (brand)   #5842E8
     Coral  (accent)  #FF6B4A  - used sparingly: logo dot, highlights
     Ink    (neutral) #17172A ... #F7F7FA
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../lib/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens (the app's) ---------------------------------------------------- */
:root {
    --wk-iris-50: #f2f1ff;
    --wk-iris-100: #e6e3ff;
    --wk-iris-200: #cfc9ff;
    --wk-iris-300: #ada3ff;
    --wk-iris-400: #8b7bff;
    --wk-iris-500: #6d5bf7;
    --wk-iris-600: #5842e8;
    --wk-iris-700: #4733c4;
    --wk-iris-800: #3a2b9c;
    --wk-iris-900: #2f267a;
    --wk-iris-950: #1c1650;

    --wk-coral-400: #ff8a6e;
    --wk-coral-500: #ff6b4a;
    --wk-coral-600: #e8502f;

    --wk-ink-0: #ffffff;
    --wk-ink-25: #fcfcfd;
    --wk-ink-50: #f7f7fa;
    --wk-ink-100: #efeff4;
    --wk-ink-200: #e2e2ea;
    --wk-ink-300: #c9c9d6;
    --wk-ink-400: #9a9ab0;
    --wk-ink-500: #6e6e87;
    --wk-ink-600: #52526a;
    --wk-ink-700: #3c3c52;
    --wk-ink-800: #26263a;
    --wk-ink-850: #1d1d30;
    --wk-ink-900: #17172a;
    --wk-ink-950: #0e0e1c;

    --wk-radius-sm: .5rem;
    --wk-radius: .75rem;
    --wk-radius-lg: 1rem;
    --wk-shadow-sm: 0 1px 2px rgb(23 23 42 / .06);
    --wk-shadow: 0 1px 3px rgb(23 23 42 / .06), 0 4px 16px -4px rgb(23 23 42 / .08);
    --wk-shadow-lg: 0 12px 40px -12px rgb(23 23 42 / .25);
    --wk-ease: cubic-bezier(.2, .8, .2, 1);

    --wk-surface: var(--wk-ink-0);
    --wk-surface-muted: var(--wk-ink-50);
    --wk-canvas: #f6f6fb;
    --wk-border: var(--wk-ink-200);
    --wk-text: var(--wk-ink-900);
    --wk-text-muted: var(--wk-ink-500);
    --wk-accent-soft: var(--wk-iris-50);
    --wk-accent-text: var(--wk-iris-700);
    --wk-nav-hover: var(--wk-ink-100);

    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-color: var(--wk-text);
    --bs-body-bg: var(--wk-surface);
    --bs-secondary-color: var(--wk-text-muted);
    --bs-border-color: var(--wk-border);
    --bs-border-radius: var(--wk-radius-sm);
    --bs-emphasis-color: var(--wk-ink-950);
    --bs-heading-color: var(--wk-ink-950);
    --bs-link-color: var(--wk-iris-600);
    --bs-link-color-rgb: 88, 66, 232;
    --bs-link-hover-color: var(--wk-iris-700);
    --bs-link-hover-color-rgb: 71, 51, 196;
    --bs-primary: var(--wk-iris-600);
    --bs-primary-rgb: 88, 66, 232;
    --bs-focus-ring-color: rgb(88 66 232 / .25);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
    letter-spacing: -.005em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -.02em;
}

::selection { background: var(--wk-iris-200); color: var(--wk-ink-950); }

.wk-skip { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .5rem .75rem; background: var(--wk-surface); border-radius: var(--wk-radius-sm); }

/* --- Buttons, chips (the app's) -------------------------------------------- */
.btn {
    --bs-btn-font-weight: 550;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-border-radius: var(--wk-radius-sm);
    transition: background-color .15s var(--wk-ease), border-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease), transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.4rem; --bs-btn-font-size: 1rem; }

.btn-primary {
    --bs-btn-bg: var(--wk-iris-600);
    --bs-btn-border-color: var(--wk-iris-600);
    --bs-btn-hover-bg: var(--wk-iris-700);
    --bs-btn-hover-border-color: var(--wk-iris-700);
    --bs-btn-active-bg: var(--wk-iris-800);
    --bs-btn-active-border-color: var(--wk-iris-800);
    --bs-btn-focus-shadow-rgb: 88, 66, 232;
    box-shadow: 0 1px 2px rgb(71 51 196 / .3), inset 0 1px 0 rgb(255 255 255 / .12);
}

/* Secondary actions: soft Iris. One solid .btn-primary per view; everything else is soft or ghost. */
.btn-soft {
    --bs-btn-color: var(--wk-accent-text);
    --bs-btn-bg: var(--wk-accent-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--wk-iris-800);
    --bs-btn-hover-bg: var(--wk-iris-100);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--wk-iris-800);
    --bs-btn-active-bg: var(--wk-iris-200);
    --bs-btn-active-border-color: transparent;
}

.btn-ghost {
    --bs-btn-color: var(--wk-ink-600);
    --bs-btn-hover-color: var(--wk-text);
    --bs-btn-hover-bg: var(--wk-nav-hover);
    --bs-btn-active-bg: var(--wk-nav-hover);
    --bs-btn-padding-x: .7rem;
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--wk-border);
    --bs-dropdown-border-radius: var(--wk-radius);
    --bs-dropdown-link-hover-bg: var(--wk-nav-hover);
    --bs-dropdown-link-active-bg: var(--wk-accent-soft);
    --bs-dropdown-link-active-color: var(--wk-accent-text);
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-padding-x: .35rem;
    box-shadow: var(--wk-shadow-lg);
}
.dropdown-item { border-radius: var(--wk-radius-sm); }

.wk-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 550;
    background: var(--wk-accent-soft);
    color: var(--wk-accent-text);
}

.wk-logo { display: block; height: 32px; width: auto; color: var(--wk-text); }

/* --- Header ---------------------------------------------------------------- */
.wk-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgb(255 255 255 / .88);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid transparent;
}
.wk-header .navbar { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.container-xxl { --bs-gutter-x: 3rem; }
@media (max-width: 575.98px) { .container-xxl { --bs-gutter-x: 2.25rem; } }
.wk-header .navbar-brand { margin-right: 2rem; padding: 0; }
.wk-header .nav-link { font-weight: 550; font-size: .9375rem; color: var(--wk-ink-600); border-radius: var(--wk-radius-sm); padding: .5rem .8rem !important; }
.wk-header .nav-link:hover { color: var(--wk-text); background: var(--wk-nav-hover); }
.wk-header .navbar-toggler { border: 0; font-size: 1.5rem; color: var(--wk-text); padding: .25rem .5rem; }
.wk-header .navbar-toggler:focus { box-shadow: 0 0 0 4px rgb(88 66 232 / .15); }
.wk-header-actions { display: flex; align-items: center; gap: .25rem; }
.wk-header-actions .btn { font-size: .9375rem; }
.wk-header-actions .btn-soft { margin-left: .5rem; }
@media (max-width: 991.98px) {
    .wk-header .navbar-collapse { padding: .75rem 0 .5rem; }
    .wk-header-actions { flex-wrap: wrap; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--wk-border); }
}

/* --- Hero: the app's sign-in panel ------------------------------------------ */
.wk-hero-wrap { padding: 1rem 0 1.5rem; }
.wk-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 4rem;
    color: #fff;
    padding: 6.5rem 0 6.5rem 5rem;
    border-radius: 1.75rem;
    background:
        radial-gradient(1200px 600px at 110% -10%, rgb(255 107 74 / .35), transparent 60%),
        radial-gradient(900px 700px at -20% 120%, rgb(139 123 255 / .55), transparent 55%),
        linear-gradient(145deg, var(--wk-iris-700), var(--wk-iris-950));
}
.wk-hero::after {
    /* subtle dot grid */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000 30%, transparent 90%);
    pointer-events: none;
}
.wk-hero > * { position: relative; z-index: 1; }
.wk-hero-headline {
    font-size: clamp(2.25rem, 4.2vw, 3.6rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff;
    margin-bottom: 1.25rem;
}
.wk-hero-headline em { font-style: normal; color: var(--wk-coral-400); display: block; }
.wk-hero-lead { color: rgb(255 255 255 / .78); font-size: 1.1875rem; max-width: 34ch; margin-bottom: 2.5rem; }
.wk-hero-cta { --bs-btn-color: var(--wk-iris-700); --bs-btn-hover-color: var(--wk-iris-800); --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-hover-bg: var(--wk-iris-50); --bs-btn-hover-border-color: var(--wk-iris-50); box-shadow: 0 8px 24px -8px rgb(14 14 28 / .5); }
.wk-hero-note { color: rgb(255 255 255 / .65); font-size: .875rem; max-width: 40ch; margin: .9rem 0 0; }
.wk-hero-modules { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 3rem; }
.wk-hero-modules a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 550;
    color: #fff;
    text-decoration: none;
    background: rgb(255 255 255 / .1);
    border: 1px solid rgb(255 255 255 / .16);
    backdrop-filter: blur(6px);
    transition: background-color .15s var(--wk-ease);
}
.wk-hero-modules a:hover { background: rgb(255 255 255 / .2); }
/* The capture runs off the panel's right edge, like a window pushed half out of view. */
.wk-hero-shot { margin-right: -14%; }
.wk-hero-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wk-radius-lg);
    border: 1px solid rgb(255 255 255 / .18);
    box-shadow: 0 30px 80px -20px rgb(14 14 28 / .65);
    background: var(--wk-canvas);
}
@media (max-width: 991.98px) {
    .wk-hero { grid-template-columns: 1fr; gap: 3rem; padding: 3.5rem 1.75rem 0; border-radius: 1.25rem; }
    .wk-hero-shot { margin: 0 0 -8%; }
    .wk-hero-shot img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

/* --- Sections -------------------------------------------------------------- */
.wk-section { padding: 7.5rem 0; }
.wk-section-muted { background: var(--wk-canvas); }
.wk-section h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.03em; margin-bottom: .9rem; max-width: 30ch; }
.wk-section h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); letter-spacing: -.03em; }
.wk-section-lead { color: var(--wk-text-muted); font-size: 1.125rem; max-width: 52ch; margin-bottom: 3.5rem; }
@media (max-width: 767.98px) { .wk-section { padding: 4.5rem 0; } .wk-section-lead { margin-bottom: 2.5rem; } }

/* Modules */
.wk-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
@media (max-width: 991.98px) { .wk-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .wk-modules { grid-template-columns: 1fr; } }
.wk-module {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 2.25rem;
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    scroll-margin-top: 6rem;
    transition: box-shadow .2s var(--wk-ease), border-color .2s var(--wk-ease);
}
.wk-module:hover, .wk-module:target { box-shadow: var(--wk-shadow); border-color: var(--wk-iris-200); }
.wk-module-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1.5rem;
    border-radius: var(--wk-radius);
    font-size: 1.25rem;
    background: var(--wk-accent-soft);
    color: var(--wk-iris-600);
}
.wk-module { position: relative; }
.wk-module h3 { font-size: 1.1875rem; margin-bottom: .6rem; }
.wk-module h3 a { color: inherit; text-decoration: none; }
.wk-module p { color: var(--wk-text-muted); margin-bottom: 1.75rem; flex-grow: 1; }
.wk-module-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
.wk-module-more { font-size: .875rem; font-weight: 550; color: var(--wk-iris-600); white-space: nowrap; }
.wk-module-more .bi { transition: transform .2s var(--wk-ease); display: inline-block; }
.wk-module:hover .wk-module-more .bi { transform: translateX(3px); }

/* A module's page */
.wk-module-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4.5rem; align-items: center; }
.wk-module-head-plain { grid-template-columns: minmax(0, 46rem); }
.wk-module-icon-lg { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; margin-bottom: 1.75rem; }
.wk-module-page h1 { margin-bottom: 1rem; }
.wk-module-lead { font-size: 1.3125rem; line-height: 1.45; color: var(--wk-ink-700); margin-bottom: 1.5rem; }
.wk-prose { color: var(--wk-ink-600); font-size: 1.0625rem; }
.wk-prose > :last-child { margin-bottom: 0; }
.wk-prose img { max-width: 100%; height: auto; border-radius: var(--wk-radius); }
.wk-module-price { margin: 2.25rem 0 0; color: var(--wk-text-muted); }
.wk-module-price strong { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; color: var(--wk-ink-950); margin-right: .25rem; }
.wk-module-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.wk-module-note { margin: 1rem 0 0; color: var(--wk-text-muted); font-size: .9375rem; }
.wk-module-shot img, .wk-module-photos img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wk-radius-lg);
    border: 1px solid var(--wk-border);
    box-shadow: var(--wk-shadow-lg);
    background: var(--wk-canvas);
}
.wk-module-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.75rem; margin-top: 5rem; }
@media (max-width: 991.98px) { .wk-module-head { grid-template-columns: 1fr; gap: 3rem; } }
.wk-nav-modules .dropdown-item { gap: .7rem; display: flex; align-items: center; font-weight: 500; }
.wk-nav-modules .dropdown-item .bi { color: var(--wk-iris-600); }

/* Film */
.wk-film {
    display: block;
    width: 100%;
    max-width: 1040px;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-lg);
    background: var(--wk-ink-950);
}

/* Pricing */
.wk-pricing {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    padding: 3rem;
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow);
}
.wk-pricing-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.wk-pricing-points li { display: flex; gap: .8rem; align-items: baseline; font-size: 1.0625rem; }
.wk-pricing-points .bi { color: var(--wk-iris-600); }
.wk-pricing-points s { color: var(--wk-text-muted); margin-left: .25rem; }
.wk-pricing-cta { padding: 2.5rem 2rem; border-radius: var(--wk-radius); background: var(--wk-accent-soft); text-align: center; }
.wk-pricing-cta p { margin: 1.1rem 0 0; font-size: .875rem; color: var(--wk-ink-600); }
.wk-pricing-cta p:first-child { margin: 0; font-size: 1rem; }
@media (max-width: 991.98px) { .wk-pricing { grid-template-columns: 1fr; padding: 1.5rem; } }

/* Testimonials */
.wk-testimonials { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.wk-testimonial { margin: 0; padding: 1.75rem; background: var(--wk-surface); border: 1px solid var(--wk-border); border-radius: var(--wk-radius-lg); box-shadow: var(--wk-shadow-sm); }
.wk-testimonial blockquote { font-size: 1.0625rem; margin-bottom: 1.25rem; }
.wk-testimonial blockquote > :last-child { margin-bottom: 0; }
.wk-testimonial figcaption { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--wk-text-muted); }
.wk-testimonial figcaption img { border-radius: 50%; object-fit: cover; }
.wk-testimonial figcaption strong { display: block; color: var(--wk-text); font-weight: 600; }

/* Questions */
.wk-faq { max-width: 820px; margin-top: 2rem; border-top: 1px solid var(--wk-border); }
.wk-faq details { border-bottom: 1px solid var(--wk-border); }
.wk-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    font-size: 1.0625rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.wk-faq summary::-webkit-details-marker { display: none; }
.wk-faq summary:hover { color: var(--wk-iris-700); }
.wk-faq summary .bi { color: var(--wk-iris-600); transition: transform .2s var(--wk-ease); flex-shrink: 0; }
.wk-faq details[open] summary .bi { transform: rotate(45deg); }
.wk-faq-answer { color: var(--wk-ink-600); padding: 0 2.5rem 1.75rem 0; }
.wk-faq-answer > :last-child { margin-bottom: 0; }

/* --- Pricing page: the picker ------------------------------------------------ */
.js .wk-nojs { display: none; }
.wk-page { padding-top: 5rem; }
.wk-picker { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.wk-picker fieldset { margin: 0 0 3.25rem; padding: 0; border: 0; min-width: 0; }
.wk-picker legend { float: none; font-size: 1.1875rem; font-weight: 650; letter-spacing: -.02em; margin-bottom: 1.25rem; }
.wk-picker-modules { display: grid; gap: .85rem; }
.wk-picker-module {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.15rem 1.4rem;
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    background: var(--wk-surface);
    cursor: pointer;
    transition: border-color .15s var(--wk-ease), background-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease);
}
.wk-picker-module:hover { border-color: var(--wk-iris-300); }
.wk-picker-module:has(input:checked) { border-color: var(--wk-iris-400); background: var(--wk-accent-soft); }
.wk-picker-module:has(input:focus-visible) { box-shadow: 0 0 0 4px rgb(88 66 232 / .15); }
.wk-picker-module .wk-module-icon { margin: 0; background: var(--wk-surface); border: 1px solid var(--wk-iris-100); }
.wk-picker-module-text strong { display: block; font-weight: 600; }
.wk-picker-module-text small { display: block; color: var(--wk-text-muted); font-size: .875rem; }
.wk-picker-module-price { font-weight: 600; white-space: nowrap; }
.wk-picker-needs { font-weight: 400; font-size: .875rem; color: var(--wk-text-muted); margin-left: .25rem; }
.wk-picker-module-text small.wk-picker-needed { color: var(--wk-accent-text); margin-top: .2rem; }
.wk-picker-module-text small.wk-picker-needed[hidden] { display: none; }
.wk-picker-module:has(input:disabled) { cursor: default; }
.wk-picker .form-switch .form-check-input:disabled { opacity: .55; cursor: default; }
.wk-picker .form-switch .form-check-input { width: 2.5em; height: 1.4em; margin: 0; cursor: pointer; }
.form-check-input:checked { background-color: var(--wk-iris-600); border-color: var(--wk-iris-600); }
.form-check-input:focus { box-shadow: none; border-color: var(--wk-iris-400); }
.wk-picker-help { color: var(--wk-text-muted); font-size: .9375rem; margin: 1.1rem 0 0; }
.wk-picker-help strong { color: var(--wk-text); font-weight: 600; }
.wk-picker-users { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; }
.wk-picker-users strong { font-size: 1.5rem; color: var(--wk-iris-700); }

/* The app's slider: in the brand's colour, filled up to its thumb (--wk-range-fill, kept by site.js). */
.wk-range { --wk-range-fill: 0%; height: 1.75rem; }
.wk-range::-webkit-slider-runnable-track {
    height: .5rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--bs-primary) var(--wk-range-fill), var(--wk-ink-200) var(--wk-range-fill));
}
.wk-range::-moz-range-track { height: .5rem; border-radius: 999px; background: var(--wk-ink-200); }
.wk-range::-moz-range-progress { height: .5rem; border-radius: 999px; background: var(--bs-primary); }
.wk-range::-webkit-slider-thumb {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: -.425rem;
    background: var(--wk-surface);
    border: 3px solid var(--bs-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.wk-range::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    background: var(--wk-surface);
    border: 3px solid var(--bs-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

/* Monthly or yearly: two radios shown as one switch. */
.wk-picker-period { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .35rem; border-radius: var(--wk-radius); background: var(--wk-ink-100); }
.wk-picker-period input { position: absolute; opacity: 0; pointer-events: none; }
.wk-picker-period label { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; border-radius: var(--wk-radius-sm); font-weight: 550; font-size: .9375rem; color: var(--wk-ink-600); cursor: pointer; }
.wk-picker-period input:checked + label { background: var(--wk-surface); color: var(--wk-text); box-shadow: var(--wk-shadow-sm); }
.wk-picker-period input:focus-visible + label { box-shadow: 0 0 0 4px rgb(88 66 232 / .15); }
.wk-chip-sm { font-size: .72rem; padding: .15rem .5rem; }

.wk-picker-summary {
    position: sticky;
    top: 6.5rem;
    padding: 2.5rem;
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    background: var(--wk-surface);
    box-shadow: var(--wk-shadow);
}
.wk-picker-summary h2 { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-text-muted); margin: 0 0 .75rem; }
.wk-picker-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin: 0; color: var(--wk-text-muted); }
.wk-picker-total strong { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--wk-ink-950); white-space: nowrap; }
.wk-picker-total s { flex-basis: 100%; }
.wk-picker-saving { margin: .75rem 0 0; font-size: .9375rem; color: #067647; }
.wk-picker-none { margin: .75rem 0 0; font-size: .9375rem; color: #b42318; }
.wk-picker-vat { margin: .75rem 0 2rem; font-size: .875rem; color: var(--wk-text-muted); }
.wk-picker-note { margin: 1.1rem 0 0; font-size: .8125rem; color: var(--wk-text-muted); text-align: center; }
.wk-picker-closed { margin: 0; padding: 1rem 1.25rem; border-radius: var(--wk-radius-sm); background: var(--wk-accent-soft); }
@media (max-width: 991.98px) {
    .wk-picker { grid-template-columns: 1fr; gap: 0; }
    .wk-picker-summary { position: static; padding: 1.75rem; }
    .wk-page { padding-top: 3rem; }
}
@media (max-width: 575.98px) {
    .wk-picker-module { grid-template-columns: minmax(0, 1fr) auto auto; gap: .9rem; padding: 1rem; }
    .wk-picker-module .wk-module-icon { display: none; }
    .wk-picker-needs { display: block; margin-left: 0; }
    .wk-picker-module-text small { display: none; }
    .wk-picker-module-text small.wk-picker-needed:not([hidden]) { display: block; }
}

/* --- Contact ---------------------------------------------------------------- */
.wk-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 5rem; align-items: start; }
.wk-contact-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; font-size: 1.0625rem; max-width: 34rem; }
.wk-contact-points li { display: flex; gap: .9rem; align-items: baseline; }
.wk-contact-points .bi { color: var(--wk-iris-600); }
.wk-contact-form { padding: 3rem; border: 1px solid var(--wk-border); border-radius: var(--wk-radius-lg); background: var(--wk-surface); box-shadow: var(--wk-shadow); }
.wk-field { margin-bottom: 1.5rem; }
.wk-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.wk-contact-form .invalid-feedback { display: block; margin: .4rem 0 0; }
.wk-contact-form .alert { display: flex; gap: .6rem; align-items: baseline; margin-bottom: 1.75rem; }
.wk-contact-privacy { margin: 1.5rem 0 0; font-size: .875rem; color: var(--wk-text-muted); }
.form-control {
    padding: .7rem .9rem;
    border-color: var(--wk-border);
    border-radius: var(--wk-radius-sm);
    transition: border-color .15s var(--wk-ease), box-shadow .15s var(--wk-ease);
}
.form-control:focus { border-color: var(--wk-iris-400); box-shadow: 0 0 0 4px rgb(88 66 232 / .15); }
.form-label { font-weight: 550; font-size: .875rem; margin-bottom: .45rem; }
.form-label span { font-weight: 400; color: var(--wk-text-muted); }
.alert { --bs-alert-border-radius: var(--wk-radius-sm); }
@media (max-width: 991.98px) { .wk-contact { grid-template-columns: 1fr; gap: 1rem; } .wk-contact-form { padding: 1.75rem; } }
@media (max-width: 575.98px) { .wk-field-row { grid-template-columns: 1fr; gap: 0; } }

/* --- Terms and privacy ------------------------------------------------------ */
.wk-legal { max-width: 46rem; }
.wk-legal h1 { margin-bottom: 1rem; }
.wk-legal-note { display: flex; gap: .7rem; align-items: baseline; padding: .9rem 1.1rem; margin-bottom: 2.5rem; border-radius: var(--wk-radius-sm); background: var(--wk-accent-soft); font-size: .9375rem; }
.wk-legal-note .bi { color: var(--wk-accent-text); }
.wk-legal .wk-prose { margin-top: 2.5rem; line-height: 1.75; }
.wk-prose h2 { font-size: 1.375rem; margin: 2.75rem 0 1rem; color: var(--wk-ink-950); }
.wk-prose h3 { font-size: 1.125rem; margin: 2rem 0 .75rem; color: var(--wk-ink-950); }
.wk-prose p, .wk-prose ul, .wk-prose ol { margin-bottom: 1.15rem; }
.wk-prose li { margin-bottom: .4rem; }
.wk-prose table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.wk-prose th, .wk-prose td { padding: .6rem .75rem; border: 1px solid var(--wk-border); text-align: left; vertical-align: top; }

/* --- The error page (stands on its own) -------------------------------------- */
.wk-error { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3rem 1.5rem; text-align: center; }
.wk-error img { height: 40px; width: auto; margin-bottom: 2.5rem; }
.wk-error h1 { font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -.03em; margin: 0; }
.wk-error p { color: var(--wk-text-muted); font-size: 1.125rem; max-width: 44ch; margin: 0 0 1.5rem; }

/* --- Footer ---------------------------------------------------------------- */
.wk-footer { background: var(--wk-canvas); border-top: 1px solid var(--wk-border); padding: 5rem 0 2.5rem; font-size: .9375rem; }
.wk-footer-top { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.wk-footer-lead { color: var(--wk-text-muted); max-width: 32ch; margin: 1rem 0 0; }
.wk-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; align-content: start; }
.wk-footer a { color: var(--wk-ink-600); text-decoration: none; }
.wk-footer a:hover { color: var(--wk-iris-700); }
.wk-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--wk-border); color: var(--wk-text-muted); font-size: .8125rem; }
.wk-footer-social { display: flex; gap: 1rem; font-size: 1.125rem; }
.wk-footer-legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-right: auto; margin-left: 1.5rem; }
@media (max-width: 767.98px) { .wk-footer-bottom { flex-direction: column; align-items: flex-start; } .wk-footer-legal { margin-left: 0; } }
@media (max-width: 767.98px) { .wk-footer-top { grid-template-columns: 1fr 1fr; } .wk-footer-top > :first-child { grid-column: 1 / -1; } }