/* ============================================================================
   Marketing pages -- shared styles
   Auto-loaded by Propshaft. Do NOT @import in application.css.
   ============================================================================ */

/* ============================================================================
   Section wrappers
   ============================================================================ */

.mk-section {
  padding: 5rem var(--arp-space-4); /* token-ok -- 5rem desktop breathing room; no spacing token at this scale */
}

@media (max-width: 768px) {
  .mk-section {
    padding-top: var(--arp-space-12);
    padding-bottom: var(--arp-space-12);
  }
}

.mk-section-alt {
  background: var(--arp-surface-muted);
}

.mk-section-title {
  text-align: center;
  margin-bottom: var(--arp-space-8);
}

.mk-section-title .title {
  margin-bottom: var(--arp-space-4);
}

/* Compound selector: both classes on the SAME element (h2.title.mk-section-title).
   Sets uniform display size for all marketing section headings in one place. */
.mk-section-title.title {
  font-size: var(--bulma-size-3);
  font-weight: 700;
}

/* ============================================================================
   Hero Carousel (homepage -- full-bleed, is-medium height)
   ============================================================================ */

.mk-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Grid stack: all slides share one cell so they overlap for the cross-fade
   while still driving the track height from content (no fixed vh needed). */
.mk-carousel-track {
  display: grid;
}

.mk-carousel-slide {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  background: var(--arp-blue-900);
}

.mk-carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Sharp hero photo. Shared by the carousel and the page heroes via the
   marketing/hero_image partial. Up to tablet/desktop it fills the hero edge to
   edge (cover); only on wide viewports does it switch to its full natural
   height (contain) with the blurred backdrop filling the sides. */
.mk-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Wide viewports: shrink the element to wrap the photo at its full natural
   height (top and bottom meet the hero edges), so its side edges can feather
   into the blurred backdrop instead of meeting it at a hard line. */
@media (min-width: 1440px) {
  .mk-hero-photo {
    right: auto;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    -webkit-mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
}

/* Blurred, darkened full-bleed copy of the same photo. Fills the side gutters
   on wide screens so the hero reads as one continuous image with no flat color
   bars, and always harmonizes since the fill is the photo itself. */
.mk-hero-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(28px) brightness(0.65);
  z-index: 0;
}

/* Side vignette: darkens the blurred backdrop edges on wide viewports,
   softening the boundary between the sharp photo and the gutter fill */
@media (min-width: 1440px) {
  .mk-carousel-slide::after,
  .mk-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.58) 0%,
      transparent 20%,
      transparent 80%,
      rgba(0, 0, 0, 0.58) 100%
    ); /* token-ok */
    z-index: 1;
    pointer-events: none;
  }
}

/* Dark-to-darker gradient so white text is always legible on any photo */
.mk-carousel-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.62) 100%
  ); /* token-ok */
  z-index: 1;
}

.mk-carousel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff; /* token-ok */
  padding: var(--arp-space-12) var(--arp-space-6);
  max-width: 1216px;
  width: 100%;
}

@media (min-width: 769px) {
  .mk-carousel-content {
    padding-top: 9rem; /* token-ok -- matches Bulma --bulma-hero-body-padding-medium */
    padding-bottom: 9rem; /* token-ok -- matches Bulma --bulma-hero-body-padding-medium */
  }
}

.mk-carousel-content .title {
  font-size: 60px; /* token-ok -- matches .mk-page-hero .title */
  color: #ffffff; /* token-ok */
  margin-bottom: var(--arp-space-4);
  line-height: 1.4;
}

.mk-carousel-content .subtitle {
  font-size: var(--bulma-size-3);
  color: #ffffff; /* token-ok */
  font-weight: 600;
  margin-bottom: var(--arp-space-6);
}

.mk-carousel-content .title span,
.mk-carousel-content .subtitle span {
  background: rgba(0, 0, 0, 0.38); /* token-ok */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  padding: 0 0.65em 0.1em; /* token-ok -- bottom-only vertical padding covers descenders without overlapping the next strip's top */
  border-radius: 3px; /* token-ok */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-theme="dark"] .public-page .mk-carousel-content .subtitle {
  color: #ffffff; /* token-ok */
}

@media (max-width: 768px) {
  .mk-carousel-content {
    transform: translateY(-7%);
  }

  .mk-carousel-content .title {
    font-size: 44px; /* token-ok -- matches .mk-page-hero .title mobile */
    line-height: 1.25;
  }

  .mk-carousel-content .subtitle,
  .mk-page-hero .subtitle {
    font-size: var(--bulma-size-4);
  }
}

