/* ==========================================================
   JULKLAPPSSPELET — JULKLAPPAR / PAKETVÄLJAREN
   0.1.58

   Page-local design system.
   Explicit surface colours prevent global theme hover/text
   rules from producing unreadable combinations.
   ========================================================== */


.jksg {
    --green: #123b32;
    --green-deep: #0e3029;
    --cream: #f5efe5;
    --paper: #fbf8f2;
    --sand: #ebe2d4;
    --gold: #d7a84f;
    --gold-dark: #9d6719;
    --wine: #7b2d38;
    --ink: #12332c;
    --muted: #66716c;
    --line: rgba(18, 51, 44, .18);

    background: var(--paper);
    color: var(--ink);
}


.jksg *,
.jksg *::before,
.jksg *::after {
    box-sizing: border-box;
}


.jksg-wrap {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}


.jksg h1,
.jksg h2,
.jksg h3,
.jksg p {
    margin-top: 0;
}


.jksg h1,
.jksg h2,
.jksg h3 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}


.jksg h1,
.jksg h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -.045em;
}


.jksg h3 {
    letter-spacing: -.02em;
}


.jksg a {
    transition:
        color .16s ease,
        background-color .16s ease,
        border-color .16s ease,
        opacity .16s ease;
}


.jksg-kicker {
    margin-bottom: 24px;
    color: var(--gold-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}


.jksg-text-link {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}


.jksg-quiet-link {
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    opacity: .72;
}


/* ==========================================================
   EXPLICIT SURFACE COLOUR SYSTEM
   ========================================================== */

.jksg-surface--cream,
.jksg-surface--paper,
.jksg-surface--sand {
    color: var(--ink);
}


.jksg-surface--cream h1,
.jksg-surface--cream h2,
.jksg-surface--cream h3,
.jksg-surface--paper h1,
.jksg-surface--paper h2,
.jksg-surface--paper h3,
.jksg-surface--sand h1,
.jksg-surface--sand h2,
.jksg-surface--sand h3 {
    color: var(--ink);
}


.jksg-surface--green,
.jksg-surface--wine,
.jksg-surface--deep {
    color: var(--cream);
}


.jksg-surface--green h1,
.jksg-surface--green h2,
.jksg-surface--green h3,
.jksg-surface--wine h1,
.jksg-surface--wine h2,
.jksg-surface--wine h3,
.jksg-surface--deep h1,
.jksg-surface--deep h2,
.jksg-surface--deep h3 {
    color: var(--cream) !important;
}


.jksg-surface--green .jksg-kicker,
.jksg-surface--deep .jksg-kicker {
    color: var(--gold) !important;
}


.jksg-surface--wine .jksg-kicker {
    color: #edc47d !important;
}


/* ==========================================================
   COMMON SECTION HEAD
   ========================================================== */

.jksg-section-head {
    max-width: 820px;
    margin-bottom: 64px;
}


.jksg-section-head h2 {
    margin-bottom: 24px;
    font-size: clamp(48px, 5vw, 78px);
    line-height: .98;
}


.jksg-section-head > p:last-child {
    max-width: 670px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.72;
}


.jksg-section-head--compact {
    margin-bottom: 50px;
}


/* ==========================================================
   HERO
   ========================================================== */

.jksg-hero {
    padding: 112px 0 120px;
    background: var(--cream);
}


.jksg-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
    gap: 100px;
    align-items: end;
}


.jksg-hero h1 {
    max-width: 850px;
    margin-bottom: 34px;
    font-size: clamp(60px, 6.15vw, 98px);
    line-height: .94;
}


.jksg-hero h1 span {
    display: block;
}


.jksg-lead {
    max-width: 670px;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.62;
}


.jksg-lead em {
    font-family: Georgia, serif;
    font-style: italic;
}


.jksg-hero__support {
    max-width: 650px;
    margin-bottom: 34px;
    color: #53615c;
    font-size: 16px;
    line-height: 1.72;
}


.jksg-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
}


.jksg-hero .jksg-text-link,
.jksg-hero .jksg-text-link:link,
.jksg-hero .jksg-text-link:visited {
    color: var(--ink) !important;
}


.jksg-hero .jksg-text-link:hover,
.jksg-hero .jksg-text-link:focus-visible {
    color: var(--wine) !important;
}


.jksg-hero .jksg-quiet-link,
.jksg-hero .jksg-quiet-link:link,
.jksg-hero .jksg-quiet-link:visited {
    color: var(--ink) !important;
}


.jksg-hero .jksg-quiet-link:hover,
.jksg-hero .jksg-quiet-link:focus-visible {
    color: var(--wine) !important;
    opacity: 1;
}


.jksg-hero__note {
    padding: 34px;
    border: 1px solid var(--line);
}


.jksg-note__number {
    display: block;
    margin-bottom: 66px;
    color: #b7aa96;
    font-family: Georgia, serif;
    font-size: 54px;
}


.jksg-note__statement {
    margin-bottom: 24px;
    font-family: Georgia, serif;
    font-size: 27px;
    line-height: 1.22;
}


.jksg-hero__note > p:last-child {
    margin-bottom: 0;
    color: #53615c;
    line-height: 1.7;
}


/* ==========================================================
   FINDER
   ========================================================== */

.jksg-finder {
    padding: 120px 0;
    background: var(--green);
}


.jksg-finder .jksg-section-head > p:last-child {
    color: rgba(245, 239, 229, .82) !important;
}


.jksg-finder__form {
    border-top: 1px solid rgba(245,239,229,.22);
}


.jksg-step {
    display: grid;
    grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr);
    gap: 50px;
    margin: 0;
    padding: 34px 0;
    border: 0;
    border-bottom: 1px solid rgba(245,239,229,.22);
    color: var(--cream);
}


.jksg-step legend {
    float: left;
    width: 100%;
    padding: 0;
    color: var(--cream) !important;
    font-family: Georgia, serif;
    font-size: 24px;
    line-height: 1.3;
}


.jksg-step legend span {
    display: inline-block;
    min-width: 45px;
    color: var(--gold) !important;
    font-family: inherit;
    font-size: 14px;
}


.jksg-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


.jksg-options button,
.jksg-options button:link,
.jksg-options button:visited {
    appearance: none;
    padding: 13px 18px;
    border: 1px solid rgba(245,239,229,.35);
    border-radius: 0;
    background: transparent;
    color: var(--cream) !important;
    cursor: pointer;
    font: inherit;
    line-height: 1.3;
    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease;
}


.jksg-options button:hover,
.jksg-options button:focus-visible {
    border-color: var(--cream);
    background: rgba(245,239,229,.08);
    color: #ffffff !important;
}


.jksg-options button.is-selected,
.jksg-options button.is-selected:hover,
.jksg-options button.is-selected:focus-visible {
    border-color: var(--cream);
    background: var(--cream);
    color: var(--green) !important;
}


.jksg-finder__action {
    display: flex;
    gap: 28px;
    align-items: center;
    padding-top: 42px;
}


.jksg-primary,
.jksg-primary:link,
.jksg-primary:visited {
    display: inline-flex;
    min-width: 300px;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
    border: 1px solid var(--cream);
    background: var(--cream);
    color: var(--green) !important;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}


.jksg-primary:not(:disabled):hover,
.jksg-primary:not(:disabled):focus-visible {
    background: #ffffff;
    color: var(--green-deep) !important;
}


.jksg-primary:disabled {
    cursor: not-allowed;
    opacity: .42;
}


.jksg-finder__action p {
    margin: 0;
    color: rgba(245,239,229,.72) !important;
}


.jksg-result {
    margin-top: 70px;
    padding: 52px;
    border: 1px solid rgba(245,239,229,.28);
    color: var(--cream);
}


.jksg-result h3 {
    margin-bottom: 20px;
    color: var(--cream) !important;
    font-family: Georgia, serif;
    font-size: 44px;
    font-weight: 400;
}


.jksg-result__copy {
    max-width: 760px;
    color: rgba(245,239,229,.88) !important;
    font-size: 18px;
    line-height: 1.7;
}


.jksg-result__profile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 42px 0;
    border-top: 1px solid rgba(245,239,229,.22);
    border-bottom: 1px solid rgba(245,239,229,.22);
}


.jksg-result__profile div {
    padding: 24px 18px 24px 0;
}


.jksg-result__profile span,
.jksg-result__profile strong {
    display: block;
}


.jksg-result__profile span {
    margin-bottom: 8px;
    color: rgba(245,239,229,.62) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


.jksg-result__profile strong {
    color: var(--cream) !important;
}


.jksg-result__next {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 28px;
    max-width: 760px;
    margin-bottom: 32px;
}


.jksg-result__next span {
    color: var(--gold) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}


.jksg-result__next p {
    margin: 0;
    color: rgba(245,239,229,.72) !important;
    line-height: 1.65;
}


.jksg-reset,
.jksg-reset:hover,
.jksg-reset:focus-visible {
    padding: 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--cream) !important;
    cursor: pointer;
}


/* ==========================================================
   JUST NU HADE VI VALT
   ========================================================== */

.jksg-now {
    padding: 120px 0;
    background: var(--paper);
}


.jksg-now__intro {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 110px;
    margin-bottom: 64px;
}


.jksg-now h2 {
    max-width: 690px;
    margin-bottom: 0;
    font-size: clamp(50px, 5vw, 78px);
    line-height: .98;
}


.jksg-now__copy {
    align-self: end;
    padding-bottom: 4px;
    font-size: 17px;
    line-height: 1.75;
}


