/* ==========================================================================
   planner4you — application styles
   Sections: 1. Variables  2. Base  3. Components  4. Layouts  5. Responsive
   Values mirror the live Webflow build (p4y.webflow.shared.css). Use the
   custom properties below as design tokens instead of hardcoding.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables (design tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Color — brand */
  --color-primary: #485462;
  --color-primary-hover: rgb(38 70 83 / 80%);

  /* Color — surfaces & text */
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-border: #d1d8e3;
  --color-border-alt: #d2d8e2;
  --color-divider: rgb(136 158 168 / 20%);
  --color-rule: #cfd8e4;
  --color-text: #333333;
  --color-text-muted: #485462;
  --color-link: #265ba5;
  --color-icon-bg: #eef0f6;
  --color-text-on-dark: #dcdfe4;
  --color-text-on-dark-dim: #b9bcbf;
  --color-footer-rule: #57636f;

  /* Color — feedback */
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;

  /* Typography */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-subtitle: 10px;
  --font-size-base: 14px;
  --font-size-body: 15px;
  --font-size-pill: 9px;
  --line-height-base: 20px;
  --heading-letter-spacing: 3px;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --section-padding: 140px;

  /* Radius, elevation, motion */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 100px;
  --shadow-drop: 3px 6px 9px rgb(174 174 192 / 60%);
  --transition-base: 300ms ease;

  /* Layout */
  --container-max: 1400px;
  --container-gutter: 5vw;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* A column so the footer is pushed to the foot of the viewport on pages with
   too little content to fill it. dvh follows the mobile toolbar; vh is the
   fallback where it is not supported. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 10px;
  font-weight: bold;
}

/* Only h3 is treated as a display heading on the live site. */
h3 {
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

h4 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

p {
  margin: 0 0 10px;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-base);
}

img {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   3. Components
   -------------------------------------------------------------------------- */

/* Content column: 1400px max, 5vw minimum gutters. */
.container {
  width: min(var(--container-max), 100% - (2 * var(--container-gutter)));
  margin: 0 auto;
}

/* Full-bleed section that keeps a panel aligned to the content column while
   its background continues to the right viewport edge. */
.bleed-right {
  display: grid;
  grid-template-columns:
    minmax(var(--container-gutter), 1fr)
    minmax(auto, var(--container-max))
    minmax(var(--container-gutter), 1fr);
}

.bleed-right > :first-child {
  grid-column: 2;
}

.bleed-right > :last-child {
  grid-column: 3;
}

.section {
  padding: var(--section-padding) 0;
}

.section--muted {
  background-color: var(--color-bg);
}

.section--surface {
  background-color: var(--color-surface);
}

/* 10px uppercase micro-label used for eyebrows and small links. */
.text-link {
  display: inline-flex;
  position: relative;
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

/* Block-level, for the eyebrows that head a full-width column rather than
   sitting inline. Inline-flex leaves a line box that shifts what follows. */
.text-link--block {
  display: flex;
}

a.text-link {
  text-decoration: underline;
}

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

/* Available to screen readers, removed from the visual layout. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 300px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}

.button--primary {
  padding: 16px 32px;
  background-color: var(--color-primary);
  color: var(--color-surface);
  font-size: 12px;
  font-weight: 700;
}

.button--primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-surface);
}

.button--secondary {
  min-height: 42px;
  margin-top: var(--space-md);
  padding: 12px 20px;
  border-color: var(--color-primary);
  background-color: transparent;
  color: #000;
  font-size: var(--font-size-pill);
  line-height: 1.35em;
}

.button--secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-surface);
}

.button--shadow {
  border-color: #6e6e6e;
  box-shadow: var(--shadow-drop);
}

.flash {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-surface);
}

.flash--alert {
  border-left-color: var(--color-danger);
  color: var(--color-danger);
}

.flash--notice {
  border-left-color: var(--color-success);
  color: var(--color-success);
}

/* --------------------------------------------------------------------------
   4. Layouts
   -------------------------------------------------------------------------- */
.app-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0;
}

.app-header--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.app-brand-logo {
  width: 144px;
  height: auto;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 25px;
  margin-left: auto;
}

.app-nav a {
  padding: 15px;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.app-nav a[aria-current="page"] {
  font-weight: 700;
}

.app-nav a:hover {
  color: var(--color-primary-hover);
}

.app-nav-separator {
  width: 1px;
  height: 16px;
  background-color: var(--color-rule);
}

.app-nav-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.app-main {
  /* Takes the slack in the body column, so the footer never floats. Grow
     only: the basis stays on the content, which can exceed the viewport. */
  flex-grow: 1;
  /* clip, not hidden: `hidden` would make this a scroll container and
     break position:sticky for descendants such as the tab rail. */
  overflow-x: clip;
}

/* Hero — full-bleed photo with the wordmark, strapline and CTA over it. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 145px 0;
  background-color: var(--color-surface);
}

.hero-image {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(34 39 48 / 40%), rgb(34 39 48 / 40%)),
    url("/assets/hero-bg-0c851974.jpeg");
  background-position: 0 0, 65%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

/* Sits above .hero-image, which is absolutely positioned later in the DOM.
   Two 700px columns: content occupies the first, so the percentage padding
   below resolves against the column rather than the full content width. */
.hero-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 700px));
  width: min(var(--container-max), 100% - (2 * var(--container-gutter)));
  margin: 80px auto 0;
}