/* Arrow controls */
.mk-carousel-prev,
.mk-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.38); /* token-ok */
  color: #ffffff; /* token-ok */
  border: none;
  border-radius: var(--arp-radius-full);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.mk-carousel-prev { left: var(--arp-space-4); }
.mk-carousel-next { right: var(--arp-space-4); }

.mk-carousel-prev:hover,
.mk-carousel-next:hover {
  background: rgba(0, 0, 0, 0.62); /* token-ok */
}

/* Dot navigation */
.mk-carousel-dots {
  position: absolute;
  bottom: var(--arp-space-5);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: var(--arp-space-2);
}

.mk-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--arp-radius-full);
  background: rgba(255, 255, 255, 0.5); /* token-ok */
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}

.mk-carousel-dot.is-active,
.mk-carousel-dot:hover {
  background: #ffffff; /* token-ok */
  transform: scale(1.25);
}

/* Controls wrapper: display:contents on desktop so all three children keep
   their existing absolute positioning against .mk-carousel unchanged. */
.mk-carousel-controls {
  display: contents;
}

@media (max-width: 768px) {
  .mk-carousel-controls {
    position: absolute;
    bottom: var(--arp-space-5);
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--arp-space-4);
  }

  .mk-carousel-controls .mk-carousel-prev,
  .mk-carousel-controls .mk-carousel-next {
    position: static;
    top: auto;
    transform: none;
  }

  .mk-carousel-controls .mk-carousel-dots {
    position: static;
    bottom: auto;
  }
}

/* ============================================================================
   Page Hero (service landing pages -- 40-50vh)
   ============================================================================ */

.mk-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--arp-blue-900);
}

.mk-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.6) 100%
  ); /* token-ok */
  z-index: 1;
}

.mk-page-hero .hero-body {
  position: relative;
  z-index: 2;
}

.mk-page-hero .title {
  color: var(--arp-blue-400);
  margin-bottom: var(--arp-space-4);
  font-size: 60px;
}

@media (max-width: 768px) {
  .mk-page-hero .title {
    font-size: 44px;
  }
}

.mk-page-hero .subtitle {
  color: rgba(255, 255, 255, 0.95); /* token-ok */
}

.mk-page-hero .title span,
.mk-page-hero .subtitle span {
  background: rgba(0, 0, 0, 0.38); /* token-ok */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  padding: 0 0.65em 0.1em; /* token-ok -- bottom-only vertical padding covers descenders without overlapping the next strip's top */
  border-radius: 3px; /* token-ok */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


[data-theme="dark"] .public-page .mk-page-hero .subtitle {
  color: rgba(255, 255, 255, 0.95); /* token-ok */
}

[data-theme="dark"] .public-page .mk-page-hero .title {
  color: var(--arp-blue-400);
}

.mk-hero-caption {
  font-size: var(--bulma-size-7);
  text-align: center;
  color: #ffff00; /* token-ok -- decorative yellow, no semantic token equivalent */
  margin-top: var(--arp-space-3);
}

.mk-hero-caption span {
  background: rgba(0, 0, 0, 0.38); /* token-ok */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  padding: 0 0.25em; /* token-ok */
  border-radius: 3px; /* token-ok */
  box-decoration-break: clone;
}

.mk-hero-caption strong {
  color: inherit;
}

.mk-carousel-content .button.is-primary.is-medium {
  margin-top: var(--arp-space-5);
}

/*
@media (max-width: 768px) {
  .mk-hero-caption {
    display: none;
  }
}
*/

/* ============================================================================
   About section (homepage two-column layout)
   ============================================================================ */

.mk-about {
  max-width: 960px;
  margin: 0 auto;
}

.mk-about-lead {
  font-size: var(--bulma-size-5);
  color: var(--arp-text-primary);
  margin-bottom: var(--arp-space-8);
  line-height: 1.7;
  max-width: none;
}

.mk-about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--arp-space-6);
}

@media (max-width: 768px) {
  .mk-about-pillars {
    grid-template-columns: 1fr;
  }
}

.mk-about-pillar {
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-6);
  box-shadow: var(--arp-shadow-sm);
}

.mk-about-pillar h3 {
  font-weight: 700;
  color: var(--arp-accent);
  margin-bottom: var(--arp-space-3);
}

.mk-about-pillar p {
  color: var(--arp-text-secondary);
  line-height: 1.65;
}

/* ============================================================================
   Pricing card grid
   ============================================================================ */

