/* Landing Page Styles — Sales / Prospecting Pages */
/* Companion to shared/tokens.css */

/* ============================================
   Layout & Sections
   ============================================ */

.landing-header {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.landing-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-decoration: none;
}

.landing-logo:hover {
  text-decoration: none;
}

.landing-nav {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.landing-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color 0.2s ease;
}

.landing-nav a:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Hero */
.landing-hero {
  padding: var(--space-24) 0 var(--space-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.landing-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.landing-hero .container {
  position: relative;
  z-index: 1;
}

.landing-hero h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  line-height: 1.15;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .landing-hero h1 {
    font-size: var(--text-5xl);
  }
}

.landing-hero .lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: 1.6;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-6);
}

@media (min-width: 480px) {
  .hero-cta-group {
    flex-direction: row;
    justify-content: center;
  }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  min-height: 56px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Sections */
.landing-section {
  padding: var(--space-16) 0;
}

.landing-section h2 {
  text-align: center;
  margin-bottom: var(--space-8);
  font-size: var(--text-3xl);
}

.landing-section .section-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: calc(-1 * var(--space-4)) auto var(--space-8);
  font-size: var(--text-lg);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* ============================================
   Score Comparison / Before-After
   ============================================ */

.score-comparison {
  display: grid;
  gap: var(--space-6);
  max-width: 700px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .score-comparison {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
}

.score-card {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.score-card .score-label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.score-card .score-value {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1;
}

.score-card .score-suffix {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.score-bad { color: var(--color-score-bad); }
.score-mid { color: var(--color-score-mid); }
.score-good { color: var(--color-score-good); }

.score-arrow {
  display: none;
  font-size: var(--text-3xl);
  color: var(--color-text-tertiary);
}

@media (min-width: 768px) {
  .score-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.score-gauge-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.score-gauge-wrapper svg {
  width: 140px;
  height: 140px;
}

/* ============================================
   Features Grid
   ============================================ */

.feature-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4) var(--space-6);
}

.feature-check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 204, 102, 0.15);
  color: var(--color-score-good);
  font-size: var(--text-sm);
  font-weight: 700;
}

.feature-missing {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 51, 51, 0.15);
  color: var(--color-score-bad);
  font-size: var(--text-xl);
  font-weight: 700;
}

.feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.feature-text strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

.feature-text span {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ============================================
   Services Preview
   ============================================ */

.services-preview {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .services-preview {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .services-preview {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
}

.service-card p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

/* ============================================
   Contact Info
   ============================================ */

.contact-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contact-item {
  text-align: center;
  padding: var(--space-6);
}

.contact-icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  display: block;
}

.contact-item .contact-label {
  display: block;
  font-size: var(--text-sm);
  color: #526172;
  margin-bottom: var(--space-2);
}

.contact-item a {
  color: #65410e;
  font-weight: 600;
  word-break: break-all;
}

.contact-item a:hover {
  color: #10202f;
}

.contact-item p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

/* ============================================
   Pricing
   ============================================ */

.pricing-section {
  text-align: center;
}

.pricing-card {
  max-width: 500px;
  margin: 0 auto;
  padding: var(--space-8);
}

.price-original {
  text-decoration: line-through;
  color: var(--color-text-tertiary);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.price-highlight {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-cta);
  margin-bottom: var(--space-2);
}

.price-savings {
  color: var(--color-score-good);
  font-weight: 600;
  margin-bottom: var(--space-6);
}

.price-features {
  list-style: none;
  text-align: left;
  margin: var(--space-6) 0;
  padding: 0;
}

.price-features li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.price-features li::before {
  content: "\2713";
  color: var(--color-score-good);
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================
   Portal CTA Banner
   ============================================ */

.portal-cta-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  padding: var(--space-12) 0;
}

.portal-cta-section h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-2xl);
}

.portal-cta-section p {
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto var(--space-6);
}

/* ============================================
   Footer
   ============================================ */

.landing-footer {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border);
}

