/* ==========================================================================
   Knowit Apartments — marketing site stylesheet
   Palette matches the super-admin app: dark slate + sky/indigo gradient.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg-deep:      #0b1220;   /* slate-950 — deepest sections (footer, hero overlay) */
  --bg-canvas:    #0f172a;   /* slate-900 — main dark canvas */
  --bg-elev:      #1e293b;   /* slate-800 — cards on dark */
  --bg-light:     #f8fafc;   /* slate-50 — light section */
  --bg-white:     #ffffff;
  --bg-light-elev:#ffffff;
  --border-dark:  #1e293b;
  --border-light: #e2e8f0;   /* slate-200 */

  /* Text */
  --text-on-dark:        #f1f5f9;  /* slate-100 */
  --text-on-dark-muted:  #94a3b8;  /* slate-400 */
  --text-on-light:       #1e293b;  /* slate-800 */
  --text-on-light-muted: #64748b;  /* slate-500 */

  /* Accent gradient (matches super-admin logo tile) */
  --accent-from: #0ea5e9;  /* sky-500 */
  --accent-to:   #4f46e5;  /* indigo-600 */
  --accent-solid:#0ea5e9;
  --accent-soft: rgba(14, 165, 233, 0.12);

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', var(--font-sans);

  /* Geometry */
  --radius-sm: 0.5rem;
  --radius:    0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow:    0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.15);

  --container: 1120px;
  --gutter: 1.5rem;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--accent-solid); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: 5rem 0;
}
.section--tight { padding: 3rem 0; }
.section--dark {
  background: var(--bg-canvas);
  color: var(--text-on-dark);
}
.section--deep {
  background: var(--bg-deep);
  color: var(--text-on-dark);
}
.section--light { background: var(--bg-light); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-solid);
  margin-bottom: 0.75rem;
}

.section--dark .eyebrow,
.section--deep .eyebrow {
  color: #38bdf8; /* sky-400 — slightly lighter so it reads on dark */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }
.section--dark p,
.section--deep p { color: var(--text-on-dark-muted); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);
}
.btn--primary:hover { box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35); }

.btn--ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(148, 163, 184, 0.3);
}
.btn--ghost:hover { border-color: rgba(148, 163, 184, 0.6); background: rgba(148, 163, 184, 0.05); }

.btn--ghost-light {
  background: transparent;
  color: var(--text-on-light);
  border-color: rgba(30, 41, 59, 0.15);
}
.btn--ghost-light:hover { border-color: rgba(30, 41, 59, 0.3); }

.btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }

/* See demo — links to /admin/login?demo=1. Distinct violet gradient so
   it reads as preview, no commitment against the primary sky CTA. */
.btn--demo {
  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
}
.btn--demo:hover { box-shadow: 0 8px 24px rgba(192, 38, 211, 0.4); transform: translateY(-1px); }
.btn--demo:active { transform: translateY(0); }

/* Smaller demo link style for the nav bar — keeps the nav compact
   while still being visually distinct from the primary Login link. */
.nav__demo {
  color: #e9d5ff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav__demo:hover { color: #fff; }
.nav__demo svg { width: 12px; height: 12px; opacity: 0.9; }


/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-on-dark);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.nav__brand:hover { text-decoration: none; }

.nav__logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: block;
  object-fit: contain;
}