.mk-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  gap: var(--arp-space-5);
  justify-content: center;
}

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

.mk-pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-6);
  box-shadow: var(--arp-shadow-sm);
}

.mk-pricing-card--featured {
  position: relative;
  border-color: var(--arp-accent);
  border-width: 2px;
  box-shadow: var(--arp-shadow-md);
}

.mk-pricing-card-badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--arp-accent);
  color: #ffffff; /* token-ok */
  font-size: var(--bulma-size-7);
  font-weight: 700;
  padding: 0.25rem 0.75rem; /* token-ok -- badge pill inset; not on rem spacing scale */
  border-radius: var(--arp-radius-full);
  white-space: nowrap;
  letter-spacing: 0.05em; /* token-ok -- typographic tracking */
  text-transform: uppercase;
}

.mk-pricing-card-name {
  font-size: var(--bulma-size-5);
  font-weight: 700;
  color: var(--arp-text-primary);
  margin-bottom: var(--arp-space-3);
}

.mk-pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--arp-space-1);
  margin-bottom: var(--arp-space-4);
  line-height: 1;
}

.mk-pricing-card-amount {
  font-size: var(--bulma-size-2);
  font-weight: 800;
  color: var(--arp-accent);
}

.mk-pricing-card-period {
  font-size: var(--bulma-size-6);
  font-weight: 400;
  color: var(--arp-text-muted);
}

.mk-pricing-card-specs {
  list-style: none;
  margin: 0 0 var(--arp-space-5) 0;
  padding: 0;
  flex: 1;
  font-size: var(--bulma-size-6);
  color: var(--arp-text-secondary);
}

.mk-pricing-card-specs li {
  display: flex;
  align-items: center;
  gap: var(--arp-space-2);
  padding: var(--arp-space-1-5) 0;
  border-bottom: 1px solid var(--arp-border-subtle);
}

.mk-pricing-card-specs li:last-child {
  border-bottom: none;
}

.mk-pricing-card-specs .icon {
  color: var(--arp-status-success-fg);
  font-size: var(--bulma-size-7);
  flex-shrink: 0;
}

.mk-pricing-card-cta {
  margin-top: auto;
}

.mk-pricing-note {
  text-align: center;
  color: var(--arp-text-muted);
  margin-top: var(--arp-space-5);
  font-size: var(--bulma-size-6);
}

/* ============================================================================
   Addon / Power Ups grid
   ============================================================================ */

.mk-addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
  gap: var(--arp-space-4);
  justify-content: center;
}

.mk-addon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arp-space-3);
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-4) var(--arp-space-5);
  box-shadow: var(--arp-shadow-sm);
}

.mk-addon-name {
  font-weight: 500;
  color: var(--arp-text-primary);
}

.mk-addon-price {
  font-weight: 700;
  color: var(--arp-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================================
   Feature grid (icon + heading + description)
   ============================================================================ */

.mk-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--arp-space-6);
}

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

@media (max-width: 600px) {
  .mk-feature-grid {
    grid-template-columns: 1fr;
  }
}

.mk-feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-3);
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-6);
  box-shadow: var(--arp-shadow-sm);
}

/* Accent square shared by the icon-only container and the medal <i> inside
   the FreeBSD/OpenBSD logos container. */
.mk-feature-icon,
.mk-feature-icon:has(img) i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--arp-radius-md);
  background: var(--arp-accent-bg);
}

.mk-feature-icon {
  font-size: var(--bulma-size-4);
  color: var(--arp-accent);
  line-height: 1;
}

/* Cards that show real logos (FreeBSD/OpenBSD) drop the fixed accent square
   from the container and let the logos sit at full size with breathing room. */
.mk-feature-icon:has(img) {
  width: auto;
  background: none;
  gap: var(--arp-space-4);
  justify-content: flex-start;
}

.mk-feature-icon img {
  height: 3rem;
  width: auto;
}

/* The FreeBSD logo's artwork has less internal whitespace than the other
   logos, so at the same height it reads visually larger. Trim it slightly. */
.mk-feature-icon img[alt="FreeBSD"] {
  height: 2.6rem;
}

.mk-feature-title {
  font-weight: 700;
  color: var(--arp-text-primary);
  font-size: var(--bulma-size-6);
}

.mk-feature-desc {
  color: var(--arp-text-secondary);
  font-size: var(--bulma-size-6);
  line-height: 1.6;
}

[data-theme="dark"] .mk-feature-icon img[alt="OpenBSD"] {
  filter: invert(1);
}