.hero-panel-inner {
  grid-column: 1;
  padding-right: 10%;
}

.hero-panel-inner .button {
  width: 100%;
}

.hero-wordmark {
  position: relative;
  bottom: 12px;
  width: 100%;
}

.hero-heading-highlight {
  color: var(--color-bg);
}

/* Feature cards — white block pulled up over the hero. */
.feature-cards {
  position: relative;
  margin-top: -80px;
  background-color: var(--color-surface);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #000;
}

.feature-card-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 0 36px;
  background-color: var(--color-surface);
}

/* The rule under each title is inset by the row padding on the live site. */
.feature-card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  text-align: center;
}

/* Only the lower half carries the vertical divider, and not on the last card.
   Fixed rows (icon, description) keep the CTA rule at a constant baseline
   across cards regardless of how long the copy is. */
.feature-card-body {
  display: grid;
  grid-template-rows: 50px 150px;
  align-content: space-between;
  flex: 1;
  gap: 60px;
  padding: 60px 36px 36px;
  border-right: 1px solid var(--color-divider);
}

/* Auto rows share the row's spare height evenly (align-content: stretch),
   which is what puts the CTA rule near the foot of the card. */
.feature-card-description {
  display: grid;
  align-content: stretch;
  gap: 24px;
}

.feature-card--last .feature-card-body {
  border-right: none;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 16px;
  border-radius: var(--radius-pill);
  background-color: var(--color-icon-bg);
}

.feature-card-body p {
  max-width: 400px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45em;
  color: var(--color-text-muted);
}

/* The box stretches to fill its row, so the rule sits at the row's foot
   while the label stays at the top. */
.feature-card-cta {
  position: relative;
  display: block;
  align-self: stretch;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-pill);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: #626d86;
}

/* Animated underline that fills in on hover. */
.feature-card-cta-line {
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.feature-card--link:hover .feature-card-cta-line {
  transform: scaleX(1);
}

/* SaaS intro */
.saas-intro {
  display: grid;
  grid-template-columns: minmax(350px, 1fr) 1px 1fr;
  align-items: center;
  gap: 36px 120px;
}

.saas-intro-text {
  max-width: 475px;
}

.saas-intro-accent {
  display: block;
  width: 60px;
  height: 2px;
  margin-bottom: 36px;
  background-color: #d7dfeb;
}

.saas-intro-text h3 {
  margin: 0 0 28px;
}

.saas-intro-text p {
  margin: 0 0 36px;
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

.saas-intro-divider {
  align-self: stretch;
  min-width: 1px;
  background-color: #cdd8e5;
}

.saas-intro-image {
  position: relative;
  min-height: 450px;
  overflow: hidden;
  background-image: url("/assets/saas-illustration-f2f67b97.svg");
  background-position: 50% 35%;
  background-size: cover;
}

.saas-intro-overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(10 16 29 / 20%);
}

/* References */
.references-section {
  margin-bottom: 80px;
}

.references-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
}

.reference-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 150px;
}

.reference-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Modules — white panel that bleeds to the right viewport edge. */
.modules-section {
  display: grid;
  grid-template-columns:
    minmax(var(--container-gutter), 1fr)
    minmax(auto, var(--container-max))
    minmax(var(--container-gutter), 1fr);
}

.modules-panel {
  grid-column: 2;
  padding: 64px 0 128px 64px;
  background-color: var(--color-surface);
}

.modules-panel-fill {
  grid-column: 3;
  background-color: var(--color-surface);
}

.modules-panel-header {
  margin-bottom: 48px;
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 96px 32px;
}

.module-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 24px;
  color: #000;
}

.module-card-info {
  display: grid;
  column-gap: var(--space-md);
  row-gap: 0;
  text-align: center;
}

.module-card-info h3 {
  margin: 0 0 10px;
}