.jksg-now__copy p:last-child {
    margin-bottom: 0;
}


.jksg-coming-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.jksg-coming-grid article {
    position: relative;
    min-height: 390px;
    padding: 30px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.jksg-coming-grid__number {
    display: block;
    margin-bottom: 62px;
    color: #b7aa96;
    font-family: Georgia, serif;
    font-size: 34px;
}


.jksg-coming-grid__label {
    margin-bottom: 13px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}


.jksg-coming-grid h3 {
    max-width: 310px;
    margin-bottom: 18px;
    color: var(--ink) !important;
    font-family: Georgia, serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 1.08;
}


.jksg-coming-grid article > p:not(.jksg-coming-grid__label) {
    max-width: 310px;
    color: #53615c;
    line-height: 1.65;
}


.jksg-coming-grid__status {
    position: absolute;
    right: 30px;
    bottom: 28px;
    left: 30px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: #8a8f8b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}


/* ==========================================================
   BUDGET
   ========================================================== */

.jksg-budgets {
    padding: 120px 0;
    background: var(--cream);
}


.jksg-budget-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.jksg-budget-grid a,
.jksg-budget-grid a:link,
.jksg-budget-grid a:visited {
    position: relative;
    min-height: 315px;
    padding: 26px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink) !important;
    text-decoration: none;
}


.jksg-budget-grid a:hover,
.jksg-budget-grid a:focus-visible {
    background: var(--green);
    color: var(--cream) !important;
}


.jksg-budget-grid a > * {
    transition: none !important;
}


.jksg-budget-grid a:hover *,
.jksg-budget-grid a:focus-visible * {
    color: var(--cream) !important;
}


.jksg-budget-grid span {
    display: block;
    margin-bottom: 68px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
}


.jksg-budget-grid strong {
    display: block;
    margin-bottom: 18px;
    font-family: Georgia, serif;
    font-size: 39px;
    font-weight: 400;
}


.jksg-budget-grid p {
    font-size: 14px;
    line-height: 1.6;
}


.jksg-budget-grid i {
    position: absolute;
    right: 26px;
    bottom: 26px;
    font-style: normal;
}


/* ==========================================================
   EDITORIAL
   ========================================================== */

.jksg-editorial {
    padding: 120px 0;
    background: var(--sand);
}


.jksg-editorial__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
}


.jksg-editorial h2 {
    max-width: 620px;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1;
}


.jksg-editorial__body {
    padding-top: 44px;
    font-size: 17px;
    line-height: 1.8;
}


.jksg-editorial__body p {
    margin-bottom: 26px;
}


.jksg-editorial__lead {
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 27px;
    line-height: 1.35;
}


.jksg-rule {
    margin-top: 44px;
    padding: 28px 0 0;
    border-top: 1px solid var(--line);
}


.jksg-rule span {
    display: block;
    margin-bottom: 12px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}


.jksg-rule strong {
    display: block;
    max-width: 560px;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.35;
}


/* ==========================================================
   FACTORS
   ========================================================== */

.jksg-factors {
    padding: 120px 0;
    background: var(--paper);
}


.jksg-factor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.jksg-factor-grid article {
    min-height: 310px;
    padding: 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.jksg-factor-grid article > span {
    display: block;
    margin-bottom: 72px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
}


.jksg-factor-grid h3 {
    margin-bottom: 18px;
    color: var(--ink) !important;
    font-family: Georgia, serif;
    font-size: 34px;
    font-weight: 400;
}


.jksg-factor-grid p {
    max-width: 310px;
    margin-bottom: 0;
    color: #53615c;
    line-height: 1.7;
}


/* ==========================================================
   STÖLDFAKTOR
   ========================================================== */

.jksg-score {
    padding: 120px 0;
    background: var(--wine);
}


.jksg-score__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    gap: 105px;
    align-items: center;
}


.jksg-score__copy h2 {
    max-width: 700px;
    margin-bottom: 32px;
    color: var(--cream) !important;
    font-size: clamp(50px, 5vw, 78px);
    line-height: .98;
}


.jksg-score__copy > p {
    max-width: 640px;
    color: rgba(245,239,229,.86) !important;
    font-size: 17px;
    line-height: 1.75;
}


.jksg-score__copy > p:last-child {
    margin-bottom: 0;
}


.jksg-scorecard {
    padding: 44px;
    border: 1px solid rgba(245,239,229,.35);
    color: var(--cream);
}


.jksg-scorecard__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}


.jksg-scorecard__top span {
    color: var(--cream) !important;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}


.jksg-scorecard__top strong {
    color: var(--cream) !important;
    font-family: Georgia, serif;
    font-size: 58px;
    font-weight: 400;
}


.jksg-scorecard__meter {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 5px;
    margin: 20px 0 28px;
}


.jksg-scorecard__meter i {
    height: 7px;
    background: rgba(245,239,229,.25);
}


.jksg-scorecard > p {
    margin-bottom: 32px;
    color: rgba(245,239,229,.76) !important;
    line-height: 1.7;
}


.jksg-scorecard dl {
    margin: 0 0 40px;
}


.jksg-scorecard dl div {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid rgba(245,239,229,.2);
}


.jksg-scorecard dt,
.jksg-scorecard dd {
    margin: 0;
    color: var(--cream) !important;
    font-weight: 700;
}


.jksg-scorecard a,
.jksg-scorecard a:link,
.jksg-scorecard a:visited {
    display: inline-flex;
    gap: 12px;
    color: var(--cream) !important;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 5px;
}


.jksg-scorecard a:hover,
.jksg-scorecard a:focus-visible {
    color: #edc47d !important;
}


/* ==========================================================
   AUDIENCES
   ========================================================== */

.jksg-audiences {
    padding: 120px 0;
    background: var(--cream);
}


.jksg-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.jksg-audience-grid article {
    min-height: 330px;
    padding: 34px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.jksg-audience-grid article > span {
    display: block;
    margin-bottom: 62px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
}


.jksg-audience-grid h3 {
    max-width: 480px;
    margin-bottom: 18px;
    color: var(--ink) !important;
    font-family: Georgia, serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
}


.jksg-audience-grid p {
    max-width: 480px;
    line-height: 1.7;
}


.jksg-audience-grid strong {
    display: block;
    max-width: 480px;
    margin-top: 24px;
    color: #53615c;
    font-size: 13px;
    line-height: 1.6;
}


/* ==========================================================
   SKIP
   ========================================================== */

.jksg-skip {
    padding: 120px 0;
    background: var(--green);
}


.jksg-skip__grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 110px;
}


.jksg-skip__intro h2 {
    max-width: 610px;
    margin-bottom: 28px;
    color: var(--cream) !important;
    font-size: clamp(48px, 4.8vw, 72px);
    line-height: 1;
}


.jksg-skip__intro > p:last-child {
    max-width: 560px;
    color: rgba(245,239,229,.78) !important;
    font-size: 17px;
    line-height: 1.75;
}


.jksg-skip__list {
    border-top: 1px solid rgba(245,239,229,.22);
}


.jksg-skip__list article {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 22px;
    padding: 28px 0;
    border-bottom: 1px solid rgba(245,239,229,.22);
}


.jksg-skip__list article > span {
    color: var(--gold) !important;
    font-family: Georgia, serif;
    font-size: 17px;
}


.jksg-skip__list h3 {
    margin-bottom: 10px;
    color: var(--cream) !important;
    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 400;
}


.jksg-skip__list p {
    max-width: 540px;
    margin-bottom: 0;
    color: rgba(245,239,229,.75) !important;
    line-height: 1.68;
}


/* ==========================================================
   QUICK ANSWERS / AEO
   ========================================================== */

.jksg-answers {
    padding: 120px 0;
    background: var(--paper);
}


.jksg-answer-list {
    border-top: 1px solid var(--line);
}


.jksg-answer-list article {
    display: grid;
    grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
    gap: 80px;
    padding: 34px 0;
    border-bottom: 1px solid var(--line);
}


.jksg-answer-list h3 {
    max-width: 430px;
    margin-bottom: 0;
    color: var(--ink) !important;
    font-family: Georgia, serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.22;
}


.jksg-answer-list p {
    max-width: 650px;
    margin-bottom: 0;
    color: #53615c;
    line-height: 1.72;
}


/* ==========================================================
   CLOSE
   ========================================================== */

.jksg-close {
    padding: 100px 0;
    background: var(--green-deep);
}


.jksg-close__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}


.jksg-close h2 {
    max-width: 610px;
    margin-bottom: 28px;
    color: var(--cream) !important;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1;
}


.jksg-close__grid > div > p:last-child {
    max-width: 560px;
    color: rgba(245,239,229,.76) !important;
    line-height: 1.7;
}


.jksg-close__links {
    border-top: 1px solid rgba(245,239,229,.25);
}


.jksg-close__links a,
.jksg-close__links a:link,
.jksg-close__links a:visited {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    padding: 23px 0;
    border-bottom: 1px solid rgba(245,239,229,.25);
    color: var(--cream) !important;
    text-decoration: none;
}


.jksg-close__links a:hover,
.jksg-close__links a:focus-visible {
    color: var(--gold) !important;
}


.jksg-close__links a * {
    color: inherit !important;
}


.jksg-close__links span {
    display: flex;
    gap: 18px;
    align-items: baseline;
}


.jksg-close__links small {
    color: var(--gold) !important;
    font-size: 10px;
    font-weight: 800;
}