.nav__links {
  display: flex; gap: 2rem; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
.nav__links a {
  color: var(--text-on-dark-muted);
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.nav__links a:hover { color: var(--text-on-dark); text-decoration: none; }
.nav__links a.is-active { color: var(--text-on-dark); }
.nav__cta { padding: 0.55rem 1.1rem !important; font-size: 0.9rem !important; }

.nav__toggle {
  display: none;
  background: transparent; border: 0; color: var(--text-on-dark);
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
}
.nav__toggle:hover { background: rgba(148, 163, 184, 0.1); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 6rem 0 7rem;
  background: var(--bg-deep);
  color: var(--text-on-dark);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(800px circle at 20% 10%, rgba(14, 165, 233, 0.15), transparent 50%),
    radial-gradient(700px circle at 90% 80%, rgba(79, 70, 229, 0.18), transparent 50%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.12);
  color: #7dd3fc;
  font-size: 0.8rem; font-weight: 600;
  border: 1px solid rgba(14, 165, 233, 0.25);
  margin-bottom: 1.25rem;
}
.hero__eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 8px #7dd3fc;
}

.hero__title {
  color: #fff;
  margin-bottom: 1.25rem;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero__sub {
  font-size: 1.15rem;
  color: var(--text-on-dark-muted);
  max-width: 36rem;
  margin-bottom: 2rem;
}

.hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.hero__stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.hero__stat span { font-size: 0.85rem; color: var(--text-on-dark-muted); }

/* Hero visual — a stylised dashboard mock */
.hero__visual {
  position: relative;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}
.hero__visual-head {
  display: flex; gap: 0.5rem; margin-bottom: 1rem;
}
.hero__visual-dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.hero__visual-dot:nth-child(1) { background: #ef4444; }
.hero__visual-dot:nth-child(2) { background: #f59e0b; }
.hero__visual-dot:nth-child(3) { background: #10b981; }

.hero__visual-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.hero__visual-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.hero__visual-row .pill {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  margin-left: auto;
}
.hero__visual-row .pill--warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}
.hero__visual-bar {
  flex: 1;
  height: 6px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.hero__visual-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  border-radius: 999px;
}

/* ---------- Logo bar ---------- */

.logo-bar {
  padding: 2.5rem 0;
  background: var(--bg-canvas);
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  color: var(--text-on-dark-muted);
}
.logo-bar__label {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  color: var(--text-on-dark-muted);
}
.logo-bar__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  align-items: center;
}
.logo-bar__slot {
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(148, 163, 184, 0.08);
  border: 1px dashed rgba(148, 163, 184, 0.2);
}

/* ---------- Features grid ---------- */

.features__intro { max-width: 38rem; margin: 0 auto 3rem; text-align: center; }

.features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.feature-card {
  background: var(--bg-light-elev);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(14, 165, 233, 0.3);
}
.feature-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent-solid);
  margin-bottom: 1rem;
}
.feature-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--text-on-light);
}
.feature-card p {
  margin: 0;
  color: var(--text-on-light-muted);
  font-size: 0.95rem;
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
}
.step {
  text-align: left;
  padding: 1.5rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: var(--radius);
}
.step__num {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
  font-weight: 800;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.35);
}
.step h3 { color: #fff; }
.step p { font-size: 0.95rem; }

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.price-card {
  display: flex; flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 2rem;
  position: relative;
}
.price-card--featured {
  background: linear-gradient(180deg, var(--bg-deep), var(--bg-canvas));
  border-color: rgba(14, 165, 233, 0.4);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}
.price-card--featured .price-card__name,
.price-card--featured .price-card__amount { color: #fff; }
.price-card--featured .price-card__feature { color: var(--text-on-dark-muted); }
.price-card--featured .price-card__feature::before { color: #38bdf8; }

.price-card__badge {
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.price-card__name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-solid);
  margin-bottom: 0.5rem;
}

.price-card__amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
  color: var(--text-on-light);
}
.price-card__amount small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-on-light-muted);
}

.price-card__sub {
  font-size: 0.9rem;
  color: var(--text-on-light-muted);
  margin-bottom: 1.5rem;
  min-height: 2.7rem;
}
.price-card--featured .price-card__sub { color: var(--text-on-dark-muted); }

.price-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  flex: 1;
}
.price-card__feature {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.92rem;
  color: var(--text-on-light);
}
.price-card__feature::before {
  content: '✓';
  position: absolute; left: 0; top: 0;
  color: var(--accent-solid);
  font-weight: 800;
}


/* SLA feature row — give the support-response bullet a subtle accent so
   visitors can scan for response-time differences between plans. */