/* Meta row: label, then a fixed 48px rule, centred as a pair. */
.module-card-info p {
  display: grid;
  grid-template-columns: auto 48px;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: -8px 0 0;
}

.module-card-meta {
  font-size: var(--font-size-pill);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.module-card-divider {
  height: 1px;
  background-color: var(--color-divider);
}

.module-card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 375px;
  overflow: hidden;
}

.module-card-skew {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform var(--transition-base);
}

.module-card-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each illustration is framed differently on the live site. */
.module-card-bg--modeplan { object-position: 28% 50%; }
.module-card-bg--sps { object-position: 60% 50%; }
.module-card-bg--trivselvurdering { object-position: 50% 30%; }
.module-card-bg--booking { object-position: 20% 50%; }

.module-card-overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(10 16 29 / 16%);
  opacity: 0.5;
}

/* Circle + arrow that eases in when the card is hovered. */
.module-card-hover-circle {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 1px solid rgb(255 253 253 / 40%);
  border-radius: 100%;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale3d(0.85, 0.85, 1) skew(10deg, 10deg);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.module-card-hover-circle img {
  width: 18px;
  opacity: 0.3;
}

.module-card:hover .module-card-hover-circle {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1) skew(0deg, 0deg);
}

.module-card:hover .module-card-skew {
  transform: scale3d(1.05, 1.05, 1);
}

/* Updates */
.updates-section {
  margin-top: var(--section-padding);
}

.updates-header {
  display: flex;
  flex-direction: column;
  padding-bottom: 30px;
}

.updates-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}

.update-item {
  display: grid;
  grid-template-rows: 72px 90px auto;
  gap: 22px;
  justify-content: flex-start;
  padding: 18px;
  background-color: var(--color-surface);
}

.update-item-logo {
  display: flex;
  align-items: center;
  width: 80%;
  height: 72px;
}

.update-item-image {
  max-height: 72px;
  object-fit: contain;
}

.update-item-title {
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.update-item-body {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

/* Stats — white card on the grey ground, bleeding right. */
.stats-section {
  display: grid;
  grid-template-columns:
    minmax(var(--container-gutter), 1fr)
    minmax(auto, var(--container-max))
    minmax(var(--container-gutter), 1fr);
  padding-top: 80px;
  padding-bottom: 120px;
}

.stats-card {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 0;
  background-color: var(--color-surface);
}

/* Bleeds into the LEFT gutter, unlike .modules-panel-fill which bleeds right.
   On the live build this element is auto-placed, so it lands in the first free
   cell (column 1) rather than beside the explicitly-placed card. */
.stats-fill {
  grid-area: 1 / 1;
  background-color: var(--color-surface);
}

.stats-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stats-header h3 {
  margin: 0 0 10px;
}

.stats-eyebrow {
  margin: 0;
  font-size: var(--font-size-subtitle);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 64px;
  padding-right: 36px;
}

.stat-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: var(--space-md);
  padding: 12px 20px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-body);
  line-height: 1.6em;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: #000;
}

/* Footer */
.app-footer {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.app-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 4px;
}

.app-footer h3 {
  margin-bottom: 22px;
  font-weight: 500;
  color: var(--color-text-on-dark);
}

.app-footer a {
  color: var(--color-text-on-dark);
}

.app-footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  padding: 64px 0 44px;
}

.app-footer-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 800px;
  font-style: normal;
  font-size: var(--font-size-subtitle);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.app-footer-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.app-footer-item--wrap {
  gap: 0;
}

.app-footer-separator {
  width: 1px;
  height: 16px;
  margin-left: 12px;
  background-color: var(--color-footer-rule);
}

.app-footer-social {
  display: flex;
  gap: var(--space-sm);
  height: 20px;
  margin-top: 20px;
}

.app-footer-social a,
.app-footer-social img {
  width: 20px;
  height: 20px;
}

.app-footer-hours {
  display: flex;
  gap: 64px;
}

.app-footer-day {
  margin: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-footer-rule);
  font-size: var(--font-size-subtitle);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

/* Times wrap into two rows of three: value, dash, value. */
.app-footer-times {
  display: grid;
  grid-template-columns: 50px 20px 50px;
  padding-top: 4px;
  padding-bottom: 18px;
}

.app-footer-time {
  font-size: var(--font-size-subtitle);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

.app-footer-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin: 24px 0;
  border-top: 1px solid var(--color-divider);
  font-size: var(--font-size-pill);
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-on-dark-dim);
}

.app-footer-bottom a {
  justify-self: end;
  color: var(--color-text-on-dark-dim);
}

/* Tabs — shared by menneskesyn, sikkerhed, kontakt-og-priser and systemet.
   Rendered by the `tabs` view helper; see app/helpers/tabs_helper.rb. */