.jksg-close__links i {
    font-style: normal;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1000px) {

    .jksg-budget-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


@media (max-width: 900px) {

    .jksg-wrap {
        width: min(calc(100% - 32px), 680px);
    }


    .jksg-hero,
    .jksg-finder,
    .jksg-now,
    .jksg-budgets,
    .jksg-editorial,
    .jksg-factors,
    .jksg-score,
    .jksg-audiences,
    .jksg-skip,
    .jksg-answers,
    .jksg-close {
        padding-top: 78px;
        padding-bottom: 78px;
    }


    .jksg-hero__grid,
    .jksg-now__intro,
    .jksg-editorial__grid,
    .jksg-score__grid,
    .jksg-skip__grid,
    .jksg-close__grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }


    .jksg-hero h1 {
        font-size: clamp(52px, 12vw, 76px);
    }


    .jksg-hero__note {
        max-width: 540px;
    }


    .jksg-note__number {
        margin-bottom: 40px;
    }


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


    .jksg-step legend {
        float: none;
    }


    .jksg-result__profile {
        grid-template-columns: 1fr 1fr;
    }


    .jksg-coming-grid {
        grid-template-columns: 1fr;
    }


    .jksg-coming-grid article {
        min-height: 320px;
    }


    .jksg-budget-grid {
        grid-template-columns: 1fr 1fr;
    }


    .jksg-factor-grid {
        grid-template-columns: 1fr;
    }


    .jksg-factor-grid article {
        min-height: 250px;
    }


    .jksg-score__grid {
        max-width: 700px;
    }


    .jksg-scorecard {
        max-width: 540px;
    }


    .jksg-audience-grid {
        grid-template-columns: 1fr;
    }


    .jksg-answer-list article {
        grid-template-columns: 1fr;
        gap: 18px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 560px) {

    .jksg-wrap {
        width: calc(100% - 28px);
    }


    .jksg-hero h1 {
        font-size: 48px;
        line-height: .98;
    }


    .jksg-hero h1 span {
        display: inline;
    }


    .jksg-lead {
        font-size: 18px;
    }


    .jksg-section-head h2,
    .jksg-now h2,
    .jksg-editorial h2,
    .jksg-score__copy h2,
    .jksg-skip__intro h2,
    .jksg-close h2 {
        font-size: 42px;
        line-height: 1.02;
    }


    .jksg-hero__actions {
        display: grid;
        justify-items: start;
        gap: 18px;
    }


    .jksg-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .jksg-options button {
        min-height: 52px;
        padding: 12px 13px;
        text-align: left;
    }


    .jksg-finder__action {
        display: block;
    }


    .jksg-primary {
        width: 100%;
        min-width: 0;
    }


    .jksg-finder__action p {
        margin-top: 16px;
    }


    .jksg-result {
        padding: 28px 22px;
    }


    .jksg-result h3 {
        font-size: 36px;
    }


    .jksg-result__profile {
        grid-template-columns: 1fr;
    }


    .jksg-result__next {
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .jksg-coming-grid article {
        min-height: 350px;
    }


    .jksg-budget-grid {
        grid-template-columns: 1fr;
    }


    .jksg-budget-grid a {
        min-height: 235px;
    }


    .jksg-budget-grid span {
        margin-bottom: 42px;
    }


    .jksg-editorial__body {
        padding-top: 0;
    }


    .jksg-editorial__lead,
    .jksg-rule strong {
        font-size: 24px;
    }


    .jksg-factor-grid article > span {
        margin-bottom: 44px;
    }


    .jksg-scorecard {
        padding: 28px 22px;
    }


    .jksg-scorecard__top strong {
        font-size: 48px;
    }


    .jksg-audience-grid article > span {
        margin-bottom: 42px;
    }


    .jksg-skip__list article {
        grid-template-columns: 38px 1fr;
        gap: 14px;
    }


    .jksg-answer-list h3 {
        font-size: 24px;
    }


    .jksg-close__links span {
        gap: 12px;
    }

}


/* ==========================================================
   JKS JULKLAPPAR TYPOGRAPHY 0.1.59

   Precision polish only:
   - more breathing room in large editorial headings
   - clean mobile Paketväljaren rhythm
   - separator belongs to the full step
   - number + question stay aligned
   - no HTML / JS / finder logic changes
   ========================================================== */


/* ----------------------------------------------------------
   LARGE EDITORIAL HEADINGS

   Preserve oversized editorial character while preventing
   adjacent lines from visually colliding.
   ---------------------------------------------------------- */

.jksg-hero h1 {
    line-height: .96;
}


/* ----------------------------------------------------------
   MOBILE PAKETVÄLJAREN
   ---------------------------------------------------------- */

@media (max-width: 560px) {

    /*
     * Each question becomes its own clearly separated unit.
     * The border belongs to the entire step, not the legend.
     */
    .jksg-finder .jksg-step {
        position: relative;
        display: block;
        padding-top: 28px;
        padding-bottom: 38px;
        border-top: 1px solid rgba(247, 242, 232, .25);
    }

    /*
     * First separator should sit naturally beneath the
     * Paketväljaren introduction.
     */
    .jksg-finder__form .jksg-step:first-child {
        margin-top: 8px;
    }

    /*
     * Number + question use a stable two-column grid.
     * This prevents the number, heading and separator from
     * drifting independently on narrow screens.
     */
    .jksg-finder .jksg-step legend {
        width: 100%;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;

        margin: 0 0 28px;
        padding: 0;

        line-height: 1.08;
        border: 0;
    }

    .jksg-finder .jksg-step legend span {
        display: block;
        padding-top: .12em;
        margin: 0;
        line-height: 1;
    }

    /*
     * Keep the options visually detached from the heading.
     * Existing button/grid styling remains untouched.
     */
    .jksg-finder .jksg-options {
        margin-top: 0;
    }

}


/* ----------------------------------------------------------
   VERY NARROW PHONES

   Give long Swedish question headings enough vertical rhythm
   without shrinking the typography into generic mobile UI.
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .jksg-finder .jksg-step legend {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 10px;
        line-height: 1.12;
    }

}



/* ==========================================================
   JKS FINDER RESPONSIVE RHYTHM 0.1.60

   Desktop:
   - gives question copy enough editorial width
   - avoids orphan words such as "som?" / "skapa?"

   Mobile:
   - creates deliberate space between question groups
   - separator sits BETWEEN groups instead of touching heading

   Finder logic and option controls untouched.
   ========================================================== */


/* ----------------------------------------------------------
   DESKTOP / LARGE TABLET
   ---------------------------------------------------------- */

@media (min-width: 901px) {

    .jksg-finder .jksg-step {
        grid-template-columns:
            minmax(340px, 36%)
            minmax(0, 1fr);
        column-gap: 48px;
    }

    .jksg-finder .jksg-step legend {
        min-width: 0;
        max-width: none;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 560px) {

    /*
     * 0.1.59 used the top border of each step as separator.
     * Remove it so the separator can sit independently
     * between two complete question groups.
     */
    .jksg-finder .jksg-step {
        border-top: 0 !important;
        padding-top: 0;
        padding-bottom: 0;
    }

    /*
     * Every step after the first receives a separator with
     * generous breathing room on BOTH sides.
     */
    .jksg-finder .jksg-step + .jksg-step {
        margin-top: 42px;
        padding-top: 43px;
        position: relative;
    }

    .jksg-finder .jksg-step + .jksg-step::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(247, 242, 232, .25);
    }

    /*
     * Give the question its own space before the controls.
     */
    .jksg-finder .jksg-step legend {
        margin-bottom: 34px;
    }

    /*
     * Restore a clean first-step start beneath the finder intro.
     */
    .jksg-finder__form .jksg-step:first-child {
        margin-top: 0;
    }

}


/* ----------------------------------------------------------
   NARROW MOBILE
   ---------------------------------------------------------- */

@media (max-width: 390px) {

    .jksg-finder .jksg-step + .jksg-step {
        margin-top: 36px;
        padding-top: 37px;
    }

    .jksg-finder .jksg-step legend {
        margin-bottom: 30px;
    }

}



/* ==========================================================
   JKS PAKETVALJAREN MOBILE HIERARCHY 0.1.61

   Mobile visual hierarchy:
   QUESTION
   subtle rule
   ANSWERS
   generous space
   NEXT QUESTION

   Desktop is intentionally untouched.
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Each finder step becomes one clear visual unit.
     * Remove inherited row separators from previous versions.
     */
    .jksg .jksg-finder__step,
    .jksg .jksg-step {
        position: relative;
        border-top: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 58px !important;
    }

    /*
     * No old pseudo-element may create a full-width line
     * above/below the mobile question group.
     */
    .jksg .jksg-finder__step::before,
    .jksg .jksg-finder__step::after,
    .jksg .jksg-step::before,
    .jksg .jksg-step::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
    }

    /*
     * Question row:
     * number in narrow left column,
     * heading in the main editorial column.
     */
    .jksg .jksg-finder__question,
    .jksg .jksg-question {
        position: relative;
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        column-gap: 24px !important;
        align-items: start !important;

        border: 0 !important;
        padding: 0 0 29px 0 !important;
        margin: 0 0 32px 0 !important;
    }

    /*
     * The ONLY separator on mobile.
     * It starts underneath the question text rather than
     * underneath the number, creating a premium editorial
     * relationship between number and heading.
     */
    .jksg .jksg-finder__question::after,
    .jksg .jksg-question::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 116px !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 1px !important;
        background: rgba(247, 242, 232, .28) !important;
        border: 0 !important;
    }

    /*
     * Prevent any inherited line on the question's
     * internal children.
     */
    .jksg .jksg-finder__question > *,
    .jksg .jksg-question > * {
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    /*
     * Answers clearly belong to the question ABOVE.
     */
    .jksg .jksg-finder__options,
    .jksg .jksg-options,
    .jksg .jksg-choice-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
    }

    /*
     * Last step does not need the large trailing gap.
     */
    .jksg .jksg-finder__step:last-child,
    .jksg .jksg-step:last-child {
        margin-bottom: 30px !important;
    }
}