.price-card__feature--sla {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(56, 189, 248, 0.25);
}
.price-card__feature--sla strong {
  color: var(--accent-solid, #0ea5e9);
}
/* Comparison table */
.compare {
  margin-top: 4rem;
  overflow-x: auto;
}
.compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--bg-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}
.compare th, .compare td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}
.compare thead th {
  background: var(--bg-light);
  font-weight: 700;
  color: var(--text-on-light);
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:not(:first-child),
.compare th:not(:first-child) { text-align: center; }
.compare td:first-child { color: var(--text-on-light-muted); }

/* ---------- Social proof / testimonials ---------- */

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.testimonial {
  padding: 1.75rem;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: var(--radius);
}
.testimonial__quote {
  font-size: 1.05rem;
  color: var(--text-on-dark);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.testimonial__person {
  display: flex; align-items: center; gap: 0.75rem;
}
.testimonial__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-from), var(--accent-to));
  display: grid; place-items: center;
  color: #fff; font-weight: 800;
}
.testimonial__name { font-weight: 700; color: #fff; font-size: 0.95rem; }
.testimonial__role { color: var(--text-on-dark-muted); font-size: 0.85rem; }

/* ---------- FAQ ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq__item {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.section--light .faq__item { border-color: var(--border-light); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
  font-size: 1.05rem;
  font-weight: 600;
}
.faq__q:hover { color: var(--accent-solid); }
.faq__q::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  color: var(--text-on-dark-muted);
}
.section--light .faq__a { color: var(--text-on-light-muted); }
.faq__item.is-open .faq__a { max-height: 18rem; }
.faq__a-inner { padding: 0 0 1.5rem; }

/* ---------- Final CTA ---------- */

.cta-banner {
  background: linear-gradient(135deg, var(--bg-deep), var(--bg-canvas));
  color: var(--text-on-dark);
  text-align: center;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at 50% 50%, rgba(14, 165, 233, 0.18), transparent 60%);
  pointer-events: none;
}
.cta-banner__inner { position: relative; max-width: 44rem; margin: 0 auto; }
.cta-banner h2 { color: #fff; }
.cta-banner p { color: var(--text-on-dark-muted); font-size: 1.1rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-deep);
  color: var(--text-on-dark-muted);
  padding: 4rem 0 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand p { font-size: 0.92rem; max-width: 24rem; }
.footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.footer-col a {
  color: var(--text-on-dark-muted);
  font-size: 0.95rem;
}
.footer-col a:hover { color: var(--text-on-dark); text-decoration: none; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---------- About page specifics ---------- */

.about-hero {
  padding: 5rem 0 3rem;
  background: var(--bg-deep);
  color: var(--text-on-dark);
  text-align: center;
}
.about-hero h1 { color: #fff; max-width: 28ch; margin: 0 auto 1.25rem; }
.about-hero p { color: var(--text-on-dark-muted); max-width: 38rem; margin: 0 auto; }

.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.about-story h2 { color: var(--text-on-light); }
.about-story p { color: var(--text-on-light-muted); }

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.value {
  padding: 1.5rem;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.value h3 { font-size: 1.1rem; }
.value p { color: var(--text-on-light-muted); font-size: 0.92rem; margin: 0; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .hero { padding: 4rem 0 5rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__visual { order: 2; }
  .features__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card--featured { transform: none; }
  .testimonials { grid-template-columns: 1fr; }
  .about-story { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .logo-bar__grid { grid-template-columns: repeat(3, 1fr); }
  .nav__toggle { display: grid; place-items: center; }
  .nav__links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg-deep);
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav.is-open .nav__links { display: flex; }
  .nav__links a {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  }
  .nav__links a.nav__cta { margin-top: 0.5rem; border-bottom: 0; }
}

@media (max-width: 540px) {
  .section { padding: 3.5rem 0; }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .logo-bar__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Pricing skeleton — shimmer placeholder rendered by /assets/js/pricing.js
   while the live /api/saas/licenses/plans fetch is in flight. Matches the
   geometry of .price-card so the layout doesn't reflow when the real cards
   replace it.
   --------------------------------------------------------------------------- */
@keyframes pricing-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton-bar {
  display: block;
  height: 0.9rem;
  margin-bottom: 0.6rem;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.12) 40%,
    rgba(15, 23, 42, 0.06) 80%);
  background-size: 200px 100%;
  animation: pricing-shimmer 1.4s ease-in-out infinite;
}
.skeleton-bar--lg {
  height: 2.2rem;
  width: 60%;
  margin-bottom: 0.8rem;
}
.skeleton-bar--sub {
  width: 85%;
  margin-bottom: 1.5rem;
}
.price-card--skeleton .price-card__feature::before {
  content: none;
}
.price-card--skeleton .skeleton-bar {
  margin-left: 1.5rem; /* matches .price-card__feature padding-left */
  width: calc(100% - 1.5rem);
}


/* ==========================================================================
   Knowit Apartments — Redesign 2026-07-10
   Design tokens extracted from the supplied design system: light hero,
   navy #0F1B2D + orange #F26A21 + mint + yellow + canvas. The new
   marketing landing reuses the existing nav/footer/pricing.js (kept
   intact) and only the body content is restyled to match the new
   design system.
   ========================================================================== */

:root {
  --k-navy:    #0F1B2D;
  --k-ink:     #1A2433;
  --k-muted:   #7A8597;
  --k-canvas:  #F4F6F8;
  --k-canvas-2:#EEF1F4;
  --k-card:    #FFFFFF;
  --k-border:  #E5E9EE;
  --k-orange:        #F26A21;
  --k-orange-soft:   #FFF1E8;
  --k-orange-shadow: rgba(242,106,33,0.5);
  --k-mint:          #7FD1B9;
  --k-mint-soft:     #E8F7F1;
  --k-mint-ink:      #0F6A55;
  --k-yellow:        #F5C518;
  --k-yellow-soft:   #FEF6D8;
  --k-yellow-ink:    #7A5C00;
  --k-pill-navy-bg:  #EAEDF2;
}

/* ---------- Hero (light, redesigned) ---------- */
.k-hero {
  position: relative; overflow: hidden;
  padding: 7rem 0 6rem;
  background: var(--k-canvas);
  color: var(--k-ink);
}
.k-hero__blob { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(80px); }
.k-hero__blob--orange { top: -6rem; right: -6rem; width: 28rem; height: 28rem; background: var(--k-orange); opacity: 0.06; }
.k-hero__blob--mint   { bottom: -8rem; left: -6rem; width: 32rem; height: 32rem; background: var(--k-mint); opacity: 0.18; }
.k-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.k-hero__brand { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.k-hero__brand-mark {
  display: inline-block;
  width: 40px; height: 40px; border-radius: 10px;
  object-fit: contain;
}
.k-hero__brand-name {
  font-size: 0.875rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--k-muted);
}
.k-hero__title {
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--k-navy); margin: 1.25rem 0 1.25rem;
}
.k-hero__title em { font-style: normal; color: var(--k-orange); }
.k-hero__sub { font-size: 1.125rem; line-height: 1.6; color: var(--k-muted); max-width: 36rem; margin-bottom: 2rem; font-weight: 500; }
.k-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.k-hero__trust { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 2.5rem; }
.k-hero__trust-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--k-muted); }
.k-hero__trust-item svg { width: 14px; height: 14px; }

/* ---------- Pill ---------- */
.k-pill {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; border-radius: 999px;
  font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap;
}
.k-pill--navy   { background: var(--k-pill-navy-bg); color: var(--k-navy); }
.k-pill--orange { background: var(--k-orange-soft); color: var(--k-orange); }
.k-pill--mint   { background: var(--k-mint-soft);   color: var(--k-mint-ink); }
.k-pill--yellow { background: var(--k-yellow-soft); color: var(--k-yellow-ink); }
.k-pill--icon svg { width: 10px; height: 10px; }

/* ---------- Buttons (k-btn) ---------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.875rem 1.75rem; border-radius: 1rem;
  font-size: 0.875rem; font-weight: 700;
  text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap; cursor: pointer;
}
.k-btn:hover { text-decoration: none; transform: translateY(-1px); }
.k-btn:active { transform: translateY(0); }
.k-btn svg { width: 12px; height: 12px; }
.k-btn--orange { background: var(--k-orange); color: #fff; box-shadow: 0 12px 24px -8px var(--k-orange-shadow); }
.k-btn--orange:hover { box-shadow: 0 16px 32px -10px var(--k-orange-shadow); }
.k-btn--outline { background: #fff; color: var(--k-navy); border-color: var(--k-border); }
.k-btn--outline:hover { border-color: var(--k-muted); }
.k-btn--ghost-dark { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.15); }
.k-btn--ghost-dark:hover { background: rgba(255,255,255,0.12); }

/* ---------- Hero mockup (window-chrome dashboard) ---------- */
.k-mock { position: relative; background: #fff; border: 1px solid var(--k-border); border-radius: 1.5rem; padding: 1.25rem; box-shadow: 0 30px 60px -20px rgba(15,27,45,0.20); }
.k-mock__chrome { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--k-border); margin-bottom: 1.25rem; }
.k-mock__dots { display: flex; gap: 0.375rem; }
.k-mock__dot { width: 10px; height: 10px; border-radius: 50%; }
.k-mock__chrome-label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); }
.k-mock__chrome-icon { color: var(--k-muted); width: 16px; height: 16px; }
.k-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.k-mini { background: #fff; border: 1px solid var(--k-border); border-radius: 1rem; padding: 0.75rem; }
.k-mini__chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.k-mini__chip--orange { background: var(--k-orange-soft); color: var(--k-orange); }
.k-mini__chip--mint   { background: var(--k-mint-soft);   color: var(--k-mint-ink); }
.k-mini__chip--yellow { background: var(--k-yellow-soft); color: var(--k-yellow-ink); }
.k-mini__val { font-size: 1.5rem; font-weight: 900; color: var(--k-navy); margin-top: 0.5rem; }
.k-mock__chart-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 1.25rem 0 0.5rem; }
.k-mock__chart-label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); }
.k-mock__bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 8rem; }
.k-mock__bar { flex: 1; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.k-mock__bar--orange { background: var(--k-orange); }
.k-mock__bar--mint   { background: var(--k-mint); opacity: 0.85; }
.k-mock__bar--navy   { background: var(--k-navy); opacity: 0.85; }
.k-mock__xaxis { display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: 0.5625rem; font-weight: 800; color: var(--k-muted); letter-spacing: 0.05em; }
.k-mock__floater { position: absolute; left: -1.5rem; bottom: -1.5rem; width: 13rem; background: #fff; border: 1px solid var(--k-border); border-radius: 1rem; padding: 1rem; box-shadow: 0 20px 40px -16px rgba(15,27,45,0.18); display: none; }
@media (min-width: 768px) { .k-mock__floater { display: block; } }
.k-mock__floater-row { display: flex; align-items: center; gap: 0.625rem; }
.k-mock__floater-icon { width: 32px; height: 32px; border-radius: 0.5rem; background: var(--k-mint-soft); color: var(--k-mint-ink); display: grid; place-items: center; }
.k-mock__floater-icon svg { width: 12px; height: 12px; }
.k-mock__floater-eyebrow { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); }
.k-mock__floater-name { font-size: 0.875rem; font-weight: 800; color: var(--k-navy); }
.k-mock__floater-status { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.k-mock__floater-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-mint); }
.k-mock__floater-text { font-size: 0.625rem; font-weight: 700; color: var(--k-ink); }