/* minmax(0, ...) on the pane column: a plain 1fr cannot shrink below its
   content's minimum, which lets a wide pane steal the rail's width. */
.tabs {
  display: grid;
  grid-template-columns: 0.3fr minmax(0, 1fr);
  row-gap: 80px;
}

.tabs-menu {
  display: flex;
  flex-direction: column;
  height: 450px;
  padding-top: 56px;
  position: sticky;
  top: 84px;
}

.tab-link {
  padding: 9px 0;
  line-height: var(--line-height-base);
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: left;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-base);
}

.tab-link:hover {
  color: #4b748d;
  font-weight: 400;
}

.tab-link[aria-selected="true"] {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.15em;
  text-underline-offset: 6px;
}

.tabs-content {
  margin: 40px 0 60px;
  padding-left: 80px;
  border-left: 1px solid var(--color-rule);
}

.tab-pane[hidden] {
  display: none;
}

/* Grid rather than block so heading and paragraph margins do not collapse,
   which is what sets the rhythm on the live build. */
.tab-content {
  display: grid;
}

.tab-title {
  padding-top: 24px;
}

.tab-title h2 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.tab-heading {
  margin: 20px 0 10px;
  font-size: var(--font-size-subtitle);
  font-weight: 400;
  line-height: 44px;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}

.tab-body {
  margin: 0 0 10px;
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

/* Team roster (Medarbejdere tab) */
.team-section {
  position: relative;
  padding-bottom: 120px;
}

.team-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 64px;
}

.team-intro h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-text-muted);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 160px);
  gap: 32px 30px;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
}

.team-member-portrait {
  width: 150px;
  max-width: 100%;
  height: 150px;
  border-radius: var(--radius-pill);
  background-repeat: no-repeat;
}

/* No photo of their own: a flat tinted disc, as on the live site. */
.team-member-portrait--empty {
  background-image: linear-gradient(rgb(139 158 192 / 50%), rgb(139 158 192 / 50%));
  border: 1px solid #92a9ca;
}

.team-member-name {
  margin: 10px 0 0;
  font-size: var(--font-size-body);
  font-weight: 700;
  text-align: center;
  color: var(--color-text-muted);
}

.team-member-role {
  margin: 0;
  font-size: var(--font-size-subtitle);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  text-align: center;
}

/* Tabs — the /systemet variants.
   Its rail scrolls away with the page and the panes carry no vertical inset,
   unlike menneskesyn's. */
.tabs--unpinned {
  margin: 40px 0 80px;
}

/* The rule between rail and panes is painted by the rail here, not the panes:
   one pixel to the left of where menneskesyn puts it. */
.tabs--unpinned > .tabs-menu {
  position: static;
  height: auto;
  padding-top: 0;
  border-right: 1px solid var(--color-border-alt);
}

.tabs--unpinned > .tabs-content {
  margin: 0;
  border-left: 0;
}

/* Filter tabs — the horizontal pill row that narrows a list inside a pane. */
.tabs--filter {
  display: block;
}

.tabs--filter .tabs-menu {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  margin-top: 20px;
  padding-top: 0;
}

.tabs--filter .tabs-content {
  margin: 0;
  padding-left: 0;
  border-left: 0;
}

.tabs--filter .tab-link {
  padding: 9px 30px;
  letter-spacing: normal;
  font-size: var(--font-size-base);
  font-weight: 400;
}

.tabs--filter .tab-link[aria-selected="true"] {
  color: var(--color-bg);
  background-color: var(--color-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.tabs--filter .tab-link[aria-selected="true"]:hover {
  color: var(--color-bg);
}

/* A hairline under the filter row, drawn at the head of every pane. */
.tabs--filter .tab-pane::before {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--color-rule);
}

/* Systemet — Funktioner: modules above, smaller features below. */
.system-module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px 64px;
  padding-top: 80px;
}

.system-module-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-rule);
}

.system-module-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.25em;
}

/* Parked on the baseline of the heading it sits beside. */
.system-module-link {
  align-self: flex-end;
  margin-left: 12px;
  padding-bottom: 1px;
  font-size: var(--font-size-pill);
  line-height: var(--font-size-pill);
  letter-spacing: var(--heading-letter-spacing);
  color: #0d93b1;
  white-space: nowrap;
}

.system-module-body {
  margin: 8px 0 0;
  font-size: var(--font-size-body);
  font-weight: 300;
  letter-spacing: 0.03em;
  text-align: justify;
  color: var(--color-text-muted);
}

.system-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px 48px;
  margin-top: 100px;
}