@media (max-width: 768px) {
  .mk-feature-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .mk-feature-icon {
    flex-shrink: 0;
  }

  .mk-feature-title {
    flex: 1;
    align-self: center;
    font-size: var(--bulma-size-5);
  }

  .mk-feature-desc {
    flex-basis: 100%;
  }

  .mk-feature-card:has(.mk-feature-icon img) {
    flex-direction: column;
  }

  .mk-feature-card:has(.mk-feature-icon img) .mk-feature-title {
    flex: none;
    align-self: flex-start;
  }

  .mk-feature-card:has(.mk-feature-icon img) .mk-feature-desc {
    flex-basis: auto;
  }
}

/* ============================================================================
   Testimonials (circular avatar + decorative quote mark)
   ============================================================================ */

.mk-testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--arp-space-6);
}

@media (max-width: 768px) {
  .mk-testimonials {
    grid-template-columns: 1fr;
  }
}

.mk-testimonial-card {
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-6);
  box-shadow: var(--arp-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-4);
}

.mk-testimonial-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--arp-radius-full);
  object-fit: cover;
  border: 3px solid var(--arp-border-strong);
}

.mk-testimonial-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: var(--arp-radius-full);
  background: var(--arp-surface-sunken);
  border: 3px solid var(--arp-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arp-text-muted);
  font-size: var(--bulma-size-4);
}

.mk-testimonial-quote {
  position: relative;
  flex: 1;
}

/* Decorative opening quotation mark */
.mk-testimonial-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.3em;
  left: -0.15em;
  font-size: 4.5em; /* token-ok -- decorative, not an on-scale value */
  line-height: 1;
  color: var(--arp-accent);
  opacity: 0.2;
  pointer-events: none;
  font-family: Georgia, "Times New Roman", serif;
}

.mk-testimonial-quote p {
  padding-left: var(--arp-space-4);
  color: var(--arp-text-secondary);
  line-height: 1.65;
}

.mk-testimonial-author {
  font-weight: 700;
  color: var(--arp-text-primary);
}

.mk-testimonial-company {
  color: var(--arp-text-muted);
  font-size: var(--bulma-size-6);
}

/* ============================================================================
   Photo gallery (responsive grid + hover)
   ============================================================================ */

.mk-gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--arp-space-3);
}

@media (max-width: 1023px) {
  .mk-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

@media (max-width: 480px) {
  .mk-gallery {
    grid-template-columns: 1fr;
  }
}

.mk-gallery-item {
  display: block;
  overflow: hidden;
  border-radius: var(--arp-radius-md);
  box-shadow: var(--arp-shadow-sm);
  aspect-ratio: 4 / 3;
}

.mk-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.mk-gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.mk-gallery-caption {
  text-align: center;
  color: var(--arp-text-muted);
  font-size: var(--bulma-size-6);
  margin-top: var(--arp-space-4);
}

.mk-gallery-footer {
  text-align: center;
  margin-top: var(--arp-space-5);
}

/* ============================================================================
   OS logo strip
   ============================================================================ */

.mk-os-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--arp-space-8);
  padding: var(--arp-space-6) 0;
}

.mk-os-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--arp-space-2);
  text-decoration: none;
}

.mk-os-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.mk-os-logo-name {
  font-size: var(--bulma-size-6);
  color: var(--arp-text-muted);
}

.mk-os-footnote {
  text-align: center;
  color: var(--arp-text-muted);
  font-size: var(--bulma-size-6);
  margin-top: var(--arp-space-4);
}

[data-theme="dark"] .mk-os-logo img[alt="OpenBSD"] {
  filter: invert(1);
}

[data-theme="dark"] .mk-os-logo img[alt="Slackware"] {
  filter: invert(1);
}

/* ============================================================================
   OS logo collage background
   Decorative layer behind the OS strip section content. Mirrors the technique
   used in marketing_transition.css for the hero-to-content transition.
   ============================================================================ */

/* The section that hosts the collage. Always present via mk-os-strip-section,
   independent of the section_class local assign. */
.mk-os-strip-section {
  position: relative;
}

/* Lift the real content above the decorative collage layer. */
.mk-os-strip-section > .container {
  position: relative;
  z-index: 1;
}

/* Decorative collage layer: spans the full section behind the content. */
.mk-os-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Each logo in the collage: large, fully desaturated, low opacity. */
.mk-os-collage-logo {
  position: absolute;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.05;
}