/* ---------- Section header ---------- */
.k-sec-head { margin-bottom: 3rem; }
.k-sec-head--center { max-width: 36rem; margin-left: auto; margin-right: auto; text-align: center; }
.k-sec-head h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--k-navy); margin: 0.75rem 0 0.75rem; }
.k-sec-head p { font-size: 1rem; font-weight: 500; color: var(--k-muted); margin: 0; }
.k-sec-head a { color: var(--k-orange); font-weight: 800; }

/* ---------- Section spacing ---------- */
.k-section { padding: 6rem 0; background: var(--k-canvas); }
.k-section--alt { background: var(--k-canvas-2); }

/* ---------- Features (alternating) ---------- */
.k-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.k-feature + .k-feature { margin-top: 5rem; }
.k-feature__copy h3 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--k-navy); margin: 1rem 0 0.75rem; }
.k-feature__copy p { font-size: 1rem; font-weight: 500; line-height: 1.6; color: var(--k-muted); margin: 0; }
.k-feature__bullets { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.625rem; }
.k-feature__bullets li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; font-weight: 700; color: var(--k-ink); }
.k-feature__bullets li svg { width: 12px; height: 12px; color: var(--k-orange); margin-top: 0.125rem; flex-shrink: 0; }
.k-feature__visual { background: #fff; border: 1px solid var(--k-border); border-radius: 1.5rem; padding: 1.25rem; box-shadow: 0 20px 50px -24px rgba(15,27,45,0.20); }
.k-feature--flip .k-feature__copy   { order: 2; }
.k-feature--flip .k-feature__visual { order: 1; }

/* ---------- Mockup panels ---------- */
.k-mp-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 1px solid var(--k-border); margin-bottom: 1rem; }
.k-mp-head__left { display: flex; align-items: center; gap: 0.5rem; }
.k-mp-head__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--k-orange); }
.k-mp-head__title { font-size: 0.875rem; font-weight: 800; color: var(--k-navy); }