/* Rows: title box, rule, body, foot. The body takes the slack so the foot
   rules of a row line up however long the copy runs. */
.system-feature {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

/* A 60px title box, plus the pixel its rule takes. */
.system-feature-head {
  display: flex;
  align-items: flex-end;
  height: 61px;
  border-bottom: 1px solid #cdd8e5;
}

.system-feature-head h3 {
  margin: 0;
  font-size: 13px;
  line-height: 13px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.system-feature-body {
  margin: 28px 0;
  padding-left: 24px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 300;
  text-align: justify;
  color: var(--color-text);
}

.system-feature-foot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 22px;
  margin-left: 24px;
  border-bottom: 1px solid var(--color-rule);
}

.system-feature-foot .text-link {
  font-size: var(--font-size-pill);
  line-height: var(--font-size-pill);
  color: #0d93b1;
}

/* Systemet — Kurser: one collapsible row per course. */
.course {
  position: relative;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--color-divider);
  transition: border-color var(--transition-base);
}

.course:hover {
  border-bottom-color: var(--color-border);
}

.course-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: stretch;
  gap: 16px 30px;
  line-height: var(--line-height-base);
  width: 100%;
  padding: 30px 0 36px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.course-toggle:hover {
  background-image: radial-gradient(circle farthest-side at 80% 0, rgb(155 186 215 / 10%), rgb(255 255 255 / 0%) 92%);
}

.course-heading {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: stretch;
  gap: 16px;
}

.course-icon {
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}

.course-titles {
  display: block;
}

.course-duration {
  display: block;
  font-size: var(--font-size-subtitle);
  font-weight: 400;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
}

.course-title {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.course-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.course-tag {
  display: inline-flex;
  padding: 4px 12px;
  line-height: var(--line-height-base);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.course-tag--cyan { border-color: #7ca0a4; }
.course-tag--green { border-color: #8aa17b; }
.course-tag--yellow { border-color: #bcab66; }
.course-tag--red { border-color: #c78986; }
.course-tag--violet { border-color: #b190ae; }
.course-tag--purple { border-color: #9f95b7; }
.course-tag--blue { border-color: #829ebc; }
.course-tag--orange { border-color: #cf9c73; }

/* A plus that turns into a minus when the block it heads is open.
   Shared by the course rows here and the archive block on /sikkerhed. */
.disclosure-marker {
  position: relative;
  align-self: center;
  width: 18px;
  height: 18px;
}

.disclosure-marker::before,
.disclosure-marker::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background-color: var(--color-text-muted);
  transition: transform var(--transition-base);
}

.disclosure-marker::after {
  transform: rotate(90deg);
}

[aria-expanded="true"] .disclosure-marker::after {
  transform: rotate(0deg);
}

.course-body[hidden] {
  display: none;
}

.course-body-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 24px;
  gap: 16px 48px;
  padding: 20px 0 80px;
}

.course-overview .text-link {
  margin-bottom: 9px;
  color: var(--color-text);
}

.course-overview-body {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

/* Sikkerhed — the Download bilag pane: one block of links per group. */
.documents {
  display: flex;
  padding: 30px;
}

/* Sized by its longest label, up to the 475px live caps it at. */
.documents-list {
  display: grid;
  gap: 32px;
  max-width: 475px;
}

.document-group {
  display: grid;
  gap: 14px;
}

/* Live sets these labels inside a 15px body block, so they sit on its
   24px line even though the type is 10px. */
.document-group > .text-link {
  line-height: 24px;
  color: var(--color-text-muted);
}

.document-links {
  display: grid;
  gap: 14px;
}

.document-links[hidden] {
  display: none;
}

.document-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-body);
  line-height: 24px;
  color: var(--color-text-muted);
  text-decoration: underline;
}

.document-icon {
  width: 28px;
}

/* Live leaves this heading looking like the others, with nothing to say it
   opens; the marker is what makes it read as a control. */
.document-archive-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  line-height: var(--line-height-base);
  text-align: left;
  cursor: pointer;
}

/* References page ? a ruled grid of logo cells. The grid paints its top and
   left rules and each cell the other two, so the short last row is left open
   on its right, as on live. */
.references-page {
  padding: 120px 0;
}

.references-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border-alt);
  border-left: 1px solid var(--color-border-alt);
}

.references-wall-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-border-alt);
  border-bottom: 1px solid var(--color-border-alt);
}

/* Width is fixed; the height comes from the record, so a square mark can sit
   in a shorter box than a wordmark. */
.references-wall-logo {
  width: 150px;
  object-fit: contain;
}

/* Knocks the opaque white plate out of the logos delivered with one. */
.references-wall-logo--multiply {
  mix-blend-mode: multiply;
}

/* Kontakt og priser — FAQ accordion, price grid and the contact form.
   The tab rail itself is the shared one; only the pane interiors are here. */

/* FAQ pane */
/* A flex column so the heading block shrinks to its own content, as live's
   does, while the list below it still stretches. */
/* 90px below: live spaces the pane by 60px, plus the 20px its inner container
   adds, plus the 10px its last row's margin escapes with. */
.faq-pane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 0 90px;
}

.faq-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 40px;
}