/* Collage placement -- logos span the full height of the section (top and
   bottom edges) at varied sizes for a natural, layered composition.
   Sizes are token-ok: decorative fixed dimensions with no spacing-token
   equivalent. */
.mk-os-collage-logo:nth-child(1) { /* freebsd -- top-left, xlarge */
  width: 280px; height: 280px; /* token-ok */
  top: -20px; left: -10px; /* token-ok */
  transform: rotate(-15deg);
}
.mk-os-collage-logo:nth-child(2) { /* ubuntu -- bottom-left, medium */
  width: 155px; height: 155px; /* token-ok */
  bottom: -15px; left: 8%; /* token-ok */
  transform: rotate(10deg);
}
.mk-os-collage-logo:nth-child(3) { /* debian -- top, large */
  width: 210px; height: 210px; /* token-ok */
  top: -25px; left: 22%; /* token-ok */
  transform: rotate(8deg);
}
.mk-os-collage-logo:nth-child(4) { /* archlinux -- bottom-center, medium */
  width: 160px; height: 160px; /* token-ok */
  bottom: -10px; left: 44%; /* token-ok */
  transform: rotate(-5deg);
}
.mk-os-collage-logo:nth-child(5) { /* almalinux -- top-right, xlarge */
  width: 260px; height: 260px; /* token-ok */
  top: -20px; right: 26%; /* token-ok */
  transform: rotate(12deg);
}
.mk-os-collage-logo:nth-child(6) { /* openbsd -- bottom-right, xlarge */
  width: 280px; height: 280px; /* token-ok */
  bottom: -15px; right: 8%; /* token-ok */
  transform: rotate(-10deg);
}
.mk-os-collage-logo:nth-child(7) { /* rocky -- top-far-right, large */
  width: 190px; height: 190px; /* token-ok */
  top: -15px; right: -20px; /* token-ok */
  transform: rotate(5deg);
}

/* === Mobile collage adjustments ========================================== */
/* On narrow viewports the large top logos pile into the top-left corner.
   Fix by: hiding almalinux, moving debian to the lower-middle, and pulling
   openbsd up to the vertical center so all three zones are covered. */
@media (max-width: 768px) {
  .mk-os-collage-logo:nth-child(3) { /* debian -- lower-middle on mobile */
    top: auto;
    bottom: 20%;
    opacity: 0.03;
  }
  .mk-os-collage-logo:nth-child(4) { /* archlinux -- bottom-center on mobile */
    bottom: 10px; left: 44%; /* token-ok */
  }
  .mk-os-collage-logo:nth-child(5) { /* almalinux -- hidden on mobile */
    display: none;
  }
  .mk-os-collage-logo:nth-child(6) { /* openbsd -- vertical center on mobile */
    bottom: auto;
    top: 42%;
    transform: translateY(-50%) rotate(-10deg);
    opacity: 0.06;
  }
}

/* === Dark mode ============================================================ */
/* Mirrors [data-theme="dark"] .public-page selector in marketing_transition.css.
   Invert the grayscale logos so they read as light marks against the dark
   background. */
[data-theme="dark"] .public-page .mk-os-collage-logo {
  filter: grayscale(1) invert(1);
}

/* ============================================================================
   Crowd Reviews block
   ============================================================================ */

.mk-crowd-reviews {
  text-align: center;
  padding: var(--arp-space-8) var(--arp-space-4);
}

.mk-crowd-reviews-rating {
  font-size: var(--bulma-size-4);
  font-weight: 700;
  color: var(--arp-text-primary);
  margin-bottom: var(--arp-space-4);
}

.mk-crowd-reviews-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--arp-space-4);
  flex-wrap: wrap;
}

/* ============================================================================
   Bandwidth pricing table wrapper
   ============================================================================ */

.mk-bandwidth-pricing {
  max-width: 600px;
  margin: 0 auto var(--arp-space-8);
}

.mk-bandwidth-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--arp-space-4);
  margin-bottom: var(--arp-space-8);
}

@media (max-width: 600px) {
  .mk-bandwidth-features {
    grid-template-columns: 1fr;
  }
}

.mk-bandwidth-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--arp-space-3);
  color: var(--arp-text-secondary);
  font-size: var(--bulma-size-6);
}

.mk-bandwidth-feature .icon {
  color: var(--arp-status-success-fg);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================================================
   Bandwidth tier-card grid
   ============================================================================ */

.mk-bandwidth-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--arp-space-5);
}

@media (max-width: 900px) {
  .mk-bandwidth-tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mk-bandwidth-tier-grid {
    grid-template-columns: 1fr;
  }
}