/* Calendar */
.k-mp-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; text-align: center; font-size: 0.625rem; font-weight: 800; color: var(--k-muted); }
.k-mp-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.k-mp-cal__cell { aspect-ratio: 1 / 1; border-radius: 0.75rem; font-size: 0.6875rem; font-weight: 800; display: grid; place-items: center; color: var(--k-ink); }
.k-mp-cal__cell--booked { background: var(--k-orange); color: #fff; }
.k-mp-cal__cell--today  { background: var(--k-navy);   color: #fff; }
.k-mp-cal__cell--open   { background: var(--k-canvas); }
.k-mp-cal__legend { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); }
.k-mp-cal__legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.k-mp-cal__sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.k-mp-cal__sw--booked { background: var(--k-orange); }
.k-mp-cal__sw--today  { background: var(--k-navy); }
.k-mp-cal__sw--open   { background: var(--k-canvas); border: 1px solid var(--k-border); }

/* POS */
.k-mp-pos__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--k-border); border-radius: 0.75rem; }
.k-mp-pos__row + .k-mp-pos__row { margin-top: 0.5rem; }
.k-mp-pos__qty { width: 32px; height: 32px; border-radius: 0.5rem; display: grid; place-items: center; font-size: 0.625rem; font-weight: 800; }
.k-mp-pos__qty--orange { background: var(--k-orange-soft); color: var(--k-orange); }
.k-mp-pos__qty--mint   { background: var(--k-mint-soft);   color: var(--k-mint-ink); }
.k-mp-pos__qty--yellow { background: var(--k-yellow-soft); color: var(--k-yellow-ink); }
.k-mp-pos__name { font-size: 0.875rem; font-weight: 800; color: var(--k-navy); }
.k-mp-pos__branch { font-size: 0.625rem; font-weight: 700; color: var(--k-muted); }
.k-mp-pos__price { font-size: 0.875rem; font-weight: 900; color: var(--k-navy); margin-left: auto; }
.k-mp-pos__total { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 1rem; background: var(--k-navy); color: #fff; display: flex; align-items: center; justify-content: space-between; }
.k-mp-pos__total-label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #9AA3B1; }
.k-mp-pos__total-val { font-size: 1.5rem; font-weight: 900; }
.k-mp-pos__cta { margin-top: 0.75rem; width: 100%; padding: 0.75rem; border: 0; border-radius: 1rem; background: var(--k-orange); color: #fff; font-weight: 800; font-size: 0.875rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.k-mp-pos__cta svg { width: 14px; height: 14px; }

/* Inventory */
.k-mp-inv__row + .k-mp-inv__row { margin-top: 0.75rem; }
.k-mp-inv__row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; }
.k-mp-inv__row-name { font-size: 0.875rem; font-weight: 800; color: var(--k-navy); }
.k-mp-inv__row-stock { font-size: 0.6875rem; font-weight: 700; color: var(--k-muted); }
.k-mp-inv__bar { height: 8px; border-radius: 999px; background: var(--k-canvas); overflow: hidden; }
.k-mp-inv__bar > i { display: block; height: 100%; border-radius: 999px; }
.k-bar--orange { background: var(--k-orange); }
.k-bar--yellow { background: var(--k-yellow); }
.k-bar--mint   { background: var(--k-mint); }

/* Security */
.k-mp-sec__license { background: var(--k-canvas); border: 1px solid var(--k-border); border-radius: 1rem; padding: 1rem; }
.k-mp-sec__label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); }
.k-mp-sec__key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: var(--k-navy); word-break: break-all; margin-top: 0.25rem; }
.k-mp-sec__status { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; font-weight: 800; color: var(--k-mint-ink); }
.k-mp-sec__status svg { width: 12px; height: 12px; }
.k-mp-sec__tiles { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.k-mp-sec__tile { background: #fff; border: 1px solid var(--k-border); border-radius: 1rem; padding: 0.75rem; }
.k-mp-sec__tile-icon { width: 28px; height: 28px; border-radius: 0.5rem; display: grid; place-items: center; }
.k-mp-sec__tile-icon svg { width: 12px; height: 12px; }
.k-mp-sec__tile-icon--orange { background: var(--k-orange-soft); color: var(--k-orange); }
.k-mp-sec__tile-icon--mint   { background: var(--k-mint-soft);   color: var(--k-mint-ink); }
.k-mp-sec__tile-icon--yellow { background: var(--k-yellow-soft); color: var(--k-yellow-ink); }
.k-mp-sec__tile-icon--navy   { background: var(--k-pill-navy-bg); color: var(--k-navy); }
.k-mp-sec__tile-label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); margin-top: 0.5rem; }
.k-mp-sec__tile-val { font-size: 0.875rem; font-weight: 800; color: var(--k-navy); }