/*
 * Narrow phones:
 * retain the hierarchy but give the question more room.
 */
@media (max-width: 480px) {

    .jksg .jksg-finder__question,
    .jksg .jksg-question {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        column-gap: 20px !important;
        padding-bottom: 27px !important;
        margin-bottom: 30px !important;
    }

    .jksg .jksg-finder__question::after,
    .jksg .jksg-question::after {
        left: 102px !important;
    }

    .jksg .jksg-finder__step,
    .jksg .jksg-step {
        margin-bottom: 56px !important;
    }
}



/* ==========================================================
   JKS FINDER MOBILE CLEAN GROUPS 0.1.62

   Actual markup:
   fieldset.jksg-step
     legend
     .jksg-options

   Mobile hierarchy:
   question -> answers -> breathing room -> next question.

   No separator lines on mobile.
   ========================================================== */

@media (max-width: 900px) {

    /*
     * Completely neutralise every old separator source
     * on the real fieldset structure.
     */
    .jksg .jksg-finder__form,
    .jksg .jksg-finder__form fieldset,
    .jksg .jksg-finder .jksg-step,
    .jksg .jksg-finder .jksg-step legend,
    .jksg .jksg-finder .jksg-options {
        border-top: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    .jksg .jksg-finder__form::before,
    .jksg .jksg-finder__form::after,
    .jksg .jksg-finder .jksg-step::before,
    .jksg .jksg-finder .jksg-step::after,
    .jksg .jksg-finder .jksg-step legend::before,
    .jksg .jksg-finder .jksg-step legend::after,
    .jksg .jksg-finder .jksg-options::before,
    .jksg .jksg-finder .jksg-options::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
    }

    /*
     * Each question + its answers is one visual group.
     */
    .jksg .jksg-finder .jksg-step {
        display: block !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 0 58px !important;
    }

    /*
     * Real question element.
     * Number and question sit on one editorial row.
     */
    .jksg .jksg-finder .jksg-step legend {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) !important;
        column-gap: 24px !important;
        align-items: start !important;

        padding: 0 !important;
        margin: 0 0 34px !important;

        line-height: 1.12 !important;
    }

    .jksg .jksg-finder .jksg-step legend > span {
        display: block !important;
        margin: 0 !important;
        padding: .12em 0 0 !important;
        line-height: 1 !important;
    }

    /*
     * Answers belong unmistakably to the question above.
     */
    .jksg .jksg-finder .jksg-options {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /*
     * Slightly less space after final question before CTA.
     */
    .jksg .jksg-finder .jksg-step:last-of-type {
        margin-bottom: 34px !important;
    }
}


@media (max-width: 480px) {

    .jksg .jksg-finder .jksg-step legend {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        column-gap: 20px !important;
        margin-bottom: 30px !important;
        line-height: 1.14 !important;
    }

    .jksg .jksg-finder .jksg-step {
        margin-bottom: 54px !important;
    }

    .jksg .jksg-finder .jksg-step:last-of-type {
        margin-bottom: 30px !important;
    }
}



/* ==========================================================
   JKS 0.1.68 — CURATED CATALOG
   ========================================================== */

.jksg-now .jks-curated-catalog {
    margin: 0;
}

.jksg-now .jks-curated-catalog__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
    gap: 90px;
    align-items: end;
    margin-bottom: 62px;
}

.jksg-now .jks-curated-catalog__eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 -58px;
    color: var(--gold-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.jksg-now .jks-curated-catalog__intro h2 {
    max-width: 720px;
    margin: 0;
    color: var(--ink) !important;
    font-family: Georgia, serif;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 400;
    line-height: .99;
    letter-spacing: -.025em;
}

.jksg-now .jks-curated-catalog__lead {
    max-width: 520px;
    margin: 0 0 5px;
    color: #53615c;
    font-size: 17px;
    line-height: 1.75;
}

.jksg-now .jks-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 1px;
    background: var(--line);
}

.jksg-now .jks-product-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    border: 0;
    background: var(--paper);
    overflow: hidden;
}

.jksg-now .jks-product-card__media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee9e1;
}

.jksg-now .jks-product-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.jksg-now .jks-product-card:hover .jks-product-card__media img {
    transform: scale(1.025);
}

.jksg-now .jks-product-card__image-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    padding: 30px;
    color: #7a7e7b;
    text-align: center;
}

.jksg-now .jks-product-card__steal {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 5px;
    align-items: baseline;
    padding: 11px 13px;
    background: rgba(28, 47, 40, .93);
    color: var(--cream);
    backdrop-filter: blur(8px);
}