/* A gap rather than a margin on each row, so the list measures its rows
   and the trailing space belongs to the pane. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
}

.faq-item {
  line-height: 1.6em;
  overflow: hidden;
}

/* The whole row toggles, so the question is a button spanning the rule. */
.faq-question {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgb(41 51 92 / 15%);
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}

/* The padded cell and the label inside it are two boxes, as on live. */
.faq-question-text {
  flex: 1;
  padding: 20px 0 10px;
  text-align: left;
}

/* Block-level rather than the inline-flex .text-link defaults to: it fills the
   cell, and the row keeps the height of the text instead of a line box. */
.faq-question-label {
  display: flex;
  color: var(--color-text);
}

.faq-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.faq-answer-body {
  margin: 0;
  padding: 10px 20px 10px 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: 1.6em;
}

/* Priser pane */
.pricing-pane {
  padding: 20px 0 40px;
}

/* 25px: the heading's own 10px, plus the 15px spacer live sets under it. */
.pricing-pane h3 {
  margin-bottom: 25px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 60px;
  row-gap: 30px;
  margin-bottom: 40px;
}

/* A description list: each label sits over its amount. */
.pricing-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 36px 40px 36px 0;
}

.pricing-column dt {
  color: var(--color-text);
}

/* Each amount keeps a heading's bottom margin, so a pair sits closer together
   than consecutive pairs do — 10px inside a pair, 20px between them. */
.pricing-amount {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pricing-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  line-height: 1.6em;
  font-style: italic;
  font-weight: 300;
}

/* Kontakt pane */
.contact-pane {
  padding-top: 20px;
}

.contact-intro {
  display: grid;
  grid-template-columns: auto 1.25fr;
  column-gap: 24px;
  row-gap: 18px;
}

/* Sits at the top of the row rather than stretching down it, as live does. */
.contact-intro-text {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 8px;
}

.contact-eyebrow {
  margin: 0;
  color: #626d86;
  font-size: 11px;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

/* minmax(0, 1fr) rather than 1fr: the tracks must not take their width from
   the photos, which are far wider than the column they sit in. */
.contact-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: end;
  min-width: 300px;
}

/* Live sizes the tiles off the viewport rather than the photo. */
.contact-photo {
  position: relative;
  display: block;
  min-height: 14vh;
  overflow: hidden;
}

/* Out of flow, so the photo fills the tile instead of setting its size. */
.contact-photo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-photo-overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(10 16 29 / 16%);
}

/* The form sits on a white panel that runs the width of the pane. */
.contact-form-panel {
  padding: 120px 36px 80px 60px;
  background-color: var(--color-surface);
}

.contact-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
}

.contact-field {
  display: grid;
  row-gap: 12px;
}

/* Only the name row splits into two; every other control spans the row. */
.contact-field--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
}

.contact-field--split .contact-label {
  grid-column: 1 / -1;
}

.contact-label {
  color: #626d86;
  font-size: 11px;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

/* A fixed height, as live has: with 18px of padding the text alone would make
   the field taller than the 54px the design calls for. A full width, also as
   live has, because a textarea would otherwise size its grid column to its own
   intrinsic width and burst the form. */
.contact-input {
  width: 100%;
  min-width: 0;
  height: 54px;
  padding: 18px 24px;
  border: 1px solid rgb(136 158 168 / 20%);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-surface);
}

.contact-input--large {
  height: auto;
  min-height: 160px;
  border-color: #dfe1e6;
  resize: vertical;
}

.contact-submit {
  justify-self: start;
  min-height: 42px;
  margin-top: 16px;
  padding: 12px 20px;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-pill);
  background-color: transparent;
  box-shadow: var(--shadow-drop);
  font-family: inherit;
  font-size: var(--font-size-pill);
  line-height: 1.35em;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  transition: background-color 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-submit:hover {
  background-color: var(--color-icon-bg);
}

/* Off-screen rather than hidden: a bot reading the markup should still find
   it, while nobody using the page ever sees it. */
.contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-success {
  display: grid;
  place-content: center;
  gap: 12px;
  min-height: 400px;
  padding: 24px;
  border: 1px solid rgb(136 158 168 / 20%);
  background-color: var(--color-icon-bg);
  text-align: center;
}

.form-errors {
  margin-bottom: 24px;
  padding: 16px 24px;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}

.form-errors-title {
  margin: 0 0 8px;
  font-weight: 600;
}

.form-errors ul {
  margin: 0;
  padding-left: 20px;
}

/* Certification badge under the contact block. Sits on the dark footer, so
   the mark is given a light plate rather than being knocked out. */
.app-footer-badge {
  display: inline-flex;
  margin-top: var(--space-lg);
}

/* The seal is portrait with the DANAK mark below it, so it keeps its own
   aspect ratio; the light backing keeps its navy readable on the footer. */
.app-footer-badge img {
  width: auto;
  height: 72px;
  padding: var(--space-xs);
  background-color: var(--color-surface);
  border-radius: var(--radius-sm);
}

/* Newsletter signup — two columns on the page ground, closing the frontpage.
   Not on the live site; it follows the SaaS intro's shape rather than
   introducing a new one. */
.newsletter-section {
  padding-bottom: var(--section-padding);
}

.newsletter {
  display: grid;
  grid-template-columns: minmax(350px, 1fr) 1fr;
  align-items: start;
  gap: 36px 120px;
  padding-top: 56px;
  border-top: 1px solid var(--color-border-alt);
}

.newsletter-intro h3 {
  margin: 10px 0 28px;
}

