/*
 * Egenform visual and responsive image polish, v3.
 * Kept as a separate, versioned override because /assets is immutable-cached.
 */

html {
  overflow-x: clip;
}

body {
  min-width: 20rem;
}

/* The utility .container max-widths are declared earlier in the bundle. */
.container {
  width: min(100%, 74rem);
  max-width: 74rem;
}

.container-narrow {
  max-width: 48rem;
}

:where(.display, .display-medium, .heading-lg, .lede, .hero-copy, .case-intro, .cta-copy) {
  text-wrap: pretty;
}

.mobile-nav summary {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.mini-browser-bar small {
  color: #4d5d5a;
}

/* Keep every overview image proportional and prevent breakpoint height jumps. */
.example-grid {
  align-items: stretch;
}

.example-card,
.case-visual {
  box-shadow: 0 1rem 2.75rem rgba(8, 31, 36, 0.12);
}

.example-visual {
  aspect-ratio: 3 / 2;
  height: auto;
  isolation: isolate;
}

.example-visual > img,
.case-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

.case-visual {
  aspect-ratio: 3 / 2;
  min-height: 0;
}

.case-visual > img {
  min-height: 0;
}

.case-browser-body {
  min-height: 8.25rem;
}

img[src*="strom-snekker"] {
  object-position: 60% center;
}

img[src*="beveg-klinikk"] {
  object-position: 43% center;
}

/* Large concept pages: preserve the art direction without letting media own the viewport. */
.v2-comparison {
  width: min(100%, 72rem);
  margin-inline: auto;
}

.bakery-upgraded .bakery-menu-visual {
  aspect-ratio: 2 / 1;
}

.bakery-upgraded .bakery-menu-visual img {
  object-position: center 58%;
}

@media (min-width: 821px) {
  .bakery-upgraded .bakery-hero {
    min-height: 0;
  }

  .bakery-upgraded .bakery-hero-image {
    align-self: center;
    min-height: 0;
    height: clamp(30rem, 55vh, 42rem);
  }

  .craft-v2 .v2-hero-grid {
    min-height: min(42rem, calc(100svh - var(--v2-header-height)));
  }

  .clinic-improved .clinic-hero__visual img {
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 34rem;
    object-fit: cover;
  }
}

@media (max-width: 1000px) {
  .case-visual-link {
    width: min(100%, 40rem);
    justify-self: center;
  }

  .case-content {
    width: min(100%, 40rem);
    justify-self: center;
  }
}

@media (max-width: 900px) {
  .subpage-grid,
  .process-layout,
  .choice-layout,
  .detail-layout,
  .faq-layout,
  .drift-layout,
  .offer-family-header,
  .offer-subscription-grid {
    grid-template-columns: 1fr;
  }

  .craft-v2 .v2-hero-media {
    min-height: clamp(24rem, 72vw, 34rem);
  }
}

@media (max-width: 760px) {
  .example-grid {
    width: min(100%, 40rem);
    margin-inline: auto;
  }

  .case-visual {
    display: grid;
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .case-visual::after {
    display: none;
  }

  .case-visual > img {
    aspect-ratio: 3 / 2;
    height: auto;
    border-radius: 0.45rem;
    box-shadow: 0 1rem 2.5rem rgba(8, 31, 36, 0.14);
  }

  .case-browser {
    position: relative;
    inset: auto;
    margin: -2.25rem 0.65rem 0;
  }

  .case-browser-body {
    min-height: 7rem;
    padding: 0.85rem 1rem;
  }

  .case-browser-title {
    max-width: 18ch;
    font-size: clamp(1.2rem, 6.5vw, 1.55rem);
  }

  .bakery-upgraded .bakery-hero-image,
  .bakery-upgraded .bakery-story-photo,
  .clinic-improved .clinic-hero__visual img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .craft-v2 .v2-hero-media {
    min-height: clamp(21rem, 92vw, 27rem);
  }

  .v2-comparison-stage {
    aspect-ratio: 3 / 2;
  }

  .bakery-upgraded .bakery-menu-visual {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 430px) {
  .craft-v2 .v2-hero-media {
    min-height: 21rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .example-card-link .example-visual > img,
  .case-visual-link .case-visual,
  .case-visual-link .case-browser {
    transition: none;
  }
}


/* Public studio pages: shorter measures, fewer competing frames, useful examples.
   The customer portal and concept demo designs keep their own styles. */
.home-hero {
  background: var(--ink);
  padding-block: clamp(3.25rem, 5.5vw, 5rem);
}
.home-hero .hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 4.5vw, 4.25rem);
  align-items: center;
}
.home-hero .display {
  max-width: 16ch;
  font-size: clamp(2.8rem, 4.8vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.home-hero .display span { color: inherit; }
.home-hero .hero-copy {
  max-width: 44ch;
  font-size: 1.075rem;
  line-height: 1.65;
  margin-block: 1.4rem 1.7rem;
}
.home-hero .hero-actions { gap: 1.25rem; }
.home-hero .trust-row {
  border-top: 1px solid #ffffff30;
  padding-top: 1.1rem;
  gap: .5rem 1.25rem;
  font-weight: 400;
  font-size: .8125rem;
}
.home-hero .trust-row svg { display: none; }
.home-hero .hero-demo-card {
  width: 100%;
  padding: 1.3rem;
  border: 0;
  border-radius: .2rem;
  box-shadow: none;
}
.home-hero .demo-card-head { align-items: start; gap: .75rem; }
.home-hero .demo-card-head h2 {
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -.025em;
  margin-top: .45rem;
}
.home-hero .demo-status {
  background: transparent;
  border: 0;
  color: var(--soft);
  padding: 0;
  font-weight: 400;
  white-space: nowrap;
}
.home-hero .demo-status > span { display: none; }
.home-hero .demo-needs { gap: .65rem; }
.home-hero .demo-needs > span {
  border: 0;
  background: transparent;
  padding: .25rem 0;
  font-weight: 400;
}
.home-hero .demo-needs b { display: none; }
.home-hero .microcopy { text-align: left; font-size: .8125rem; line-height: 1.5; }

/* The examples are the work. Captions do not need a second mock browser. */
section[aria-labelledby="examples-title"] { background: var(--ink); }
section[aria-labelledby="examples-title"] .heading-lg { max-width: 22ch; }
section[aria-labelledby="examples-title"] .example-grid {
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  gap: 1.7rem;
  align-items: start;
}
section[aria-labelledby="examples-title"] .example-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
section[aria-labelledby="examples-title"] .example-screen { display: none; }
section[aria-labelledby="examples-title"] .example-visual { border-radius: .15rem; }
section[aria-labelledby="examples-title"] .example-visual::after { display: none; }
section[aria-labelledby="examples-title"] .example-copy { padding: 1.15rem 0 0; }
section[aria-labelledby="examples-title"] .example-copy h3 { font-size: 1.45rem; }
section[aria-labelledby="examples-title"] .example-copy p { font-size: .9375rem; line-height: 1.6; }

/* Plain, numbered explanations instead of a wall of feature cards. */
#tjenester .heading-lg { max-width: 23ch; }
#tjenester .services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
  border: 0;
  background: transparent;
}
#tjenester .service-card {
  background: transparent;
  min-height: 0;
  padding: 1.5rem 0 1.5rem 2.5rem;
  border: 0;
  border-top: 1px solid var(--line);
}
#tjenester .service-icon { display: none; }
#tjenester .service-index { display: block; top: 1.7rem; left: 0; right: auto; color: var(--naust-dark); font-size: .75rem; font-weight: 400; }
#tjenester .service-card h3 { margin: 0 0 .55rem; font-size: 1.125rem; }
#tjenester .service-card p { max-width: 48ch; font-size: .9375rem; }
section[aria-labelledby="direct-title"] { padding-top: 1rem; }
.direct-panel {
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 2rem;
  padding-block: 2.75rem;
}
.direct-marker {
  width: auto;
  height: auto;
  display: block;
  background: transparent;
  color: var(--naust-dark);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 400;
}
.direct-panel .heading-lg { font-size: clamp(2rem, 3vw, 2.7rem); max-width: 20ch; }
.direct-panel > p { font-size: 1rem; }

/* Keep the price comparison prominent, with calmer surrounding typography. */
.offer-choice-section { background: #f3f2eb; }
.offer-choice-section::before { display: none; }
.offer-choice-heading .heading-lg { max-width: 24ch; }
.offer-family { box-shadow: none; border-radius: .25rem; backdrop-filter: none; background: transparent; }
.offer-choice-card { box-shadow: none; border-radius: .2rem; }
.offer-family-label { letter-spacing: .03em; text-transform: none; font-size: .875rem; }
.offer-choice-card-top { flex-wrap: wrap; }
.offer-choice-badge { font-weight: 500; max-width: 100%; white-space: normal; }
.offer-choice-name { text-transform: none; letter-spacing: 0; font-size: 1.125rem; }
.offer-family-header { gap: 2rem; }
.process-layout .heading-lg { max-width: 20ch; }
.final-cta .display-medium { max-width: 23ch; font-size: clamp(2.4rem, 4vw, 3.5rem); }
.final-cta .cta-copy { max-width: 52ch; }
.subpage-hero .display-medium { max-width: 22ch; }
.demo-intro .display-medium {
  max-width: 16ch;
  font-size: clamp(2.5rem, 4vw, 3.4rem);
  line-height: 1.1;
}
.demo-intro .lede { max-width: 40ch; font-size: 1.05rem; line-height: 1.65; }
.demo-form-card { border-radius: .25rem; box-shadow: none; }
.demo-trust-card { border-radius: 0; box-shadow: none; }
.demo-form [data-slot="input"], .demo-form [data-slot="textarea"], .demo-form select { font-size: 1rem; }

@media (max-width: 1000px) {
  .home-hero .hero-grid { grid-template-columns: 1fr; }
  .home-hero .hero-content { max-width: 42rem; }
  .home-hero .display { max-width: 20ch; }
  .home-hero .hero-demo-card { max-width: 38rem; }
  section[aria-labelledby="examples-title"] .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section[aria-labelledby="examples-title"] .example-card:last-child { grid-column: auto; justify-self: stretch; width: auto; }
  .direct-panel { grid-template-columns: 1fr 1fr; }
  .direct-marker { grid-column: 1 / -1; }
  .direct-panel > p { grid-column: auto; }
}
@media (max-width: 760px) {
  .home-hero .hero-grid { gap: 2.5rem; }
  .home-hero .display { max-width: 17ch; font-size: clamp(2.55rem, 10vw, 3.5rem); }
  .home-hero .hero-copy { font-size: 1rem; }
  .home-hero .hero-demo-card { padding: 1rem; }
  .home-hero .demo-card-head { flex-wrap: wrap; }
  .home-hero .demo-status { font-size: .75rem; }
  section[aria-labelledby="examples-title"] .example-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  #tjenester .services-grid, .direct-panel { grid-template-columns: 1fr; }
  #tjenester .service-card { padding-block: 1.35rem; }
  .direct-panel { gap: 1.1rem; padding-block: 2rem; }
  .direct-panel > p { max-width: 46ch; }
  .demo-intro .display-medium { max-width: 19ch; font-size: 2.55rem; }
  .home-hero .trust-row { margin-top: 1.5rem; }
}