/* Analytics */
.k-mp-ana__head { display: flex; align-items: flex-end; justify-content: space-between; margin: 1rem 0 0.5rem; }
.k-mp-ana__head-label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); }
.k-mp-ana__bars { display: flex; align-items: flex-end; gap: 0.375rem; height: 7rem; }
.k-mp-ana__bar { flex: 1; border-top-left-radius: 4px; border-top-right-radius: 4px; background: var(--k-navy); opacity: 0.5; }
.k-mp-ana__bar--last { background: var(--k-orange); opacity: 1; }

/* Payments */
.k-mp-pay__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border: 1px solid var(--k-border); border-radius: 0.75rem; }
.k-mp-pay__row + .k-mp-pay__row { margin-top: 0.625rem; }
.k-mp-pay__icon { width: 32px; height: 32px; border-radius: 0.5rem; display: grid; place-items: center; background: var(--k-orange-soft); color: var(--k-orange); }
.k-mp-pay__icon svg { width: 12px; height: 12px; }
.k-mp-pay__name { font-size: 0.875rem; font-weight: 800; color: var(--k-navy); }
.k-mp-pay__status { display: inline-flex; align-items: center; margin-top: 0.125rem; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.5625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.k-mp-pay__status--success { background: var(--k-mint-soft); color: var(--k-mint-ink); }
.k-mp-pay__status--pending { background: var(--k-yellow-soft); color: var(--k-yellow-ink); }
.k-mp-pay__amount { font-size: 0.875rem; font-weight: 900; color: var(--k-navy); margin-left: auto; }

/* ---------- Values ---------- */
.k-values__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; }
.k-values__intro h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: var(--k-navy); margin: 1rem 0 1rem; }
.k-values__intro p { font-size: 1rem; font-weight: 500; color: var(--k-muted); margin: 0; }
.k-values__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
.k-stat { background: #fff; border: 1px solid var(--k-border); border-radius: 1rem; padding: 0.75rem; }
.k-stat__val { font-size: 1.25rem; font-weight: 900; color: var(--k-navy); }
.k-stat__lbl { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-muted); margin-top: 0.125rem; }
.k-values__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.k-vcard { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--k-border); border-radius: 1.5rem; padding: 1.5rem; }
.k-vcard__num { font-size: 3rem; font-weight: 900; line-height: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--k-orange); opacity: 0.85; }
.k-vcard h4 { font-size: 1rem; font-weight: 800; color: var(--k-navy); margin: 0.75rem 0 0.5rem; }
.k-vcard p { font-size: 0.75rem; font-weight: 500; line-height: 1.5; color: var(--k-muted); margin: 0; }