.landing-footer .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .landing-footer .container {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.landing-footer p {
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

.landing-footer a {
  color: var(--color-text-secondary);
}

.landing-footer a:hover {
  color: var(--color-text-primary);
}

/* ============================================
   Sticky CTA Bar (mobile)
   ============================================ */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
  text-align: center;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sticky-cta .btn-cta {
  width: 100%;
  max-width: 400px;
}

@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}

/* Extra bottom padding on mobile so sticky bar doesn't cover content */
@media (max-width: 1023px) {
  .landing-footer {
    padding-bottom: calc(var(--space-8) + 80px);
  }
}

/* ============================================
   Trust / Social Proof
   ============================================ */

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-6);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.trust-badge-icon {
  font-size: var(--text-lg);
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeInUp 0.5s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .animate-in {
    animation: none;
  }
}

/* ── Subscription package grid (landing pricing) ─────────────────────── */
.pricing-packages { align-items: stretch; max-width: 1000px; margin: 0 auto; }
.pricing-packages .pricing-card {
  max-width: none;
  margin: 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  text-align: left;
  position: relative;
}
.pricing-packages .pricing-card.featured {
  border-color: var(--color-cta);
  box-shadow: 0 16px 48px -20px rgba(14, 27, 43, 0.45);
}
.pricing-packages .price-features { flex: 1 1 auto; margin-top: var(--space-4); }
.pricing-packages .price-highlight { font-size: var(--text-3xl); margin-bottom: 0; }
.pricing-packages .price-savings { font-weight: 500; color: var(--color-text-secondary); }
.pricing-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--color-cta);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}
.pricing-tagline { color: var(--color-text-secondary); font-size: 0.92rem; margin-bottom: 0.9rem; }
.pricing-packages .btn-cta { margin-top: var(--space-5); }

/* ── Trust pass: org line, price anchor, reviews, legal prose ────────── */