.jksg-now .jks-product-card__steal-label {
    color: rgba(245, 239, 229, .76);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jksg-now .jks-product-card__steal-score {
    color: var(--cream);
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

.jksg-now .jks-product-card__steal-max {
    color: rgba(245, 239, 229, .62);
    font-size: 10px;
}

.jksg-now .jks-product-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 25px 25px 27px;
}

.jksg-now .jks-product-card__merchant {
    margin: 0 0 10px;
    color: var(--gold-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.jksg-now .jks-product-card__title {
    margin: 0 0 19px;
    color: var(--ink) !important;
    font-family: Georgia, serif;
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 400;
    line-height: 1.1;
}

.jksg-now .jks-product-card__commerce {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    margin-bottom: 18px;
}

.jksg-now .jks-product-card__price {
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: 400;
}

.jksg-now .jks-product-card__stock {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.jksg-now .jks-product-card__verdict {
    margin: 0 0 25px;
    color: #53615c;
    font-size: 14px;
    line-height: 1.65;
}

.jksg-now .jks-product-card__footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.jksg-now .jks-product-card__cta,
.jksg-now .jks-product-card__cta:link,
.jksg-now .jks-product-card__cta:visited {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    color: var(--ink) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .055em;
    text-decoration: none;
    text-transform: uppercase;
}

.jksg-now .jks-product-card__cta:not(.jks-product-card__cta--disabled)::after {
    content: "→";
    font-size: 16px;
    font-weight: 400;
}

.jksg-now .jks-product-card__cta:hover,
.jksg-now .jks-product-card__cta:focus-visible {
    color: var(--gold-dark) !important;
}

.jksg-now .jks-product-card__cta--disabled {
    color: #929591 !important;
}

.jksg-now .jks-curated-catalog__note {
    max-width: 720px;
    margin: 30px 0 0;
    color: #737a76;
    font-size: 12px;
    line-height: 1.65;
}


/* TABLET */

@media (max-width: 980px) {

    .jksg-now .jks-curated-catalog__intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .jksg-now .jks-curated-catalog__eyebrow {
        grid-column: auto;
        margin: 0 0 5px;
    }

    .jksg-now .jks-curated-catalog__lead {
        max-width: 680px;
    }

    .jksg-now .jks-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* MOBILE */

@media (max-width: 640px) {

    .jksg-now .jks-curated-catalog__intro {
        margin-bottom: 38px;
    }

    .jksg-now .jks-curated-catalog__intro h2 {
        font-size: clamp(40px, 12vw, 55px);
        line-height: 1;
    }

    .jksg-now .jks-curated-catalog__lead {
        font-size: 16px;
        line-height: 1.7;
    }

    .jksg-now .jks-product-grid {
        grid-template-columns: 1fr;
    }

    .jksg-now .jks-product-card__body {
        padding: 22px 20px 24px;
    }

    .jksg-now .jks-product-card__title {
        font-size: 27px;
    }
}



/* =========================================================
   JKS LIVE FINDER 0.1.69
   ========================================================= */

.jks-live-finder {
    position: relative;
    padding: clamp(72px, 9vw, 128px) 0;
}

.jks-live-finder__shell {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid rgba(53, 43, 34, .10);
    border-radius: 32px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(151, 48, 42, .08),
            transparent 35%
        ),
        rgba(255, 252, 247, .92);
    box-shadow:
        0 26px 70px rgba(57, 43, 31, .08);
}

.jks-live-finder__intro {
    max-width: 760px;
    margin-bottom: clamp(30px, 5vw, 52px);
}

.jks-live-finder__kicker {
    margin: 0 0 12px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.jks-live-finder__intro h2 {
    margin: 0;
    max-width: 720px;
}

.jks-live-finder__lead {
    max-width: 650px;
    margin: 18px 0 0;
    font-size: clamp(1rem, 1.7vw, 1.16rem);
    line-height: 1.7;
}

.jks-live-finder__form {
    position: relative;
}

.jks-live-finder__fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.jks-live-finder__field {
    display: block;
}

.jks-live-finder__label {
    display: block;
    margin-bottom: 9px;
    font-size: .88rem;
    font-weight: 750;
}

.jks-live-finder__select-wrap {
    position: relative;
    display: block;
}

.jks-live-finder__select {
    width: 100%;
    min-height: 58px;
    padding: 0 42px 0 16px;
    border: 1px solid rgba(53, 43, 34, .16);
    border-radius: 15px;
    background: #fff;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: auto;
}

.jks-live-finder__select:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.jks-live-finder__submit-row {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 24px;
}

.jks-live-finder__submit {
    min-height: 56px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #8e2f2a;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 12px 28px rgba(98, 37, 33, .18);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.jks-live-finder__submit:hover {
    transform: translateY(-1px);
    box-shadow:
        0 16px 34px rgba(98, 37, 33, .23);
}

.jks-live-finder__microcopy {
    max-width: 470px;
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    opacity: .72;
}

.jks-live-finder__notice {
    margin-top: 24px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(142, 47, 42, .08);
    font-weight: 650;
}

.jks-live-finder__results {
    margin-top: clamp(44px, 7vw, 72px);
    padding-top: clamp(38px, 5vw, 56px);
    border-top: 1px solid rgba(53, 43, 34, .12);
}


/* Results */

.jks-finder-results__intro {
    max-width: 700px;
    margin-bottom: 28px;
}

.jks-finder-results__kicker {
    margin: 0 0 8px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.jks-finder-results__intro h2 {
    margin: 0;
}

.jks-finder-results__intro > p:last-child {
    margin: 14px 0 0;
    line-height: 1.65;
}

.jks-finder-results__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.jks-finder-result {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(53, 43, 34, .11);
    border-radius: 22px;
    background: #fff;
    box-shadow:
        0 16px 42px rgba(57, 43, 31, .07);
}

.jks-finder-result__rank {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    box-shadow:
        0 5px 18px rgba(0,0,0,.09);
    font-size: .82rem;
    font-weight: 850;
}

.jks-finder-result__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f4f0e9;
}

.jks-finder-result__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.jks-finder-result__body {
    padding: 20px;
}

.jks-finder-result__eyebrow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    font-size: .76rem;
    font-weight: 750;
}

.jks-finder-result__tier {
    opacity: .72;
}

.jks-finder-result__match {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(58, 95, 66, .10);
}

.jks-finder-result__title {
    margin: 0;
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    line-height: 1.25;
}

.jks-finder-result__commerce {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.jks-finder-result__price {
    font-size: 1.08rem;
}

.jks-finder-result__merchant {
    font-size: .84rem;
    opacity: .65;
}

.jks-finder-result__reasons {
    display: grid;
    gap: 7px;
    margin: 17px 0 0;
    padding: 0;
    list-style: none;
}

.jks-finder-result__reasons li {
    position: relative;
    padding-left: 18px;
    font-size: .88rem;
    line-height: 1.45;
}

.jks-finder-result__reasons li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 850;
}

.jks-finder-result__verdict {
    margin: 17px 0 0;
    font-size: .9rem;
    line-height: 1.55;
}

.jks-finder-result__signals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
}

.jks-finder-result__signals span {
    padding: 10px 11px;
    border-radius: 12px;
    background: #f6f2ec;
    font-size: .72rem;
    line-height: 1.35;
}

.jks-finder-result__signals strong {
    display: block;
    margin-top: 2px;
    font-size: .9rem;
}

.jks-finder-result__action {
    margin-top: 18px;
}

.jks-finder-result__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: #8e2f2a;
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 800;
}

.jks-finder-result__cta:hover {
    color: #fff;
}

.jks-finder-result__cta--disabled {
    opacity: .48;
    cursor: default;
}


/* Tablet */

@media (max-width: 960px) {

    .jks-live-finder__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jks-finder-results__grid {
        grid-template-columns: 1fr;
    }

    .jks-finder-result {
        display: grid;
        grid-template-columns: minmax(220px, .75fr) 1fr;
    }

    .jks-finder-result__media {
        height: 100%;
        aspect-ratio: auto;
    }

}


/* Mobile */

@media (max-width: 640px) {

    .jks-live-finder {
        padding: 58px 0;
    }

    .jks-live-finder__shell {
        width: min(100% - 24px, 1180px);
        padding: 24px 18px;
        border-radius: 22px;
    }

    .jks-live-finder__fields {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .jks-live-finder__submit-row {
        display: block;
    }

    .jks-live-finder__submit {
        width: 100%;
    }

    .jks-live-finder__microcopy {
        margin-top: 13px;
        text-align: center;
    }

    .jks-finder-result {
        display: block;
    }

    .jks-finder-result__media {
        aspect-ratio: 4 / 3;
    }

    .jks-finder-result__signals {
        grid-template-columns: 1fr 1fr;
    }

}


/* ==========================================================
   JKS 0.1.70 — CATALOG GRID REFINEMENT

   General catalog:
   - 4 columns desktop
   - 2 columns tablet/mobile

   Finder recommendation grid remains independent.
   ========================================================== */

@media (min-width: 981px) {

    .jksg-now .jks-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .jksg-now .jks-product-card__body {
        padding: 22px 20px 24px;
    }

    .jksg-now .jks-product-card__title {
        font-size: clamp(21px, 1.65vw, 27px);
    }

    .jksg-now .jks-product-card__price {
        font-size: 21px;
    }
}


@media (max-width: 980px) {

    .jksg-now .jks-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 640px) {

    .jksg-now .jks-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jksg-now .jks-product-card__body {
        padding: 16px 13px 18px;
    }

    .jksg-now .jks-product-card__merchant {
        margin-bottom: 7px;
        font-size: 8px;
    }

    .jksg-now .jks-product-card__title {
        margin-bottom: 12px;
        font-size: clamp(18px, 5.2vw, 23px);
        line-height: 1.08;
    }

    .jksg-now .jks-product-card__commerce {
        gap: 5px 8px;
        margin-bottom: 12px;
    }

    .jksg-now .jks-product-card__price {
        font-size: 18px;
    }

    .jksg-now .jks-product-card__stock {
        font-size: 8px;
    }

    .jksg-now .jks-product-card__verdict {
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 1.5;
    }

    .jksg-now .jks-product-card__footer {
        padding-top: 12px;
    }

    .jksg-now .jks-product-card__cta,
    .jksg-now .jks-product-card__cta:link,
    .jksg-now .jks-product-card__cta:visited {
        gap: 7px;
        font-size: 9px;
        letter-spacing: .035em;
    }

    .jksg-now .jks-product-card__steal {
        right: 8px;
        bottom: 8px;
        left: 8px;
        gap: 3px;
        padding: 8px;
    }

    .jksg-now .jks-product-card__steal-label {
        font-size: 7px;
        letter-spacing: .04em;
    }

    .jksg-now .jks-product-card__steal-score {
        font-size: 17px;
    }

    .jksg-now .jks-product-card__steal-max {
        font-size: 8px;
    }
}


/* ==========================================================
   CANONICAL BUDGET PAGES — CLUSTER NAVIGATION 0.1.80H1
   ========================================================== */

.jks-budget-breadcrumb {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}

.jks-budget-breadcrumb nav {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
    font-size: 12px;
    line-height: 1.5;
}

.jks-budget-breadcrumb a {
    color: var(--ink);
    text-decoration: none;
}

.jks-budget-breadcrumb span {
    opacity: .58;
}

.jks-budget-nav {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--cream);
}

.jks-budget-nav .jksg-wrap {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    min-height: 78px;
}

.jks-budget-nav a {
    color: var(--ink);
    text-decoration: none;
}

.jks-budget-nav__hub {
    font-family: Georgia, serif;
    font-size: 17px;
}

.jks-budget-nav__levels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jks-budget-nav__levels a {
    min-width: 68px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.jks-budget-nav__levels a:hover,
.jks-budget-nav__levels a:focus-visible,
.jks-budget-nav__levels a[aria-current="page"] {
    background: var(--green);
    color: var(--cream);
}

.jks-budget-subhead {
    margin: 38px 0 12px;
    font-family: Georgia, serif;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 400;
    line-height: 1.2;
}

.jks-budget-explore {
    padding: 100px 0;
}

.jks-budget-explore__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 42px;
    padding: 1px;
    background: var(--line);
}

.jks-budget-explore__grid a {
    display: flex;
    min-height: 210px;
    padding: 26px;
    flex-direction: column;
    justify-content: space-between;
    background: var(--cream);
    color: var(--ink);
    text-decoration: none;
}

.jks-budget-explore__grid a:hover,
.jks-budget-explore__grid a:focus-visible {
    background: var(--green);
    color: var(--cream);
}

.jks-budget-explore__grid small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.jks-budget-explore__grid strong {
    font-family: Georgia, serif;
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 400;
}

.jks-budget-explore__grid span {
    font-size: 13px;
    font-weight: 700;
}


@media (max-width: 760px) {

    .jks-budget-nav .jksg-wrap {
        padding-top: 18px;
        padding-bottom: 18px;
        flex-direction: column;
        align-items: stretch;
    }

    .jks-budget-nav__levels {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }

    .jks-budget-nav__levels a {
        min-width: 0;
        padding: 10px 4px;
    }

    .jks-budget-explore {
        padding: 72px 0;
    }

    .jks-budget-explore__grid {
        grid-template-columns: 1fr;
    }

    .jks-budget-explore__grid a {
        min-height: 150px;
    }
}

/* ==========================================================
   JKS 0.1.80H4 — progressive product grid
   200 kr: show 12 first, reveal remaining products on demand
   ========================================================== */

.jks-budget-progressive--ready
.jks-product-card--progressive-hidden {
    display: none;
}

.jks-budget-progressive__actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.jks-budget-progressive__button {
    appearance: none;
    border: 1px solid rgba(31, 48, 40, 0.18);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    padding: 14px 24px;
    cursor: pointer;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.jks-budget-progressive__button:hover {
    transform: translateY(-1px);
    border-color: rgba(31, 48, 40, 0.32);
    box-shadow: 0 8px 24px rgba(31, 48, 40, 0.08);
}

.jks-budget-progressive__button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .jks-budget-progressive__actions {
        margin-top: 24px;
    }

    .jks-budget-progressive__button {
        width: 100%;
        max-width: 340px;
    }
}


/* ==========================================================
   JKS 0.1.80H6 — BUDGET EDITORIAL PREMIUM
   Warm editorial rhythm for budget landing pages
   ========================================================== */


/* ---------- Shared editorial heading ---------- */

.jks-budget-section-head {
    max-width: 760px;
    margin: 0 0 42px;
}

.jks-budget-section-head h2 {
    max-width: 720px;
    margin: 8px 0 0;
}

.jks-budget-section-head .jksg-kicker {
    margin-bottom: 10px;
}


/* ---------- Quick facts ---------- */

.jks-budget-facts {
    padding-top: 18px;
    padding-bottom: 72px;
}

.jks-budget-facts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(42, 53, 45, 0.12);
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.88),
            rgba(249, 244, 235, 0.92)
        );
    box-shadow:
        0 18px 50px rgba(43, 45, 37, 0.055);
}