/* ---------- Pricing cards (k-pricing) ---------- */
.k-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
.k-pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--k-border); border-radius: 1.5rem; padding: 2rem; }
.k-pcard--popular { background: var(--k-navy); color: #fff; border: 2px solid var(--k-orange); transform: translateY(-8px); position: relative; }
.k-pcard--popular .k-pcard__name, .k-pcard--popular .k-pcard__amount { color: #fff; }
.k-pcard--popular .k-pcard__sub { color: #C7CDD6; }
.k-pcard--popular .k-pcard__feat { color: rgba(255,255,255,0.9); }
.k-pcard__badge { position: absolute; top: 0; right: 2rem; transform: translateY(-50%); padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--k-orange); color: #fff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.k-pcard__name { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--k-orange); margin-bottom: 0.5rem; }
.k-pcard__sub { font-size: 0.75rem; font-weight: 500; color: var(--k-muted); margin: 0.5rem 0 1.5rem; min-height: 2rem; }
.k-pcard__amount { font-size: 2.25rem; font-weight: 900; line-height: 1; color: var(--k-navy); margin: 0; display: flex; align-items: baseline; gap: 0.375rem; }
.k-pcard__period { font-size: 0.875rem; font-weight: 500; color: var(--k-muted); }
.k-pcard--popular .k-pcard__period { color: #9AA3B1; }
.k-pcard__feats { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.k-pcard__feat { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; font-weight: 500; color: var(--k-ink); }
.k-pcard__feat svg { width: 12px; height: 12px; color: var(--k-orange); margin-top: 0.125rem; flex-shrink: 0; }
.k-pcard--popular .k-pcard__feat svg { color: var(--k-mint); }
.k-pcard__cta { margin-top: 2rem; display: block; width: 100%; padding: 0.875rem; border-radius: 1rem; font-weight: 800; font-size: 0.875rem; text-align: center; text-decoration: none; }
.k-pcard--popular .k-pcard__cta { background: var(--k-orange); color: #fff; }
.k-pcard:not(.k-pcard--popular) .k-pcard__cta { background: var(--k-canvas); color: var(--k-navy); border: 1px solid var(--k-border); }
.k-pricing-empty { text-align: center; font-size: 0.875rem; font-weight: 500; color: var(--k-muted); }
.k-pricing-empty a { color: var(--k-orange); font-weight: 800; }

/* ---------- Final CTA (dark navy card) ---------- */
.k-cta { position: relative; overflow: hidden; border-radius: 28px; padding: 3.5rem; background: var(--k-navy); color: #fff; text-align: center; }
.k-cta__blob { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.k-cta__blob--orange { top: -4rem; right: -4rem; width: 18rem; height: 18rem; background: var(--k-orange); opacity: 0.25; }
.k-cta__blob--mint   { bottom: -4rem; left: -4rem; width: 18rem; height: 18rem; background: var(--k-mint); opacity: 0.20; }
.k-cta__inner { position: relative; z-index: 1; max-width: 36rem; margin: 0 auto; }
.k-cta h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin: 1rem 0 0.75rem; }
.k-cta p { font-size: 1rem; font-weight: 500; color: #C7CDD6; margin: 0; }
.k-cta__row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .k-hero { padding: 4rem 0 5rem; }
  .k-hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .k-feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .k-feature--flip .k-feature__copy   { order: 1; }
  .k-feature--flip .k-feature__visual { order: 2; }
  .k-values__grid { grid-template-columns: 1fr; gap: 2rem; }
  .k-values__cards { grid-template-columns: 1fr; }
  .k-pricing-grid { grid-template-columns: 1fr; }
  .k-pcard--popular { transform: none; }
  .k-cta { padding: 2.5rem 1.5rem; }
  .k-section { padding: 4rem 0; }
  .k-feature + .k-feature { margin-top: 3rem; }
}
@media (max-width: 540px) {
  .k-mock__kpis { grid-template-columns: 1fr; }
  .k-mp-sec__tiles { grid-template-columns: 1fr; }
  .k-values__stats { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   Nav + Footer restyle — applied only when <body data-theme="k"> is set.
   The original `.site-header` / `.nav` / `.site-footer` / `.btn--primary`
   rules in the top of site.css are kept intact so /about and /pricing
   remain unchanged. These scoped overrides repaint the apex header and
   footer in the new design system (light canvas nav with navy text and an
   orange Login button; navy footer with orange brand accent).
   ========================================================================== */

/* ---------- NAV (scoped to the new landing) ---------- */
body[data-theme="k"] .site-header {
  background: rgba(244, 246, 248, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--k-border);
}
body[data-theme="k"] .nav__brand,
body[data-theme="k"] .footer-brand .nav__brand {
  color: var(--k-navy);
}
body[data-theme="k"] .nav__brand:hover { color: var(--k-navy); }
body[data-theme="k"] .nav__logo {
  background: transparent;
  box-shadow: none;
}
body[data-theme="k"] .nav__links a {
  color: var(--k-muted);
}
body[data-theme="k"] .nav__links a:hover,
body[data-theme="k"] .nav__links a.is-active { color: var(--k-navy); }
body[data-theme="k"] .nav__toggle { color: var(--k-navy); }
body[data-theme="k"] .nav__toggle:hover { background: rgba(122, 133, 151, 0.10); }

/* Login button — override the old sky→indigo gradient with the new
   orange primary that matches the rest of the page. */
body[data-theme="k"] .btn--primary,
body[data-theme="k"] .nav__cta.btn--primary {
  background: var(--k-orange);
  color: #fff;
  box-shadow: 0 8px 20px -8px var(--k-orange-shadow);
}
body[data-theme="k"] .btn--primary:hover,
body[data-theme="k"] .nav__cta.btn--primary:hover {
  background: #E15A14;            /* one shade deeper for hover */
  box-shadow: 0 12px 24px -8px var(--k-orange-shadow);
}

/* "See demo" link in the nav — match the muted navy look from the design
   system; keep its small play-icon. */
body[data-theme="k"] .nav__demo { color: var(--k-navy); font-weight: 600; }
body[data-theme="k"] .nav__demo:hover { color: var(--k-orange); }
body[data-theme="k"] .nav__demo svg { color: var(--k-orange); opacity: 1; }

/* Mobile menu: open menu gets a light canvas background instead of dark. */
@media (max-width: 900px) {
  body[data-theme="k"] .nav__links {
    background: var(--k-canvas);
    border-top: 1px solid var(--k-border);
  }
  body[data-theme="k"] .nav__links a {
    color: var(--k-navy);
    border-bottom: 1px solid var(--k-border);
  }
  body[data-theme="k"] .nav__links a:hover { color: var(--k-orange); }
}

/* ---------- FOOTER (scoped to the new landing) ---------- */
body[data-theme="k"] .site-footer {
  background: var(--k-navy);
  color: #C7CDD6;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body[data-theme="k"] .footer-brand p { color: #9AA3B1; }
body[data-theme="k"] .footer-col h4 {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
body[data-theme="k"] .footer-col a {
  color: #C7CDD6;
  font-size: 0.95rem;
  transition: color .15s ease;
}
body[data-theme="k"] .footer-col a:hover {
  color: var(--k-orange);
  text-decoration: none;
}
body[data-theme="k"] .footer-brand .nav__brand { color: #fff; }
body[data-theme="k"] .footer-brand .nav__logo {
  background: transparent;
  box-shadow: none;
}
body[data-theme="k"] .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #9AA3B1;
}

/* Orange accent stripe along the top of the footer to tie it visually
   to the orange Login button at the top of the page. */
body[data-theme="k"] .site-footer {
  position: relative;
  border-top: 3px solid var(--k-orange);
}

/* If a footer link is the same as the Login CTA, give it the orange
   pill treatment so the footer echoes the primary button. */
body[data-theme="k"] .footer-col a.footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--k-orange);
  color: #fff;
  font-weight: 700;
}
body[data-theme="k"] .footer-col a.footer__cta:hover {
  background: #E15A14;
  color: #fff;
}