.hero-orgline {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.price-anchor {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin: calc(-1 * var(--space-4)) auto var(--space-8);
  max-width: 600px;
}

.price-anchor s {
  color: var(--color-text-tertiary);
}

.reviews-grid {
  display: grid;
  gap: var(--space-4);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.review-card {
  padding: var(--space-6);
  text-align: left;
}

.review-stars {
  color: var(--color-score-mid, #f59e0b);
  letter-spacing: 2px;
  font-size: var(--text-lg);
}

.review-comment {
  margin: var(--space-3) 0;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.review-meta {
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Star rating input (public review form) — row-reverse so hover/checked
   highlights the star itself and everything before it in DOM order. */
.star-field {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.star-field legend {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.star-required {
  color: var(--color-score-bad);
}

.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 2px;
}

.star-rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.star-rating label {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-border, #d1d5db);
  cursor: pointer;
  transition: color 0.15s ease;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--color-score-mid, #f59e0b);
}

.star-rating input:focus-visible + label {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Legal / privacy-policy prose */
.legal-section h1 {
  margin-bottom: var(--space-4);
}

.legal-prose h2 {
  text-align: left;
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-3);
}

.legal-prose p,
.legal-prose li {
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.legal-prose ul {
  padding-left: 1.3rem;
  margin: var(--space-3) 0;
}

.legal-prose li {
  margin-bottom: var(--space-2);
}

.legal-updated {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* ── Embedded live preview of the generated site (landing) ───────────── */
.site-preview-frame {
  max-width: 1100px;
  margin: 0 auto;
  border: 1px solid var(--color-border, #d8d2c6);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 64px -28px rgba(14, 27, 43, 0.45);
  background: #fff;
}
.site-preview-bar {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 11px 15px;
  background: #f1ece3;
  border-bottom: 1px solid var(--color-border, #d8d2c6);
}
.site-preview-bar span {
  width: 11px; height: 11px; border-radius: 50%;
  background: #cdc5b6;
}
.site-preview-frame iframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}

/* ============================================================
   Salgsflate 2026-09-05 (eierordre): score først, forslag rett under,
   pakker på én rad med tydelig Anbefalt, marine + amber som forsiden.
   ============================================================ */
:root { --lh-navy: #10202f; --lh-navy-2: #152738; --lh-amber: #f6a04a; --lh-amber-2: #ffb964; --lh-ink: #eef3fa; }
.lh-dark { background: var(--lh-navy); color: var(--lh-ink); padding: clamp(40px, 7vh, 88px) 0 clamp(40px, 7vh, 80px); }
.lh-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .lh-grid { grid-template-columns: 1fr; } }
.lh-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: none; color: #e7c893; margin: 0 0 1rem; }
.lh-dark h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.015em; color: var(--lh-ink); margin: 0 0 1.1rem; text-wrap: balance; }
.lh-dark .lead { color: rgba(238,243,250,.72); font-size: clamp(1.02rem, 1.4vw, 1.18rem); max-width: 46ch; margin: 0 0 1.8rem; }
.lh-ctas { justify-content: flex-start; align-items: center; margin-top: 0; }
.lh-dark .btn-cta { background: var(--lh-amber); color: #16233a; border: 0; box-shadow: 0 8px 22px -10px rgba(246,160,74,.6); }
.lh-dark .btn-cta:hover { background: var(--lh-amber-2); color: #16233a; }
.lh-link { color: var(--lh-amber-2); font-weight: 600; text-decoration: none; padding: .6rem .2rem; }
.lh-link:hover { color: #fff; }
.lh-facts { margin: 1.4rem 0 0; font-size: .9rem; color: rgba(238,243,250,.55); }
.lh-score { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(10px, 2vw, 22px); align-items: center; background: var(--lh-navy-2); border: 1px solid rgba(238,243,250,.1); border-radius: 20px; padding: clamp(18px, 2.4vw, 30px); }
.lh-score-card { text-align: center; }
.lh-score-label { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: none; color: rgba(238,243,250,.55); margin-bottom: .6rem; }
.lh-gauge svg { width: 120px; height: 120px; }
.lh-score-num { display: block; font-family: Georgia, serif; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; margin-top: .4rem; }
.lh-score-num small { font-size: .95rem; color: rgba(238,243,250,.5); font-family: inherit; }
.lh-now .lh-score-num.score-bad { color: #ff8a70; } .lh-now .lh-score-num.score-mid { color: var(--lh-amber-2); }
.lh-score-num.score-good { color: #3fd68e; }
.lh-score-arrow { font-size: 2rem; color: var(--lh-amber); }
@media (max-width: 480px) { .lh-score { grid-template-columns: 1fr; } .lh-score-arrow { transform: rotate(90deg); } }

/* Pakker på én rad */
.pk-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; text-align: left; margin-top: var(--space-6); }
@media (max-width: 1100px) { .pk-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pk-row { grid-template-columns: 1fr; } }
.pk-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; padding: clamp(20px, 2vw, 28px); }
.pk-card h3 { margin: .4rem 0 .2rem; font-size: 1.15rem; }
.pk-featured { background: var(--lh-navy); color: var(--lh-ink); border-color: var(--lh-navy); transform: translateY(-10px); box-shadow: 0 24px 50px -24px rgba(16,32,47,.6); }
@media (max-width: 1100px) { .pk-featured { grid-column: 1 / -1; transform: none; } }
.pk-featured h3, .pk-featured .pricing-tagline, .pk-featured .price-features li { color: var(--lh-ink); }
.pk-featured .pricing-tagline { color: rgba(238,243,250,.72); }
.pk-featured .price-features li { border-bottom-color: rgba(238,243,250,.12); }
.pk-featured .price-features li::before { color: var(--lh-amber); }
.pk-badge { display: inline-block; align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: none; padding: .3rem .7rem; border-radius: 999px; background: var(--lh-amber); color: #16233a; }
.pk-badge-soft { background: var(--color-surface, #f3f4f6); color: var(--color-text-secondary); }
.pk-price { font-family: Georgia, serif; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; margin: .9rem 0 .3rem; color: inherit; }
.pk-price small { font-size: .85rem; font-family: var(--font-body, inherit); color: inherit; opacity: .7; }
.pk-price-sm { font-size: 1.7rem; }
.pk-sub { font-size: .88rem; opacity: .75; margin: 0 0 .4rem; }
.pk-anchor { font-size: .82rem; color: #e7c893; margin: 0 0 .6rem; }
.pk-card .price-features { margin: .8rem 0 1.2rem; flex: 1; }
.pk-card .price-features li { font-size: .92rem; }
.pk-cta { width: 100%; justify-content: center; margin-top: auto; }
.pk-featured .btn-cta { background: var(--lh-amber); color: #16233a; border: 0; }
.pk-featured .btn-cta:hover { background: var(--lh-amber-2); color: #16233a; }
.pk-reassure { font-size: .8rem; color: rgba(238,243,250,.6); margin: .8rem 0 0; text-align: center; }
/* Amber som handlingsfarge på hele kundesiden (i stedet for grønt) */
.landing-section .btn-cta, .portal-cta-section .btn-cta { background: var(--lh-amber); color: #16233a; }
.landing-section .btn-cta:hover, .portal-cta-section .btn-cta:hover { background: var(--lh-amber-2); color: #16233a; }
.lh-orgline { margin: .9rem 0 0; font-size: .8rem; color: rgba(238,243,250,.45); max-width: 60ch; }
.pk-price small { display: block; margin-top: .35rem; font-size: .82rem; }
/* Amber også i topplinje og sticky-CTA; ikke grønt noe sted på kundesiden */
.landing-nav .btn-cta, .sticky-cta .btn-cta { background: var(--lh-amber); color: #16233a; }
.landing-nav .btn-cta:hover, .sticky-cta .btn-cta:hover { background: var(--lh-amber-2); color: #16233a; }
@media (max-width: 640px) {
  .landing-nav .btn-cta { display: none; }           /* sticky-CTA nederst tar jobben */
  .landing-nav { gap: var(--space-3); }
  .lh-score-arrow { display: none; }
  .lh-score { gap: 18px; }
}
.lh-method { grid-column: 1 / -1; margin: .6rem 0 0; font-size: .78rem; line-height: 1.45; color: rgba(238,243,250,.5); text-align: center; }
.lh-who { margin-top: 1rem; font-size: .92rem; color: var(--color-text-secondary); }
.lh-details { max-width: 900px; margin: 0 auto; }
.lh-details summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; padding: .8rem 0; color: var(--color-text-primary); }
.lh-details[open] summary { margin-bottom: .6rem; }

/* Shared public navigation, including customer portal pages. */
.landing-section { --color-info: #65410e; --color-text-tertiary: #526172; }
.landing-section :focus-visible, .portal-main :focus-visible, .portal-mobile-menu :focus-visible {
  outline: 3px solid #87531c; outline-offset: 3px;
}
.lh-dark :focus-visible, .portal-sidebar :focus-visible { outline: 3px solid #ffb964; outline-offset: 3px; }
.landing-section h1, .landing-section h2, .portal-main h1, .portal-main h2 { text-wrap: balance; }
.proposal-hero .lh-copy { max-width: 820px; }
.proposal-hero .lead { max-width: 64ch; }
.proposal-hero .lh-facts, .proposal-hero .lh-orgline { color: #c3cfda; }
.proposal-note { max-width: 760px; margin: 24px auto 0; text-align: center; color: #5a6573; }
.proposal-lookup .container { max-width: 760px; }
.proposal-lookup h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
.proposal-lookup p { line-height: 1.65; }
.proposal-lookup-form { display: grid; gap: 12px; max-width: 420px; margin: 28px 0; }
.proposal-lookup-form label { font-weight: 600; }
.proposal-lookup-form input { width: 100%; min-height: 48px; border: 1px solid #767c83; border-radius: 8px; padding: 12px 16px; font: inherit; color: #10202f; background: white; }
.proposal-lookup-form :focus-visible { outline: 3px solid #a35405; outline-offset: 3px; }
.proposal-error { background: #fff2dd; border: 1px solid #be873f; color: #634312; border-radius: 10px; padding: 20px; }
.proposal-hero h1 { overflow-wrap: anywhere; }
.pk-featured .pk-reassure { color: #ccd5df; }
.public-header, .public-footer { background: #10202f; color: #eef3fa; }
.public-header-inner, .public-footer-inner {
  width: min(1240px, 100%); margin: 0 auto; padding: 18px 24px;
}
.public-header-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.public-brand { display: inline-flex; flex-shrink: 0; }
.public-brand img, .public-footer img { display: block; max-width: 100%; }
.public-nav { display: flex; align-items: center; justify-content: flex-end; gap: 20px; flex: 1; }
.public-header a, .public-footer a { color: #eef3fa; text-decoration: none; }
.public-nav a { font-size: .875rem; padding: 10px 0; }
.public-header a:hover, .public-footer a:hover { color: #ffb964; text-decoration: underline; }
.public-header .public-cta {
  display: inline-flex; justify-content: center; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: 999px; background: #f6a04a; color: #10202f;
  font-size: .875rem; font-weight: 650; white-space: nowrap; text-decoration: none;
}
.public-header .public-cta:hover { color: #10202f; background: #ffb964; }
.public-mobile-menu { display: none; }
.public-header :focus-visible, .public-footer :focus-visible {
  outline: 3px solid #ffb964; outline-offset: 4px;
}
.public-skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 1000;
  padding: 12px 18px; background: #10202f; color: white;
}
.public-skip-link:focus { top: 12px; }
.public-footer { border-top: 1px solid #344553; }
.public-footer-inner { display: grid; gap: 18px; padding-top: 32px; padding-bottom: 32px; }
.public-footer p { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; color: #d5dce3; font-size: .875rem; }
.public-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.public-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.portal-mobile-menu { display: none; }
.portal { min-height: 65vh; grid-template-columns: 260px minmax(0, 1fr); --color-info: #65410e; --portal-green-hover: #704f25; }
.portal-main { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.portal-main .alert-warning { background: #fff2dd; color: #704612; border: 1px solid #be873f; }
.portal-sidebar .sidebar-footer a { color: #c3c8cf; }
.portal-stat-grid > *, .lh-grid > * { min-width: 0; }
@media (max-width: 1100px) {
  .public-nav { display: none; }
  .public-header-inner { gap: 14px; }
  .public-header .public-cta { margin-left: auto; }
  .public-mobile-menu { display: block; width: 100%; }
  .public-mobile-menu summary { cursor: pointer; width: fit-content; min-height: 44px; padding: 10px 0; }
  .public-mobile-menu nav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 4px; }
  .public-mobile-menu a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; }
}
@media (max-width: 768px) {
  .public-header-inner, .public-footer-inner { padding-left: 20px; padding-right: 20px; }
  .public-brand img { width: 126px; height: 28px; }
  .public-header .public-cta { padding: 10px 14px; }
  .portal { grid-template-columns: minmax(0, 1fr); }
  .portal-main { padding: 24px 20px; }
  .portal-stat-card { padding: 20px 12px; }
  .portal-stat-value { font-size: 1.4rem; }
  .portal-mobile-menu { display: block; padding: 12px 20px; background: #f0e9dc; color: #10202f; border-bottom: 1px solid #d4c9b6; }
  .portal-mobile-menu summary { cursor: pointer; padding: 12px 0; font-weight: 600; overflow-wrap: anywhere; }
  .portal-mobile-menu nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .portal-mobile-menu a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px; color: #10202f; font-size: .875rem; text-decoration: none; }
  .portal-mobile-menu svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .portal-mobile-menu a.active { background: #10202f; color: white; border-radius: 8px; }
  .portal-mobile-menu a:hover { text-decoration: underline; }
  .portal-mobile-menu .portal-mobile-logout { width: fit-content; margin-top: 8px; }
  .site-preview-frame iframe { height: 520px; }
}

/* Shared public header uses the same flexible row and menu as the front page. */
.public-header-inner { position: relative; gap: 8px 14px; }
.public-header-inner > * { min-width: 0; max-width: 100%; }
.public-header .public-cta { white-space: normal; text-align: center; }
.public-footer, .legal-prose, .proposal-lookup { overflow-wrap: anywhere; }
.landing-section p a, .public-footer p a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .public-mobile-menu { width: auto; }
  .public-mobile-menu summary { padding: 10px 0; font-size: .9rem; }
  .public-mobile-menu nav { position: absolute; z-index: 50; top: 100%; left: 0; right: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px 20px; background: #152738; border-bottom: 1px solid #53677a; max-height: 70vh; overflow-y: auto; }
  .public-mobile-menu nav a { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  .public-header { position: relative; }
  .public-header-inner { padding-inline: 20px; column-gap: 10px; }
  .public-brand { flex: 1 1 95px; }
  .public-brand img { width: 114px; height: auto; }
  .public-header .public-cta { padding: .65rem .8rem; font-size: .8125rem; }
  .public-mobile-menu summary { font-size: .8125rem; }
}
@media (max-width: 359px) {
  .public-brand { flex-basis: 100%; }
  .public-header .public-cta { margin-left: 0; margin-right: auto; }
}
@media (max-width: 480px) {
  .public-mobile-menu nav { grid-template-columns: minmax(0, 1fr); }
}

/* Hurtigbånd for lynsjekken, rett under heroen. */
.quickband { background: var(--navy-2); border-block: 1px solid var(--line); padding: 14px 0; }
.quickband-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.quickband-form label { font-weight: 600; color: var(--ink); margin-right: 4px; }
.quickband-form input { flex: 1 1 220px; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 8px;
  border: 1px solid #64748b; background: #fff; color: #0f172a; font-size: 1rem; }
.quickband-form .btn { min-height: 46px; padding: 0 1.3rem; }
.quickband-note { margin: 8px 0 0; color: var(--ink-dim); font-size: .85rem; }
@media (max-width: 560px) {
  .quickband-form label { flex: 1 0 100%; }
  .quickband-form .btn { flex: 1 1 auto; }
}
.price-examples ul { margin: .4rem 0 .6rem; padding-left: 1.1rem; }
.price-examples li { margin-bottom: .3rem; }

/* ============================================================
   Editoriell stil 2026-09 for SiteRemakes egne informasjonssider
   (kom i gang, finn forslag, vilkår, personvern, portal-innlogging).
   Scoped til body.sr-editorial så kundeportalen, demoene og
   kundesidene er uendret. Samme palett og skrifter som forsiden.
   ============================================================ */
body.sr-editorial {
  --navy: #0f1f30; --navy-2: #142a3d; --navy-3: #1b3549;
  --ink: #f4efe6; --ink-dim: #cfc7ba; --amber: #e9a253; --amber-2: #f2b76d; --gold: #dcc296;
  --paper: #f5f1ea; --paper-2: #fbf9f5; --paper-3: #ebe5d9;
  --dark-ink: #16202c; --dark-ink-dim: #4a5462; --brass-ink: #7d5217;
  --line-dark: rgba(22,32,44,.16); --line-dark-strong: rgba(22,32,44,.42);
  --serif: Georgia, 'Times New Roman', serif;
  --brand-font: 'Outfit', 'Inter', sans-serif;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --color-bg-primary: #f5f1ea; --color-surface: #fbf9f5; --color-border: rgba(22,32,44,.16);
  --color-text-primary: #16202c; --color-text-secondary: #4a5462; --color-text-tertiary: #4a5462; --color-text-heading: #16202c;
  --color-cta: #e9a253; --color-cta-hover: #f2b76d; --color-cta-active: #d8913f; --color-info: #7d5217;
  --btn-radius: 999px; --card-radius: 4px;
  background: var(--paper); color: var(--dark-ink); font-size: 1.0625rem; line-height: 1.65;
}
body.sr-editorial h1, body.sr-editorial h2 { font-family: var(--serif); font-weight: 400; letter-spacing: .01em; text-transform: none; line-height: 1.12; color: var(--dark-ink); }
body.sr-editorial h3 { font-family: var(--font-body); font-weight: 600; color: var(--dark-ink); }
body.sr-editorial .landing-section h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
body.sr-editorial .landing-section h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
body.sr-editorial .btn-cta { background: var(--amber); color: var(--navy); border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: .9rem; letter-spacing: 0; text-transform: none; min-height: 50px; padding: .75rem 1.7rem; transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1), box-shadow .25s; }
body.sr-editorial .btn-cta:hover { background: var(--amber-2); color: var(--navy); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(233,162,83,.7); }
body.sr-editorial .btn-secondary { border-radius: 999px; border-color: var(--line-dark-strong); color: var(--dark-ink); }
body.sr-editorial .landing-section :focus-visible, body.sr-editorial .legal-section :focus-visible { outline: 3px solid var(--brass-ink); outline-offset: 3px; }

/* Delt topp og bunn på informasjonssidene. */
body.sr-editorial .public-header, body.sr-editorial .public-footer { background: var(--navy); color: var(--ink); }
body.sr-editorial .public-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(244,239,230,.16); }
body.sr-editorial .public-nav a { font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--ink-dim); transition: color .2s; }
body.sr-editorial .public-header a:hover, body.sr-editorial .public-footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); }
body.sr-editorial .public-header .public-cta { background: var(--amber); color: var(--navy); font-size: .9rem; letter-spacing: 0; text-transform: none; border: 1px solid var(--amber); transition: background .2s, transform .2s cubic-bezier(.16,1,.3,1); }
body.sr-editorial .public-header .public-cta:hover { background: var(--amber-2); border-color: var(--amber-2); color: var(--navy); text-decoration: none; transform: translateY(-1px); }
body.sr-editorial .public-header :focus-visible, body.sr-editorial .public-footer :focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
body.sr-editorial .public-mobile-menu summary { font-size: .9rem; letter-spacing: 0; text-transform: none; }
body.sr-editorial .public-mobile-menu nav { background: var(--navy-2); border-bottom-color: rgba(244,239,230,.32); }
body.sr-editorial .public-footer { border-top: 1px solid rgba(244,239,230,.16); }
body.sr-editorial .public-footer p { color: var(--ink-dim); }
body.sr-editorial .public-footer nav a { font-size: .9rem; letter-spacing: 0; text-transform: none; }
body.sr-editorial .public-footer .contact-person { color: var(--ink-dim); }
body.sr-editorial .public-footer .contact-person a { color: var(--ink); }

/* Juridiske sider og forslagssøk. */
body.sr-editorial .legal-section .section-subtitle { color: var(--dark-ink-dim); font-size: 1.125rem; }
body.sr-editorial .legal-guide { background: var(--paper-2); border: 1px solid var(--line-dark); border-radius: 4px; color: var(--dark-ink); }
body.sr-editorial .legal-guide h2 { font-size: 1.5rem; }
body.sr-editorial .legal-prose h2 { font-size: 1.6rem; margin-top: 3rem; }
body.sr-editorial .legal-prose p, body.sr-editorial .legal-prose li, body.sr-editorial .legal-guide li, body.sr-editorial .legal-guide p { color: var(--dark-ink); }
body.sr-editorial .legal-section a, body.sr-editorial .legal-guide a { color: var(--brass-ink); }
body.sr-editorial .legal-updated { color: var(--dark-ink-dim); }
body.sr-editorial .proposal-lookup h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
body.sr-editorial .proposal-lookup-form input { border-radius: 999px; border-color: var(--line-dark-strong); color: var(--dark-ink); }
body.sr-editorial .proposal-lookup-form :focus-visible, body.sr-editorial .proposal-lookup-results a:focus-visible { outline-color: var(--brass-ink); }
body.sr-editorial .proposal-lookup a, body.sr-editorial .proposal-lookup-results a { color: var(--brass-ink); }
body.sr-editorial .proposal-lookup-results li { border-top-color: var(--line-dark); }
body.sr-editorial .proposal-error { background: var(--paper-3); border-color: var(--brass-ink); color: var(--dark-ink); border-radius: 4px; }

/* Forslagssiden (page.html) beholder sin mørke hero; skriften følger med. */
body.sr-editorial .lh-dark { background: var(--navy); color: var(--ink); }
body.sr-editorial .lh-dark h1 { font-family: var(--serif); font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--ink); }
body.sr-editorial .lh-eyebrow { font-family: var(--brand-font); font-size: 1.25rem; line-height: 1.45; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--gold); }
body.sr-editorial .lh-dark .btn-cta { background: var(--amber); color: var(--navy); }
body.sr-editorial .lh-link { color: var(--gold); }
body.sr-editorial .site-preview-frame { border-radius: 4px; border-color: var(--line-dark-strong); }
body.sr-editorial .site-preview-bar { background: var(--paper-3); }
body.sr-editorial .pk-card { border-radius: 4px; background: var(--paper-2); }
body.sr-editorial .pk-featured { background: var(--navy); color: var(--ink); }
body.sr-editorial .pk-price { font-family: var(--serif); }
body.sr-editorial .pk-badge { background: var(--amber); color: var(--navy); }
body.sr-editorial .review-card, body.sr-editorial .glass-card { border-radius: 4px; }