.jks-budget-fact {
    position: relative;
    min-height: 128px;
    padding: 27px 25px 25px;
}

.jks-budget-fact + .jks-budget-fact {
    border-left: 1px solid rgba(42, 53, 45, 0.1);
}

.jks-budget-fact span {
    display: block;
    margin-bottom: 11px;
    color: #8b342f;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.jks-budget-fact strong {
    display: block;
    color: #26352e;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.48;
}


/* ---------- Buying guide ---------- */

.jks-budget-guide {
    position: relative;
    overflow: hidden;
    padding: 92px 0;
    background: #f1e8d8;
}

.jks-budget-guide::before {
    position: absolute;
    top: -160px;
    right: -130px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(126, 50, 45, 0.09);
    border-radius: 50%;
    content: "";
}

.jks-budget-guide::after {
    position: absolute;
    right: 75px;
    bottom: -220px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(42, 65, 53, 0.09);
    border-radius: 50%;
    content: "";
}

.jks-budget-guide__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);
    gap: clamp(48px, 8vw, 112px);
    align-items: start;
}

.jks-budget-guide__heading {
    position: sticky;
    top: 120px;
}

.jks-budget-guide__heading h2 {
    max-width: 520px;
    margin: 10px 0 0;
}

.jks-budget-guide__body {
    max-width: 690px;
    padding: 38px 40px;
    border: 1px solid rgba(42, 53, 45, 0.1);
    border-radius: 22px;
    background: rgba(255, 253, 248, 0.7);
    box-shadow:
        0 20px 55px rgba(43, 45, 37, 0.05);
}

.jks-budget-guide__body p {
    margin: 0;
}

.jks-budget-guide__body p + p {
    margin-top: 24px;
}

.jks-budget-guide__lead {
    color: #26352e;
    font-size: clamp(1.08rem, 1.6vw, 1.28rem);
    font-weight: 600;
    line-height: 1.7;
}


/* ---------- Three package types ---------- */

.jks-budget-types {
    padding: 100px 0;
    background: #fffdf8;
}

.jks-budget-types__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.jks-budget-type {
    position: relative;
    min-height: 315px;
    padding: 34px 32px;
    overflow: hidden;
    border: 1px solid rgba(42, 53, 45, 0.11);
    border-radius: 22px;
    background: #f7f1e7;
}

.jks-budget-type:nth-child(2) {
    background: #eef1e9;
}

.jks-budget-type:nth-child(3) {
    background: #f4e9e5;
}

.jks-budget-type__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 58px;
    border: 1px solid rgba(42, 53, 45, 0.16);
    border-radius: 50%;
    color: #7f302c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.jks-budget-type h3 {
    margin: 0 0 14px;
    color: #26352e;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.jks-budget-type p {
    max-width: 390px;
    margin: 0;
    line-height: 1.68;
}


/* ---------- Different groups ---------- */

.jks-budget-groups {
    padding: 96px 0 104px;
    background: #f5eee2;
}

.jks-budget-groups__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(42, 53, 45, 0.14);
    border-bottom: 1px solid rgba(42, 53, 45, 0.14);
}

.jks-budget-group {
    padding: 34px 34px 38px 0;
}

.jks-budget-group + .jks-budget-group {
    padding-left: 34px;
    border-left: 1px solid rgba(42, 53, 45, 0.14);
}

.jks-budget-group h3 {
    margin: 0 0 13px;
    color: #7f302c;
    font-size: 1.15rem;
}

.jks-budget-group p {
    margin: 0;
    line-height: 1.7;
}


/* ---------- Budget decision ---------- */

.jks-budget-decision {
    padding: 100px 0;
    background: #fffdf8;
}

.jks-budget-decision__inner {
    position: relative;
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: clamp(38px, 6vw, 82px);
    align-items: center;
    overflow: hidden;
    padding: clamp(42px, 6vw, 74px);
    border-radius: 28px;
    background: #263b32;
    box-shadow:
        0 26px 70px rgba(28, 43, 36, 0.12);
}

.jks-budget-decision__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(255, 250, 239, 0.22);
    border-radius: 50%;
    color: #f0d9ad;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.1rem, 6vw, 4.8rem);
    line-height: 1;
}

.jks-budget-decision__content {
    max-width: 760px;
}

.jks-budget-decision__content .jksg-kicker {
    color: #dfbd83;
}

.jks-budget-decision__content h2 {
    margin: 10px 0 18px;
    color: #fffaf0;
}

.jks-budget-decision__content p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 250, 240, 0.8);
    font-size: 1.04rem;
    line-height: 1.75;
}


/* ---------- FAQ ---------- */

.jks-budget-faq {
    padding: 104px 0;
    background: #eee5d7;
}

.jks-budget-faq__layout {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(0, 1.28fr);
    gap: clamp(50px, 9vw, 120px);
    align-items: start;
}

.jks-budget-faq__heading {
    position: sticky;
    top: 120px;
}

.jks-budget-faq__heading h2 {
    margin: 10px 0 18px;
}

.jks-budget-faq__heading > p:last-child {
    max-width: 390px;
    margin-bottom: 0;
}

.jks-budget-faq__items {
    border-top: 1px solid rgba(42, 53, 45, 0.18);
}

.jks-budget-faq__item {
    border-bottom: 1px solid rgba(42, 53, 45, 0.18);
}

