:root {
  /* Desktop alignment heights */
  --h-intro:    52px;
  --h-price:    66px;
  --h-features: 190px;
  --h-gaps:     120px;
  --h-details:  44px;
}
@media (max-width: 1000px) {
  :root{
    --h-intro: 0px; --h-price: 0px; --h-features: 0px; --h-gaps: 0px; --h-details: 0px;
  }
}

body { margin: 0; font-family: Arial, sans-serif; background: #fff; color: #222; }

/* Header bar */
.site-header {
  /*background: #111111; /* Dark charcoal */*/
  height: 144px;
  display: flex;
  align-items: center;
  width: 100%;
}
.header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-logo img, .site-logo-compact img {
  display: block;
  height: 144px;
  width: auto;
}
@media (max-width: 768px) { .site-logo { display: none; } .site-logo-compact { display: block; } }
@media (min-width: 769px) { .site-logo { display: block; } .site-logo-compact { display: none; } }

/* Page title */
.page-title { background:#000; color:#fff; text-align:center; padding: 0.5rem 0; }
.page-title h1 { margin: 0; font-size: 1.25rem; letter-spacing: .5px; }

/* Columns/Layout */
.columns { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1em; padding: 1em; }

.column {
  flex: 1; min-width: 300px; max-width: 380px;
  background: #f3f3f3; border-radius: 8px; border: 2px solid #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(15px);
  animation: fadeIn 0.8s ease forwards;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  cursor: pointer;
}
/* Animation delays by class to be robust with dynamic insertion */
.column.delay-1 { animation-delay: .1s; }
.column.delay-2 { animation-delay: .3s; }
.column.delay-3 { animation-delay: .5s; }

/* Featured Ziprent */
.column.featured {
  background: #eaf3ff; border-color: #c9ddff;
  box-shadow: 0 3px 8px rgba(0,90,255,0.15);
  max-width: 440px;
}
.column.featured h2 { position: relative; padding-bottom: 6px; }
.column.featured h2::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#0066ff; }
.column.featured::before {
  content:"FEATURED"; position:absolute; top:34px; right:-32px;
  background:#0066ff; color:#fff; padding:4px 48px; transform:rotate(45deg);
  font-size:.7em; font-weight:bold; border-radius:2px; box-shadow:0 2px 4px rgba(0,0,0,.18); pointer-events:none;
}

/* Hover */
.column:hover { transform: translateY(-6px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); background: #f8f8f8; }
.column.featured:hover { background: #e3edff; }

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

.logo-wrapper { text-align: center; padding-top: 1em; }
.logo-wrapper img { max-width: 90%; max-height: 120px; height: auto; width: auto; }

/* Align contents within the card */
.column-content {
  padding: 1em;
  flex-grow: 1;
  overflow-y: auto;
  display: grid;
  grid-template-rows:
    minmax(var(--h-intro), auto)
    minmax(var(--h-price), auto)
    minmax(var(--h-features), auto)
    minmax(var(--h-gaps), auto)
    minmax(var(--h-details), auto);
  row-gap: 12px;
}

/* Sections */
.intro { align-self: start; }
.pricing-line {
  padding: 10px 12px; background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; font-size: .95em;
}
.pricing-line strong { font-weight: 700; }

.card-features { width: 100%; border-collapse: collapse; margin: 0; font-size: .95em; }
.card-features td { padding: 6px 0; vertical-align: middle; }
.label { color: #444; }
.check::before { content: "✓"; color: #0a7a2e; font-weight: bold; }
.dash::before  { content: "—"; color: #888; }

.gaps {
  padding: 10px 12px; background: #fff;
  border: 1px dashed rgba(0,0,0,0.15); border-radius: 6px;
  font-size: .92em; color: #444;
}
.gaps-title { font-weight: 700; margin-bottom: 6px; font-size: .94em; }
.gaps ul { margin: 0; padding-left: 20px; }
.gaps li { margin: 6px 0; }
.gaps li::marker { content: "✕ "; color: #b00020; }

.more-details {
  display: flex; justify-content: center; gap: 14px;
  padding: 10px; background: rgba(0,0,0,0.04);
  border-top: 1px solid rgba(0,0,0,0.08); font-size: .92em; align-self: end;
}
.more-details a { color: #222; text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,.35); }
.more-details a:hover { text-decoration: underline; }

.sticky-link {
  position: sticky; bottom: 0; background: #222; color: #fff; text-align: center;
  padding: .8em 0; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; font-weight: bold;
}
.sticky-link a { color: #fff; text-decoration: none; }

footer {
  padding: 1em; font-size: .9em; display:flex; gap:.75rem; justify-content:center; align-items:center; flex-wrap:wrap;
}

/* Footer disclaimer tooltip */
.disclaimer { position: relative; display: inline-flex; align-items: center; gap: .4em; cursor: help; font-size: .95em; color: #eaeaea; }
.disclaimer .badge {
  display:inline-flex; align-items:center; justify-content:center;
  width: 18px; height:18px; border-radius: 50%; background:#666; color:#fff; font-weight:700;
  font-size: 12px; line-height: 1; user-select:none;
}
.disclaimer .tip {
  visibility: hidden; opacity: 0; transition: opacity .2s ease;
  position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.9); color: #fff; padding: 10px 12px; border-radius: 6px;
  width: min(92vw, 520px); text-align: left; font-size: .9em; line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 50;
}
.disclaimer .tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border-width: 8px; border-style: solid; border-color: rgba(0,0,0,0.9) transparent transparent transparent;
}
.disclaimer:hover .tip, .disclaimer:focus-within .tip { visibility: visible; opacity: 1; }

/* Desktop: center Ziprent using CSS order only here */
@media (min-width: 1001px) {
  .columns { align-items: stretch; }
  .column.ziprent     { order: 2; } /* middle */
  .column.turbotenant { order: 1; } /* left */
  .column.evernest    { order: 3; } /* right */
}