/*
 * Websjekk Bedriftsnettside — Desktop Control Palette v1
 * Presentation-only layer. Content, forms, routing and business logic remain unchanged.
 * © Haut Forvalting AS (Org.nr. 931 603 760) — Altibedrift.
 * Konfidensiell arkitektur/arbeidsdokument. Uautorisert kopiering/distribusjon forbudt.
 */

@media (min-width: 1024px) {
  body:has(.websites-experience) {
    background:
      radial-gradient(circle at 91% 9%, rgba(191, 233, 235, .34), transparent 28rem),
      radial-gradient(circle at 7% 43%, rgba(203, 238, 219, .28), transparent 34rem),
      linear-gradient(150deg, #f7f4ec 0%, #efede5 56%, #ebe9e1 100%);
  }

  .websites-experience {
    --wsd-ink: #0d1b1d;
    --wsd-ink-2: #15282a;
    --wsd-deep: #0b1819;
    --wsd-paper: #f3f0e8;
    --wsd-panel: #fffdf7;
    --wsd-line: rgba(13, 27, 29, .12);
    --wsd-line-strong: rgba(13, 27, 29, .2);
    --wsd-mint: #cbeedb;
    --wsd-mint-strong: #2c7a62;
    --wsd-lime: #9df44a;
    --wsd-cyan: #bfe9eb;
    --wsd-blue: #dce5ff;
    --wsd-violet: #e9ddf5;
    --wsd-amber: #ffe0a8;
    --wsd-rose: #f7cfcb;
    --wsd-shadow: 0 24px 72px rgba(11, 25, 26, .09), 0 3px 10px rgba(11, 25, 26, .035);
    --wsd-shadow-soft: 0 13px 38px rgba(11, 25, 26, .065);
    width: min(96rem, calc(100% - clamp(3rem, 6vw, 7rem)));
    margin-bottom: 8rem;
  }

  .websites-experience .button,
  .websites-experience a,
  .websites-experience button,
  .websites-job-card,
  .websites-visual-grid article,
  .industry-stage__copy,
  .websites-decision-grid article,
  .websites-change__chips span {
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  }

  .websites-kicker {
    color: var(--wsd-mint-strong);
    font-size: .69rem;
    letter-spacing: .14em;
  }

  .websites-section {
    margin-bottom: 9.5rem;
  }

  .websites-section__head {
    grid-template-columns: minmax(0, 1fr) minmax(21rem, .44fr);
    gap: clamp(3rem, 5vw, 5.2rem);
    margin-bottom: 2.7rem;
  }

  .websites-section__head > p,
  .websites-section__head--center > p,
  .websites-change__copy > p,
  .websites-conversion__main > p {
    color: #55696b;
    font-size: 1rem;
    line-height: 1.72;
  }

  /* Hero: replace the pale double-card with a clear command surface + coloured evidence board. */
  .websites-hero {
    gap: clamp(1.1rem, 1.8vw, 1.65rem);
    align-items: stretch;
    margin: 2.4rem 0 10rem;
  }

  .websites-hero__copy {
    position: relative;
    isolation: isolate;
    min-height: 47rem;
    overflow: hidden;
    padding: clamp(3rem, 4.5vw, 5rem);
    border: 1px solid rgba(191, 233, 235, .13);
    border-radius: 1.8rem;
    color: #f6fff9;
    background:
      radial-gradient(circle at 86% 8%, rgba(157, 244, 74, .14), transparent 19rem),
      radial-gradient(circle at 8% 94%, rgba(191, 233, 235, .13), transparent 23rem),
      linear-gradient(137deg, #0b1819 0%, #102526 57%, #173333 100%);
    box-shadow: 0 28px 78px rgba(8, 23, 24, .22), inset 0 1px 0 rgba(255, 255, 255, .055);
  }

  .websites-hero__copy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .24;
    background-image:
      linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 72% 16%, #000, transparent 74%);
  }

  .websites-hero__copy .websites-kicker {
    align-self: flex-start;
    margin-bottom: 1.25rem;
    padding: .5rem .7rem;
    border: 1px solid rgba(157, 244, 74, .2);
    border-radius: 999px;
    color: var(--wsd-lime);
    background: rgba(157, 244, 74, .07);
  }

  .websites-hero h1,
  .websites-hero h1.websites-title-v2 {
    color: #fff !important;
  }

  .websites-hero__lede {
    max-width: 42rem;
    margin-top: 1.85rem;
    color: rgba(236, 248, 241, .76);
    font-size: clamp(1.08rem, 1.35vw, 1.22rem);
    line-height: 1.72;
  }

  .websites-hero__care {
    max-width: 42rem;
    margin-top: 1.25rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(191, 233, 235, .13);
    border-left: 3px solid var(--wsd-cyan);
    border-radius: .75rem;
    color: rgba(232, 244, 238, .62);
    background: rgba(255, 255, 255, .04);
  }

  .websites-hero__actions {
    margin-top: 2.2rem;
  }

  .websites-hero__copy .button--primary {
    border-color: var(--wsd-lime) !important;
    color: #10200f !important;
    background: linear-gradient(180deg, #b9ff7a, var(--wsd-lime)) !important;
    box-shadow: 0 12px 28px rgba(95, 181, 31, .18), inset 0 1px 0 rgba(255, 255, 255, .52) !important;
  }

  .websites-hero__copy .button--primary:hover,
  .websites-hero__copy .button--primary:focus-visible {
    transform: translateY(-2px);
    border-color: #c8ff98 !important;
    background: #b9ff7a !important;
    box-shadow: 0 16px 34px rgba(95, 181, 31, .23), 0 0 0 4px rgba(157, 244, 74, .08) !important;
  }

  .websites-hero__copy .websites-text-link {
    color: #def4ec;
  }

  .websites-hero__copy .websites-text-link:hover,
  .websites-hero__copy .websites-text-link:focus-visible {
    color: var(--wsd-lime);
  }

  .websites-hero__visual {
    position: relative;
    isolation: isolate;
    min-height: 47rem;
    gap: .9rem;
    padding: 1.15rem;
    overflow: hidden;
    border: 1px solid rgba(13, 27, 29, .11);
    border-radius: 1.8rem;
    background:
      radial-gradient(circle at 94% 5%, rgba(233, 221, 245, .9), transparent 21rem),
      radial-gradient(circle at 5% 94%, rgba(191, 233, 235, .76), transparent 22rem),
      linear-gradient(145deg, #f3f0e8 0%, #dfeee8 51%, #e7e1ef 100%);
    box-shadow: var(--wsd-shadow-soft);
  }

  .websites-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .28;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(13, 27, 29, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 27, 29, .055) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(145deg, #000, transparent 72%);
  }

  .websites-visual-card {
    border-color: rgba(13, 27, 29, .12);
    box-shadow: var(--wsd-shadow-soft);
  }

  .websites-visual-card--main {
    padding: clamp(2rem, 3.6vw, 3.2rem);
    background:
      radial-gradient(circle at 93% 8%, rgba(157, 244, 74, .11), transparent 12rem),
      linear-gradient(145deg, #102526, #173333);
    color: #fff;
  }

  .websites-visual-card__eyebrow {
    color: var(--wsd-lime);
    letter-spacing: .13em;
  }

  .websites-visual-card--main p {
    color: rgba(232, 244, 238, .65);
  }

  .websites-visual-grid {
    gap: .8rem;
  }

  .websites-visual-grid article {
    min-height: 9.5rem;
    padding: 1.15rem;
    border-color: rgba(13, 27, 29, .11);
    background: var(--wsd-cyan);
    box-shadow: 0 9px 25px rgba(11, 25, 26, .05);
  }

  .websites-visual-grid article:nth-child(2) { background: var(--wsd-mint); }
  .websites-visual-grid article:nth-child(3) { background: var(--wsd-violet); }
  .websites-visual-grid article:nth-child(4) { background: var(--wsd-amber); }

  .websites-visual-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 27, 29, .2);
    box-shadow: 0 15px 34px rgba(11, 25, 26, .08);
  }

  .websites-visual-grid span,
  .websites-visual-grid small {
    color: #526968;
  }

  /* Job cards: stronger Control pastels and less white-on-white repetition. */
  .websites-job-grid {
    gap: 1.1rem;
  }

  .websites-job-card {
    position: relative;
    min-height: 21rem;
    overflow: hidden;
    padding: 1.55rem;
    border-color: rgba(13, 27, 29, .11);
    border-radius: 1.25rem;
    box-shadow: 0 11px 30px rgba(11, 25, 26, .045);
  }

  .websites-job-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--wsd-mint-strong);
  }

  .websites-job-card--mint { background: var(--wsd-mint); }
  .websites-job-card--sand { background: var(--wsd-amber); }
  .websites-job-card--blue { background: var(--wsd-blue); }
  .websites-job-card--rose { background: var(--wsd-rose); }
  .websites-job-card--sand::before { background: #b57a27; }
  .websites-job-card--blue::before { background: #6479ab; }
  .websites-job-card--rose::before { background: #aa665f; }

  .websites-job-card > span {
    border: 1px solid rgba(13, 27, 29, .1);
    background: rgba(255, 253, 247, .66);
  }

  .websites-job-card p {
    color: #4d6162;
  }

  .websites-job-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 27, 29, .2);
    box-shadow: 0 18px 42px rgba(11, 25, 26, .085);
  }

  /* Industry switcher becomes a proper dark instrument instead of another pale container. */
  .industry-switcher {
    padding: 1.15rem;
    border: 1px solid rgba(191, 233, 235, .14);
    border-radius: 1.65rem;
    background:
      radial-gradient(circle at 91% 3%, rgba(157, 244, 74, .1), transparent 19rem),
      linear-gradient(145deg, #0b1819, #102526 64%, #173333);
    box-shadow: 0 24px 70px rgba(8, 23, 24, .19);
  }

  .industry-switcher__tabs {
    gap: .65rem;
    padding: .2rem .15rem .85rem;
  }

  .industry-switcher__tabs button {
    min-height: 2.75rem;
    padding: .72rem 1.05rem;
    border-color: rgba(191, 233, 235, .14);
    color: rgba(232, 244, 238, .7);
    background: rgba(255, 255, 255, .045);
  }

  .industry-switcher__tabs button:hover,
  .industry-switcher__tabs button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(191, 233, 235, .42);
    color: #fff;
    background: rgba(191, 233, 235, .08);
    box-shadow: 0 0 0 3px rgba(191, 233, 235, .05);
  }

  .industry-switcher__tabs button[aria-selected="true"] {
    border-color: var(--wsd-lime);
    color: #10200f;
    background: var(--wsd-lime);
    box-shadow: 0 8px 20px rgba(95, 181, 31, .14);
  }

  .industry-stage {
    gap: 1rem;
    margin-top: .25rem;
  }

  .industry-stage__browser,
  .industry-stage__copy {
    min-height: 32rem;
    border-color: rgba(255, 255, 255, .09);
    border-radius: 1.2rem;
  }

  .industry-stage__browser {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  }

  .industry-stage__copy {
    padding: clamp(2rem, 3.5vw, 3.6rem);
    border-color: rgba(191, 233, 235, .16);
    background:
      radial-gradient(circle at 100% 0%, rgba(191, 233, 235, .16), transparent 14rem),
      linear-gradient(145deg, #f3f0e8, #cbeedb 145%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  }

  .industry-stage__copy .websites-kicker {
    color: #245f4f;
  }

  .industry-stage__copy > p {
    color: #526565;
  }

  .industry-priorities span {
    padding: .9rem;
    border-color: rgba(13, 27, 29, .1);
    color: #405757;
    background: rgba(191, 233, 235, .48);
  }

  .industry-priorities span:nth-child(2) { background: rgba(203, 238, 219, .72); }
  .industry-priorities span:nth-child(3) { background: rgba(233, 221, 245, .72); }
  .industry-priorities span:nth-child(4) { background: rgba(255, 224, 168, .72); }
  .industry-priorities b { color: #245f4f; }

  .industry-browser__hero i {
    color: #10200f;
    background: var(--wsd-lime);
  }

  /* Decision surface: visual separation between repair and full direction change. */
  .websites-decision {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3.4rem);
    border: 1px solid rgba(191, 233, 235, .12);
    border-radius: 1.75rem;
    color: #fff;
    background:
      radial-gradient(circle at 50% 0%, rgba(191, 233, 235, .12), transparent 25rem),
      linear-gradient(140deg, #0b1819, #102526 60%, #173333);
    box-shadow: 0 24px 68px rgba(8, 23, 24, .18);
  }

  .websites-decision .websites-section__head h2 {
    color: #fff;
  }

  .websites-decision .websites-section__head .websites-kicker {
    color: var(--wsd-lime);
  }

  .websites-decision .websites-section__head--center > p {
    color: rgba(232, 244, 238, .63);
  }

  .websites-decision-grid {
    gap: 1rem;
  }

  .websites-decision-grid article {
    padding: clamp(1.6rem, 2.7vw, 2.6rem);
    border-color: rgba(191, 233, 235, .14);
    color: var(--wsd-ink);
    background: var(--wsd-paper);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  }

  .websites-decision-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(191, 233, 235, .3);
  }

  .websites-decision-grid__strong {
    border-color: rgba(157, 244, 74, .2) !important;
    background: linear-gradient(145deg, var(--wsd-mint), #e8f5ed) !important;
    box-shadow: inset 4px 0 0 var(--wsd-lime), inset 0 1px 0 rgba(255, 255, 255, .6);
  }

  .websites-decision-label {
    border: 1px solid rgba(44, 122, 98, .13);
    color: #245f4f;
    background: rgba(203, 238, 219, .72);
    letter-spacing: .07em;
  }

  .websites-decision-grid__strong .websites-decision-label {
    color: #172510;
    background: rgba(157, 244, 74, .72);
  }

  .websites-decision-grid li {
    border-top-color: rgba(13, 27, 29, .1);
    color: #506264;
  }

  /* Change surface: make the network concept a coloured system object. */
  .websites-change {
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .websites-change__copy {
    padding-left: clamp(.2rem, 1vw, 1rem);
  }

  .websites-change__links a {
    color: #245f4f;
  }

  .websites-change__visual {
    position: relative;
    isolation: isolate;
    min-height: 33rem;
    overflow: hidden;
    padding: 1.4rem;
    border-color: rgba(13, 27, 29, .11);
    border-radius: 1.6rem;
    background:
      radial-gradient(circle at 10% 8%, rgba(191, 233, 235, .9), transparent 19rem),
      radial-gradient(circle at 92% 88%, rgba(233, 221, 245, .9), transparent 20rem),
      linear-gradient(145deg, #dce5ff 0%, #cbeedb 54%, #ffe0a8 130%);
    box-shadow: var(--wsd-shadow-soft);
  }

  .websites-change__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .25;
    background-image:
      linear-gradient(rgba(13, 27, 29, .055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13, 27, 29, .055) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 78%);
  }

  .websites-change__center {
    max-width: 31rem;
    padding: 2.4rem;
    border-color: rgba(191, 233, 235, .15);
    color: #fff;
    background:
      radial-gradient(circle at 90% 8%, rgba(157, 244, 74, .1), transparent 10rem),
      linear-gradient(145deg, #0b1819, #173333);
    box-shadow: 0 20px 50px rgba(8, 23, 24, .18);
  }

  .websites-change__center span {
    color: var(--wsd-lime);
    letter-spacing: .12em;
  }

  .websites-change__chips {
    gap: .7rem;
  }

  .websites-change__chips span {
    border-color: rgba(13, 27, 29, .1);
    color: #314a49;
    background: var(--wsd-cyan);
    box-shadow: 0 7px 17px rgba(11, 25, 26, .045);
  }

  .websites-change__chips span:nth-child(2) { background: var(--wsd-mint); }
  .websites-change__chips span:nth-child(3) { background: var(--wsd-violet); }
  .websites-change__chips span:nth-child(4) { background: var(--wsd-lime); color: #172510; }
  .websites-change__chips span:nth-child(5) { background: var(--wsd-blue); }
  .websites-change__chips span:nth-child(6) { background: var(--wsd-amber); }
  .websites-change__chips span:hover { transform: translateY(-2px); }

  /* Conversion: no white ending; close the page with a high-contrast decision zone. */
  .websites-conversion {
    gap: 1.05rem;
    padding: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(191, 233, 235, .13);
    border-radius: 1.75rem;
    background:
      radial-gradient(circle at 84% 0%, rgba(157, 244, 74, .1), transparent 20rem),
      linear-gradient(140deg, #0b1819, #102526 63%, #173333);
    box-shadow: 0 25px 70px rgba(8, 23, 24, .2);
  }

  .websites-conversion__main,
  .websites-newsletter {
    border-color: rgba(255, 255, 255, .09);
    border-radius: 1.25rem;
  }

  .websites-conversion__main {
    min-height: 31rem;
    color: #fff;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  }

  .websites-conversion__main .websites-kicker {
    color: var(--wsd-lime);
  }

  .websites-conversion__main h2 {
    color: #fff;
  }

  .websites-conversion__main > p {
    color: rgba(232, 244, 238, .64);
  }

  .websites-conversion__main .button--primary {
    border-color: var(--wsd-lime) !important;
    color: #10200f !important;
    background: var(--wsd-lime) !important;
  }

  .websites-conversion__main .button--secondary {
    border-color: rgba(191, 233, 235, .2) !important;
    color: #ecf8f2 !important;
    background: rgba(191, 233, 235, .065) !important;
  }

  .websites-newsletter {
    color: var(--wsd-ink);
    background:
      radial-gradient(circle at 94% 4%, rgba(191, 233, 235, .48), transparent 13rem),
      linear-gradient(145deg, var(--wsd-amber), #f5e7c9 78%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  }

  .websites-newsletter__eyebrow {
    color: #6c5428;
    letter-spacing: .12em;
  }

  .websites-newsletter > p:not(.websites-newsletter__eyebrow) {
    color: #665d4d;
  }

  .websites-newsletter__email input {
    border-color: rgba(13, 27, 29, .14);
    background: rgba(255, 253, 247, .77);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  }

  .websites-newsletter__email input:focus {
    outline: none;
    border-color: #2c7a62;
    box-shadow: 0 0 0 3px rgba(44, 122, 98, .12);
  }

  .websites-newsletter__topics label {
    border-color: rgba(13, 27, 29, .11);
    color: #4e594c;
    background: rgba(255, 253, 247, .56);
  }

  .websites-newsletter__topics input {
    accent-color: var(--wsd-mint-strong);
  }

  .websites-newsletter .button--primary {
    border-color: var(--wsd-ink) !important;
    color: #fff !important;
    background: var(--wsd-ink) !important;
  }

  .websites-newsletter small {
    color: #756b58;
  }

  .websites-experience :is(a, button, input):focus-visible {
    outline: 3px solid rgba(157, 244, 74, .55);
    outline-offset: 3px;
  }
}

@media (min-width: 1180px) {
  .websites-hero {
    grid-template-columns: minmax(0, .96fr) minmax(34rem, 1.04fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .websites-experience .button,
  .websites-experience a,
  .websites-experience button,
  .websites-job-card,
  .websites-visual-grid article,
  .industry-stage__copy,
  .websites-decision-grid article,
  .websites-change__chips span {
    transition: none !important;
  }
}