.mk-bandwidth-tier-card {
  display: flex;
  flex-direction: column;
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-6);
  box-shadow: var(--arp-shadow-sm);
}

.mk-bandwidth-tier-card-range {
  font-size: var(--bulma-size-5);
  font-weight: 700;
  color: var(--arp-text-primary);
  margin-bottom: var(--arp-space-4);
}

.mk-bandwidth-tier-card-price {
  display: flex;
  align-items: baseline;
  gap: var(--arp-space-1);
  margin-bottom: var(--arp-space-5);
  line-height: 1;
}

.mk-bandwidth-tier-card-amount {
  font-size: var(--bulma-size-2);
  font-weight: 800;
  color: var(--arp-accent);
}

.mk-bandwidth-tier-card-period {
  font-size: var(--bulma-size-6);
  font-weight: 400;
  color: var(--arp-text-muted);
}

.mk-bandwidth-tier-card-cta {
  margin-top: auto;
}

/* Contact / CTA tier -- muted background, no prominent price display */
.mk-bandwidth-tier-card--cta {
  border-color: var(--arp-border-strong);
  background: var(--arp-surface-muted);
}

.mk-bandwidth-tier-card--cta .mk-bandwidth-tier-card-range {
  color: var(--arp-text-secondary);
}

.mk-bandwidth-tier-card-contact-label {
  font-size: var(--bulma-size-6);
  color: var(--arp-text-muted);
  margin-bottom: var(--arp-space-5);
  flex: 1;
}

/* ============================================================================
   Carrier list (polished bordered items with icon)
   ============================================================================ */

.mk-carrier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-2);
}

.mk-carrier-item {
  display: flex;
  align-items: center;
  gap: var(--arp-space-2);
  padding: var(--arp-space-2) var(--arp-space-3);
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-sm);
  font-size: var(--bulma-size-6);
  font-weight: 500;
  color: var(--arp-text-primary);
}

.mk-carrier-item .icon {
  color: var(--arp-accent);
  flex-shrink: 0;
}

/* ============================================================================
   CTA / contact block
   ============================================================================ */

.mk-cta-block {
  text-align: center;
  padding: var(--arp-space-12) var(--arp-space-4);
}

/* ============================================================================
   Why Us 4-up grid (homepage)
   ============================================================================ */

.mk-why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--arp-space-6);
}

@media (max-width: 1023px) {
  .mk-why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .mk-why-us-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Dashboard screenshot composite (homepage)
   ============================================================================ */

.mk-dashboard-composite {
  position: relative;
  max-width: 860px;
  margin: var(--arp-space-12) auto 0;
}

.mk-dashboard-desktop {
  display: block;
  width: 100%;
  border-radius: var(--arp-radius-md);
  box-shadow: var(--arp-shadow-lg);
}

.mk-phone-frame-wrap {
  position: absolute;
  right: -4%;
  top: -8%;
  width: 25%;
}

@media (max-width: 768px) {
  .mk-phone-frame-wrap {
    display: none;
  }
}

.mk-phone-frame {
  position: relative;
  border: 7px solid var(--arp-border-strong);
  border-radius: 40px; /* token-ok -- phone-frame decorative corner radius */
  overflow: hidden;
  box-shadow: var(--arp-shadow-xl);
  background: var(--arp-surface-raised);
  aspect-ratio: 9 / 20; /* token-ok -- modern phone portrait proportions */
}

.mk-phone-frame::before {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 6px;
  background: var(--arp-border-strong);
  border-radius: var(--arp-radius-full);
  z-index: 2;
}

.mk-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  padding-top: 28px; /* token-ok -- notch clearance; not on rem spacing scale */
}

/* ============================================================================
   Gallery section (de-emphasized)
   ============================================================================ */

.mk-section-gallery {
  padding: var(--arp-space-8) var(--arp-space-4);
}

.mk-gallery-heading {
  color: var(--arp-text-muted);
}

/* ============================================================================
   Network locations list
   ============================================================================ */

.mk-locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--arp-space-4);
  margin-bottom: var(--arp-space-8);
}

.mk-location-card {
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-card);
  padding: var(--arp-space-4) var(--arp-space-5);
  box-shadow: var(--arp-shadow-sm);
}

.mk-location-card h4 {
  font-weight: 600;
  color: var(--arp-text-primary);
  margin-bottom: var(--arp-space-2);
}

.mk-location-card p {
  color: var(--arp-text-secondary);
  font-size: var(--bulma-size-6);
  line-height: 1.5;
}