.jks-budget-faq__item summary {
    position: relative;
    padding: 25px 48px 25px 0;
    color: #26352e;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}

.jks-budget-faq__item summary::-webkit-details-marker {
    display: none;
}

.jks-budget-faq__item summary::after {
    position: absolute;
    top: 50%;
    right: 4px;
    content: "+";
    color: #87352f;
    font-size: 1.55rem;
    font-weight: 400;
    transform: translateY(-50%);
}

.jks-budget-faq__item[open] summary::after {
    content: "−";
}

.jks-budget-faq__answer {
    max-width: 720px;
    padding: 0 52px 27px 0;
}

.jks-budget-faq__answer p {
    margin: 0;
    line-height: 1.72;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {

    .jks-budget-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jks-budget-fact + .jks-budget-fact {
        border-left: 0;
    }

    .jks-budget-fact:nth-child(even) {
        border-left: 1px solid rgba(42, 53, 45, 0.1);
    }

    .jks-budget-fact:nth-child(n+3) {
        border-top: 1px solid rgba(42, 53, 45, 0.1);
    }

    .jks-budget-guide__grid,
    .jks-budget-faq__layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .jks-budget-guide__heading,
    .jks-budget-faq__heading {
        position: static;
    }

    .jks-budget-types__grid,
    .jks-budget-groups__grid {
        grid-template-columns: 1fr;
    }

    .jks-budget-type {
        min-height: 0;
    }

    .jks-budget-type__number {
        margin-bottom: 34px;
    }

    .jks-budget-group,
    .jks-budget-group + .jks-budget-group {
        padding: 28px 0;
        border-left: 0;
    }

    .jks-budget-group + .jks-budget-group {
        border-top: 1px solid rgba(42, 53, 45, 0.14);
    }

    .jks-budget-decision__inner {
        grid-template-columns: 1fr;
    }

    .jks-budget-decision__mark {
        width: 110px;
        height: 110px;
        font-size: 3rem;
    }
}


@media (max-width: 600px) {

    .jks-budget-facts {
        padding-bottom: 54px;
    }

    .jks-budget-facts__grid {
        grid-template-columns: 1fr;
        border-radius: 16px;
    }

    .jks-budget-fact,
    .jks-budget-fact:nth-child(even) {
        min-height: 0;
        padding: 22px;
        border-left: 0;
    }

    .jks-budget-fact + .jks-budget-fact,
    .jks-budget-fact:nth-child(n+3) {
        border-top: 1px solid rgba(42, 53, 45, 0.1);
    }

    .jks-budget-guide,
    .jks-budget-types,
    .jks-budget-groups,
    .jks-budget-decision,
    .jks-budget-faq {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .jks-budget-guide__body {
        padding: 27px 23px;
        border-radius: 17px;
    }

    .jks-budget-types__grid {
        gap: 14px;
    }

    .jks-budget-type {
        padding: 27px 24px;
        border-radius: 17px;
    }

    .jks-budget-section-head {
        margin-bottom: 30px;
    }

    .jks-budget-decision__inner {
        gap: 30px;
        padding: 32px 24px;
        border-radius: 20px;
    }

    .jks-budget-decision__mark {
        width: 86px;
        height: 86px;
        font-size: 2.35rem;
    }

    .jks-budget-faq__item summary {
        padding-top: 21px;
        padding-bottom: 21px;
    }
}


/* ==========================================================
   JKS H8 — THE CHRISTMAS EDITION
   Scandinavian editorial luxury
   Quiet confidence / strong typography / tactile Christmas
   ========================================================== */

:root {
    --jks-h8-green: #12342b;
    --jks-h8-green-deep: #0b2821;
    --jks-h8-green-soft: #29483f;

    --jks-h8-wine: #842e2c;
    --jks-h8-wine-deep: #67211f;

    --jks-h8-gold: #ad7929;
    --jks-h8-gold-light: #d5b675;

    --jks-h8-ivory: #fffdf8;
    --jks-h8-cream: #f7f0e4;
    --jks-h8-parchment: #e9dcc4;

    --jks-h8-ink: #102d25;
    --jks-h8-body: #294139;

    --jks-h8-line: rgba(16, 45, 37, 0.17);
}


/* ==========================================================
   NON-NEGOTIABLE CONTRAST SYSTEM
   ========================================================== */

.jks-budget-page {
    color: var(--jks-h8-body);
    background: var(--jks-h8-ivory);
}

.jks-budget-page p,
.jks-budget-page li {
    color: var(--jks-h8-body);
}

.jks-budget-page h1,
.jks-budget-page h2,
.jks-budget-page h3,
.jks-budget-page h4,
.jks-budget-page strong,
.jks-budget-page summary {
    color: var(--jks-h8-ink);
}

.jks-budget-page .jksg-kicker {
    color: #925d08;
}

.jks-budget-page a {
    color: var(--jks-h8-ink);
}


/* ==========================================================
   HERO
   Large editorial opening — no decorative gimmicks
   ========================================================== */

.jks-budget-page .jksg-hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(90px, 10vw, 150px);
    padding-bottom: clamp(90px, 11vw, 165px);

    background:
        linear-gradient(
            90deg,
            #f8f1e5 0%,
            #f8f1e5 71%,
            #e8dac0 71%,
            #e8dac0 100%
        );
}

.jks-budget-page .jksg-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 29%;
    width: 1px;
    height: 100%;
    background: rgba(16,45,37,0.12);
}

.jks-budget-page .jksg-hero::after {
    content: "JULKLAPPSSPELET";
    position: absolute;
    right: -23px;
    bottom: 38px;

    color: rgba(16,45,37,0.18);

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.34em;

    transform: rotate(-90deg);
    transform-origin: center;
}

.jks-budget-page .jksg-hero__copy {
    max-width: 950px;
}

.jks-budget-page .jksg-hero .jksg-kicker {
    margin-bottom: 22px;
    color: var(--jks-h8-wine);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.19em;
}

.jks-budget-page .jksg-hero h1 {
    max-width: 880px;
    margin-bottom: 32px;

    color: var(--jks-h8-green-deep);

    font-size: clamp(62px, 7vw, 108px);
    line-height: 0.91;
    letter-spacing: -0.058em;

    text-wrap: balance;
}

.jks-budget-page .jksg-lead {
    max-width: 690px;
    color: #173a30;
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.55;
}

.jks-budget-page .jksg-hero__support {
    max-width: 620px;
    margin-top: 26px;
    padding-top: 24px;

    border-top: 1px solid rgba(16,45,37,0.20);

    color: #385047;
    font-size: 15px;
    line-height: 1.7;
}


/* ==========================================================
   BUDGET NAV
   More fashion-index, less button navigation
   ========================================================== */

.jks-budget-nav {
    background: var(--jks-h8-green-deep);
    border: 0;
}

.jks-budget-nav .jksg-wrap {
    min-height: 72px;
}

.jks-budget-nav a {
    color: #f8f0e2;
}

.jks-budget-nav__hub {
    color: var(--jks-h8-gold-light) !important;
    font-weight: 750;
}

.jks-budget-nav__levels a {
    position: relative;
    padding: 25px 15px;

    color: #f6efe4;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.jks-budget-nav__levels a:hover,
.jks-budget-nav__levels a:focus-visible {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

.jks-budget-nav__levels a[aria-current="page"] {
    color: #fff;
    background: transparent;
}

.jks-budget-nav__levels a[aria-current="page"]::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 14px;
    left: 15px;
    height: 2px;
    background: var(--jks-h8-gold-light);
}


/* ==========================================================
   PRODUCTS INTRO
   ========================================================== */

.jks-budget-page .jksg-now {
    padding-top: 104px;
    padding-bottom: 105px;
    background: var(--jks-h8-ivory);
}

.jks-budget-page .jksg-now .jksg-section-head {
    max-width: 790px;
    margin-bottom: 58px;
}

.jks-budget-page .jksg-now .jksg-section-head h2 {
    margin-top: 12px;
    color: var(--jks-h8-green-deep);
    font-size: clamp(44px, 4.7vw, 69px);
    line-height: 1;
    letter-spacing: -0.045em;
}

.jks-budget-page .jksg-now .jksg-section-head > p:last-child {
    max-width: 650px;
    color: #40564e;
}


/* ==========================================================
   QUICK ANSWER
   Editorial spread rather than beige block
   ========================================================== */

.jks-budget-page .jksg-editorial {
    padding-top: 125px;
    padding-bottom: 130px;

    background:
        linear-gradient(
            90deg,
            var(--jks-h8-parchment) 0%,
            var(--jks-h8-parchment) 47%,
            #f5ecde 47%,
            #f5ecde 100%
        );
}

.jks-budget-page .jksg-editorial__grid {
    gap: clamp(70px, 10vw, 150px);
}

.jks-budget-page .jksg-editorial h2 {
    max-width: 540px;
    margin-top: 17px;

    color: var(--jks-h8-green-deep);

    font-size: clamp(55px, 5.6vw, 86px);
    line-height: 0.91;
    letter-spacing: -0.055em;
}

.jks-budget-page .jksg-editorial__body {
    max-width: 620px;
}

.jks-budget-page .jksg-editorial__lead {
    margin-bottom: 34px;

    color: #17372e;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2.3vw, 31px);
    font-weight: 400;
    line-height: 1.48;
}

.jks-budget-subhead {
    margin: 0 0 13px;
    color: var(--jks-h8-green-deep);
    font-size: 28px;
}

.jks-budget-page .jksg-editorial__body > p:not(.jksg-editorial__lead) {
    color: #294139;
    line-height: 1.78;
}

.jks-budget-page .jksg-rule {
    margin-top: 45px;
    padding: 27px 0 0;

    border-top: 1px solid rgba(16,45,37,0.24);
    background: transparent;
}

.jks-budget-page .jksg-rule span {
    color: var(--jks-h8-wine);
}

.jks-budget-page .jksg-rule strong {
    max-width: 600px;
    color: var(--jks-h8-green-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(23px, 2.1vw, 30px);
    font-weight: 400;
    line-height: 1.4;
}


/* ==========================================================
   QUICK FACTS
   Printed editorial strip — NO floating card
   ========================================================== */

.jks-budget-facts {
    padding: 0;
    background: var(--jks-h8-green-deep);
}

.jks-budget-facts .jksg-wrap {
    max-width: none;
    padding: 0;
}

.jks-budget-facts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jks-budget-facts__grid::before {
    display: none;
}

.jks-budget-fact {
    min-height: 180px;
    padding: 44px clamp(28px,4vw,60px);

    border: 0;
}

.jks-budget-fact + .jks-budget-fact {
    border-left: 1px solid rgba(255,250,240,0.17);
}

.jks-budget-fact span {
    margin-bottom: 18px;
    color: var(--jks-h8-gold-light);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.jks-budget-fact strong {
    max-width: 260px;
    color: #fffaf0;
    font-size: 17px;
    line-height: 1.5;
}


/* ==========================================================
   BUYING GUIDE
   Magazine article — remove floating white card
   ========================================================== */

.jks-budget-guide {
    overflow: hidden;
    padding: 135px 0 145px;
    background: #f2e8d7;
}

.jks-budget-guide::before {
    content: "200";
    position: absolute;
    top: -45px;
    right: 3%;

    width: auto;
    height: auto;

    border: 0;
    border-radius: 0;

    color: rgba(16,45,37,0.055);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(230px, 27vw, 430px);
    line-height: 1;
    letter-spacing: -0.08em;
}

.jks-budget-guide::after {
    display: none;
}

.jks-budget-guide__grid {
    align-items: start;
    gap: clamp(70px, 10vw, 155px);
}

.jks-budget-guide__heading {
    position: sticky;
    top: 115px;
}

.jks-budget-guide__heading::after {
    width: 54px;
    height: 3px;
    margin-top: 31px;
    background: var(--jks-h8-wine);
}

.jks-budget-guide__heading h2 {
    max-width: 550px;

    color: var(--jks-h8-green-deep);

    font-size: clamp(57px, 5.5vw, 86px);
    line-height: 0.91;
    letter-spacing: -0.055em;
}

.jks-budget-guide__body {
    max-width: 650px;
    padding: 10px 0 0;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jks-budget-guide__body::before {
    content: "KÖPGUIDE · 200 KR";
    position: static;
    display: block;

    margin-bottom: 28px;

    color: var(--jks-h8-wine);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.jks-budget-guide__body p {
    color: #294139;
    font-size: 17px;
    line-height: 1.82;
}

.jks-budget-guide__body .jks-budget-guide__lead {
    margin-bottom: 29px;

    color: #15362d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.3vw, 32px);
    font-weight: 400;
    line-height: 1.5;
}


/* ==========================================================
   PACKAGE TYPES
   Three-column editorial feature
   ========================================================== */

.jks-budget-types {
    padding: 125px 0 140px;
    background: var(--jks-h8-ivory);
}

.jks-budget-types__grid {
    gap: 0;
    border-top: 1px solid var(--jks-h8-line);
    border-bottom: 1px solid var(--jks-h8-line);
}

.jks-budget-type,
.jks-budget-type:nth-child(2),
.jks-budget-type:nth-child(3) {
    min-height: 390px;
    padding: 45px 42px 46px;

    transform: none;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jks-budget-type + .jks-budget-type {
    border-left: 1px solid var(--jks-h8-line);
}

.jks-budget-type:nth-child(2) {
    background: var(--jks-h8-green-deep);
}

.jks-budget-type::after {
    display: none;
}

.jks-budget-type__number {
    width: auto;
    height: auto;
    margin-bottom: 88px;

    border: 0;
    border-radius: 0;

    color: var(--jks-h8-wine);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.jks-budget-type h3 {
    margin-bottom: 20px;
    color: var(--jks-h8-green-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
    font-weight: 400;
    line-height: 1.1;
}

.jks-budget-type p {
    color: #334b42;
}

.jks-budget-type:nth-child(2) .jks-budget-type__number {
    color: var(--jks-h8-gold-light);
}

.jks-budget-type:nth-child(2) h3 {
    color: #fffaf0;
}

.jks-budget-type:nth-child(2) p {
    color: #e8e1d5;
}


/* ==========================================================
   GROUPS
   Christmas catalogue bands
   ========================================================== */

.jks-budget-groups {
    padding: 125px 0 135px;
    background: var(--jks-h8-wine-deep);
}

.jks-budget-groups .jksg-kicker {
    color: var(--jks-h8-gold-light);
}

.jks-budget-groups .jks-budget-section-head h2 {
    color: #fffaf0;
}

.jks-budget-groups__grid {
    gap: 0;
    border-top: 1px solid rgba(255,250,240,0.22);
    border-bottom: 1px solid rgba(255,250,240,0.22);
}

.jks-budget-group,
.jks-budget-group:nth-child(2),
.jks-budget-group:nth-child(3) {
    min-height: 315px;
    margin: 0;
    padding: 46px 40px;

    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jks-budget-group + .jks-budget-group {
    border-left: 1px solid rgba(255,250,240,0.22);
}

.jks-budget-group::before {
    width: 28px;
    height: 2px;
    margin-bottom: 75px;
    background: var(--jks-h8-gold-light);
}

.jks-budget-group h3 {
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 400;
}

.jks-budget-group p {
    color: #eee5d8;
}


/* ==========================================================
   DECISION
   Light reset after wine section
   ========================================================== */

.jks-budget-decision {
    padding: 125px 0;
    background: #e9dcc4;
}

.jks-budget-decision::before {
    display: none;
}

.jks-budget-decision__inner {
    display: grid;
    grid-template-columns: 220px minmax(0,1fr);
    gap: clamp(55px,8vw,120px);

    padding: 0;

    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.jks-budget-decision__mark {
    width: 190px;
    height: 190px;

    border: 1px solid rgba(16,45,37,0.24);

    color: var(--jks-h8-wine-deep);
    background: transparent;
    box-shadow: none;

    font-size: 68px;
}

.jks-budget-decision .jksg-kicker {
    color: var(--jks-h8-wine);
}

.jks-budget-decision h2,
.jks-budget-decision h3,
.jks-budget-decision strong {
    color: var(--jks-h8-green-deep);
}

.jks-budget-decision p {
    max-width: 720px;
    color: #294139;
    font-size: 18px;
    line-height: 1.75;
}


/* ==========================================================
   FAQ
   Quiet editorial finish
   ========================================================== */

.jks-budget-faq {
    padding: 130px 0 140px;
    background: var(--jks-h8-ivory);
}

.jks-budget-faq__heading {
    position: sticky;
    top: 115px;
}

.jks-budget-faq__heading h2 {
    color: var(--jks-h8-green-deep);
    font-size: clamp(50px,5vw,75px);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.jks-budget-faq__heading > p:last-child {
    color: #40564e;
}

.jks-budget-faq__items {
    border-top: 1px solid var(--jks-h8-line);
}

.jks-budget-faq__item {
    border-bottom: 1px solid var(--jks-h8-line);
}

.jks-budget-faq__item summary {
    padding: 28px 52px 28px 0;

    color: var(--jks-h8-green-deep);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.4;
}

.jks-budget-faq__item summary::after {
    color: var(--jks-h8-wine);
}

.jks-budget-faq__answer p {
    color: #354c43;
}


/* ==========================================================
   OTHER BUDGETS
   Fix the exact low-contrast problem seen in screenshot
   ========================================================== */

.jks-budget-explore {
    padding: 115px 0 125px;
    background: #f3eadc;
}

.jks-budget-explore__grid {
    gap: 0;

    border-top: 1px solid var(--jks-h8-line);
    border-bottom: 1px solid var(--jks-h8-line);
}

.jks-budget-explore__grid a {
    min-height: 205px;
    padding: 31px 28px;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.jks-budget-explore__grid a + a {
    border-left: 1px solid var(--jks-h8-line);
}

.jks-budget-explore__grid a:hover {
    transform: none;
    background: var(--jks-h8-green-deep);
    box-shadow: none;
}

.jks-budget-explore__grid small {
    color: var(--jks-h8-wine-deep);
    font-weight: 900;
}

.jks-budget-explore__grid strong {
    color: var(--jks-h8-green-deep);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 47px;
    font-weight: 400;
}

.jks-budget-explore__grid span {
    color: #17372e;
    font-weight: 750;
}

.jks-budget-explore__grid a:hover small {
    color: var(--jks-h8-gold-light);
}

.jks-budget-explore__grid a:hover strong,
.jks-budget-explore__grid a:hover span {
    color: #fffaf0;
}


/* ==========================================================
   SHOW ALL CTA
   ========================================================== */

.jks-budget-progressive__actions {
    margin-top: 55px;
}

.jks-budget-progressive__button {
    min-width: 260px;
    padding: 16px 27px;

    border: 1px solid var(--jks-h8-green-deep);
    border-radius: 2px;

    background: var(--jks-h8-green-deep);
    color: #fffaf0;

    font-weight: 800;

    box-shadow: none;
}

.jks-budget-progressive__button:hover {
    border-color: var(--jks-h8-wine);
    background: var(--jks-h8-wine);
    color: #fff;
    box-shadow: none;
}


/* ==========================================================
   H8 MOBILE
   ========================================================== */

@media (max-width: 900px) {

    .jks-budget-page .jksg-hero {
        background: #f8f1e5;
    }

    .jks-budget-page .jksg-hero::before,
    .jks-budget-page .jksg-hero::after {
        display: none;
    }

    .jks-budget-page .jksg-editorial {
        background: var(--jks-h8-parchment);
    }

    .jks-budget-facts__grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .jks-budget-fact:nth-child(odd) {
        border-left: 0;
    }

    .jks-budget-fact:nth-child(n+3) {
        border-top: 1px solid rgba(255,250,240,0.17);
    }

    .jks-budget-guide__heading,
    .jks-budget-faq__heading {
        position: static;
    }

    .jks-budget-types__grid,
    .jks-budget-groups__grid {
        grid-template-columns: 1fr;
    }

    .jks-budget-type + .jks-budget-type,
    .jks-budget-group + .jks-budget-group {
        border-left: 0;
        border-top: 1px solid var(--jks-h8-line);
    }

    .jks-budget-group + .jks-budget-group {
        border-top-color: rgba(255,250,240,0.22);
    }

    .jks-budget-decision__inner {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 640px) {

    .jks-budget-page .jksg-hero {
        padding-top: 72px;
        padding-bottom: 78px;
    }

    .jks-budget-page .jksg-hero h1 {
        font-size: clamp(52px,15vw,72px);
        line-height: 0.94;
    }

    .jks-budget-page .jksg-now,
    .jks-budget-page .jksg-editorial,
    .jks-budget-guide,
    .jks-budget-types,
    .jks-budget-groups,
    .jks-budget-decision,
    .jks-budget-faq,
    .jks-budget-explore {
        padding-top: 76px;
        padding-bottom: 80px;
    }

    .jks-budget-page .jksg-editorial h2,
    .jks-budget-guide__heading h2 {
        font-size: 49px;
    }

    .jks-budget-facts__grid {
        grid-template-columns: 1fr;
    }

    .jks-budget-fact {
        min-height: 0;
        padding: 31px 24px;
    }

    .jks-budget-fact + .jks-budget-fact {
        border-left: 0;
        border-top: 1px solid rgba(255,250,240,0.17);
    }

    .jks-budget-guide::before {
        font-size: 190px;
    }

    .jks-budget-type,
    .jks-budget-group {
        min-height: 0;
        padding: 35px 25px;
    }

    .jks-budget-type__number,
    .jks-budget-group::before {
        margin-bottom: 47px;
    }

    .jks-budget-decision__mark {
        width: 105px;
        height: 105px;
        font-size: 42px;
    }

    .jks-budget-explore__grid {
        grid-template-columns: 1fr;
    }

    .jks-budget-explore__grid a + a {
        border-left: 0;
        border-top: 1px solid var(--jks-h8-line);
    }

    .jks-budget-explore__grid strong {
        font-size: 40px;
    }
}