.newsletter-body {
  max-width: 475px;
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

/* The field and its button share a row until there is no room for both. */
.newsletter-field {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.newsletter-input {
  flex: 1 1 260px;
}

.newsletter-submit {
  flex: 0 0 auto;
  margin-top: 0;
}

.newsletter-consent {
  margin: var(--space-md) 0 0;
  font-size: 13px;
  line-height: 1.45em;
  color: var(--color-text-muted);
}

.newsletter-note {
  margin: 0;
  padding: 18px 24px;
  border: 1px solid var(--color-divider);
  background-color: var(--color-surface);
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

.newsletter-note--error {
  margin-bottom: var(--space-md);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.newsletter-errors {
  margin-bottom: var(--space-md);
  color: var(--color-danger);
  font-size: 13px;
}

/* Unsubscribe page — a single form on the page ground. */
.unsubscribe {
  max-width: 620px;
}

.unsubscribe-heading {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.unsubscribe-body {
  margin: 0 0 28px;
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

.unsubscribe-note {
  margin: 0;
  padding: 18px 24px;
  border: 1px solid var(--color-divider);
  background-color: var(--color-surface);
  font-size: var(--font-size-body);
  line-height: 1.6em;
  color: var(--color-text-muted);
}

.unsubscribe-note--error {
  margin-bottom: 28px;
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.unsubscribe-errors {
  margin-bottom: var(--space-md);
  color: var(--color-danger);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   5. Responsive
   Breakpoints and values mirror the live build's max-width blocks.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .newsletter {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* The intro stacks over its photos, which are sized off the width here
     rather than the viewport height. */
  .contact-intro {
    grid-template-columns: 1fr;
  }

  .contact-photo {
    min-height: 0;
    height: 20vw;
  }

  .contact-form-panel {
    padding-bottom: 60px;
    padding-left: 36px;
  }

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

  /* Every rail stacks above its panes as a wrapping row, and both filter rows
  wrap. A 30% side rail leaves too little room for the panes on a phone, and
  live hides the filter rows outright below this width, which puts the
  feature out of reach; they wrap here instead. */
  .tabs--rail {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .tabs--rail > .tabs-menu {
    position: static;
    height: auto;
    flex-flow: row wrap;
    border-right: 0;
  }

  .tabs--rail:not(.tabs--unpinned) > .tabs-menu {
    padding-top: 40px;
  }

  .tabs--rail > .tabs-content {
    margin-top: 0;
    padding-left: 0;
    border-left: 0;
  }

  /* Wrapped into a row, the rail needs the separator live draws between its
     links: a 1px rule with 16px either side. Every link carries one 17px to
     its left, and the menu starts 16px left of the column and clips, so the
     rule in front of whichever link starts a line falls just outside it and
     is cut away however the row wraps. */
  .tabs--rail > .tabs-menu {
    margin-left: -16px;
    overflow: hidden;
  }

  .tabs--rail > .tabs-menu > .tab-link {
    position: relative;
    margin: 0 17px 0 16px;
  }

  .tabs--rail > .tabs-menu > .tab-link::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -17px;
    width: 1px;
    background-color: var(--color-border);
  }

  .system-module-grid {
    grid-template-columns: 1fr;
    row-gap: 60px;
    padding-top: 20px;
  }

  .system-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .course-body-inner {
    grid-template-columns: 1fr;
    row-gap: 36px;
    padding-top: 60px;
  }

  .app-nav-toggle {
    display: block;
    order: 1;
    padding: 15px 0 0 30px;
  }

  /* The open menu drops onto its own row under the logo and burger, and runs
     edge to edge: out past the container gutters on both sides, and down to
     the header's bottom border. */
  .app-header-inner {
    flex-wrap: wrap;
  }

  .app-nav {
    display: none;
    order: 3;
    flex-basis: calc(100% + 2 * var(--container-gutter));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 14px calc(-1 * var(--container-gutter)) -14px;
    padding: 0 var(--container-gutter);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .app-nav.is-open {
    display: flex;
  }

  .app-nav a {
    padding: 15px 0;
  }

  .app-nav a:not(:first-of-type) {
    border-top: 1px solid var(--color-border);
  }

  .app-nav-separator {
    display: none;
  }

  .hero {
    min-height: 600px;
  }

  .hero-image {
    background-position: 0 0, 80%;
  }

  .hero-heading {
    font-size: 20px;
    line-height: 28px;
  }

  /* Cards detach into a two-up grid on the section background. */
  .feature-cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    background-color: transparent;
  }

  .feature-card {
    background-color: var(--color-surface);
  }

  .feature-card-body {
    padding-top: 48px;
    border-right: none;
  }

  .saas-intro {
    grid-template-columns: 1fr;
    row-gap: 60px;
  }

  .saas-intro-divider {
    display: none;
  }

  .references-grid {
    flex-wrap: wrap;
  }

  .reference-logo {
    width: 170px;
  }

  .modules-panel {
    padding: 56px 0 96px 40px;
  }

  .modules-grid,
  .updates-list {
    grid-template-columns: 1fr 1fr;
  }

  .stats-grid {
    gap: 30px;
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .contact-photo {
    height: 30vw;
  }

  .references-wall {
    grid-template-columns: repeat(2, 1fr);
  }

  .system-feature-grid {
    row-gap: 80px;
  }

  .course-toggle {
    grid-template-columns: 1fr auto;
  }

  .course-body-inner {
    row-gap: 24px;
    padding-top: 36px;
  }

  .hero {
    min-height: 500px;
    padding: 70px 0;
  }

  .hero-image {
    background-position: 0 0, 65%;
  }

  .hero-panel {
    margin-bottom: 40px;
  }

  .hero-heading {
    width: 320px;
    font-size: 18px;
    line-height: 26px;
  }

  .feature-cards,
  .modules-grid {
    grid-template-columns: 1fr;
  }

  .modules-panel {
    padding-left: 30px;
  }

  .app-footer-columns {
    display: block;
  }

  .app-footer-hours {
    margin-top: var(--space-xl);
  }
}

@media (max-width: 479px) {
  .contact-field--split {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-photos {
    grid-template-columns: 240px;
    min-width: 250px;
  }

  .contact-form-panel {
    padding-left: 10px;
    padding-right: 10px;
  }

  .references-wall {
    grid-template-columns: 1fr;
  }

  .system-module-grid {
    row-gap: 30px;
    padding-top: 20px;
  }

  .system-feature-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .system-feature-body,
  .system-feature-foot {
    margin-left: 0;
    padding-left: 0;
  }

  .hero {
    min-height: 340px;
    padding: 55px 0;
  }

  .hero-image {
    background-position: 0 0, 70%;
  }

  .hero-heading {
    display: none;
  }

  .saas-intro {
    row-gap: 48px;
  }

  .reference-logo {
    width: 150px;
  }

  .updates-list {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    flex-direction: column;
    align-items: flex-start;
  }

  .app-footer-hours {
    flex-direction: column;
    gap: var(--space-md);
    width: 180px;
  }
}

/* --------------------------------------------------------------------------
   6. Desktop overrides
   The live build widens padding and imagery above these breakpoints.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .course-toggle {
    column-gap: 48px;
  }

  .feature-card-title-row {
    padding: 0 48px;
  }

  .feature-card-body {
    padding: 60px 48px 48px;
  }

  .module-card-image {
    min-height: 425px;
  }
}

@media (min-width: 1440px) {
  .course-toggle,
  .course-body-inner {
    column-gap: 60px;
  }

  .app-header {
    border: 1px solid #cdd8e5;
  }

  .module-card-image {
    min-height: 450px;
  }

  .update-item {
    padding: 48px;
  }

  .app-footer-columns {
    gap: 79px;
  }
}