/* ==========================================================================
   Planexa — premium dark SaaS landing design system
   Scoped to the marketing landing page (index.html). The authenticated app
   keeps using css/index.css, so these tokens never leak into the workspace.
   ========================================================================== */

.planexa-landing {
  /* Surfaces */
  --px-bg: #070B12;
  --px-bg-soft: #0A0F18;
  --px-surface: #0D1420;
  --px-surface-2: #111A28;
  --px-surface-3: #16202F;

  /* Borders */
  --px-border: #1B2637;
  --px-border-soft: rgba(148, 163, 184, 0.09);
  --px-border-strong: #263449;

  /* Text */
  --px-text: #F2F5F9;
  --px-text-soft: #C3CCDA;
  --px-text-muted: #8B97A9;
  --px-text-faint: #64748B;

  /* Accent — restrained indigo */
  --px-accent: #5B7CFA;
  --px-accent-hover: #6E8CFF;
  --px-accent-soft: rgba(91, 124, 250, 0.12);
  --px-accent-border: rgba(91, 124, 250, 0.28);

  /* Semantic (used sparingly) */
  --px-green: #3FB984;
  --px-amber: #D6A14A;
  --px-violet: #8B7CF6;

  /* Radii */
  --px-r-sm: 8px;
  --px-r-md: 12px;
  --px-r-lg: 16px;
  --px-r-xl: 20px;
  --px-r-2xl: 24px;
  --px-r-pill: 999px;

  /* Spacing scale (8px base) */
  --px-1: 4px;
  --px-2: 8px;
  --px-3: 12px;
  --px-4: 16px;
  --px-5: 20px;
  --px-6: 24px;
  --px-8: 32px;
  --px-10: 40px;
  --px-12: 48px;
  --px-16: 64px;
  --px-20: 80px;

  /* Layout */
  --px-container: 1240px;
  --px-gutter: 24px;
  --px-nav-h: 68px;

  --px-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);

  background-color: var(--px-bg);
  color: var(--px-text);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The landing owns its own dark surface, so it must win over the shared
   light-only reset/list defaults in css/index.css. */
body.planexa-landing { margin: 0; padding: 0; }
.planexa-landing *,
.planexa-landing *::before,
.planexa-landing *::after { box-sizing: border-box; }

.planexa-landing h1,
.planexa-landing h2,
.planexa-landing h3,
.planexa-landing h4,
.planexa-landing p,
.planexa-landing ul,
.planexa-landing li,
.planexa-landing figure { margin: 0; padding: 0; }

.planexa-landing ul { list-style: none; }
.planexa-landing img { display: block; max-width: 100%; height: auto; }
.planexa-landing button { font: inherit; color: inherit; }
.planexa-landing a { color: inherit; text-decoration: none; }

.planexa-landing :focus-visible {
  outline: 2px solid var(--px-accent);
  outline-offset: 3px;
  border-radius: var(--px-r-sm);
}

.planexa-landing ::selection {
  background: rgba(91, 124, 250, 0.3);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
/* Skip link — visually hidden until focused, then a normal button-looking link. */
.px-skip-link {
  position: absolute;
  left: var(--px-4);
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--px-r-sm);
  background: var(--px-accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top var(--px-transition);
}
.px-skip-link:focus { top: var(--px-4); }

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

.px-section {
  padding-block: clamp(72px, 9vw, 128px);
  scroll-margin-top: calc(var(--px-nav-h) + 16px);
}

.px-section__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.px-section__head--left {
  margin-inline: 0;
  text-align: left;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.px-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--px-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--px-text-muted);
}

.px-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--px-2);
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--px-text-soft);
  line-height: 1;
}

.px-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--px-accent);
  box-shadow: 0 0 0 3px var(--px-accent-soft);
}

.px-h1 {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.033em;
  color: var(--px-text);
}

.px-h2 {
  font-size: clamp(2rem, 3.7vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--px-text);
}

.px-h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.011em;
  color: var(--px-text);
}

.px-accent-text { color: var(--px-accent); }

.px-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--px-text-muted);
  max-width: 46ch;
}

.px-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--px-text-muted);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.px-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--px-2);
  height: 46px;
  padding-inline: var(--px-6);
  border-radius: var(--px-r-md);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--px-transition), border-color var(--px-transition),
    color var(--px-transition), transform var(--px-transition), box-shadow var(--px-transition);
}

.px-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* .px-btn sets display: inline-flex, which outranks the UA's [hidden] rule —
   without this, a button marked hidden stays on screen. */
.px-btn[hidden] { display: none; }

/* Install is a supporting action in the navbar: slightly smaller than the
   auth CTA so it reads as secondary rather than competing with it. */
.px-nav__install {
  height: 40px;
  padding-inline: 16px;
  font-size: 0.875rem;
}
.px-nav__install:hover {
  border-color: var(--px-accent);
  color: var(--px-text);
}

.px-btn--primary {
  background: var(--px-accent);
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.4);
}
.px-btn--primary:hover {
  background: var(--px-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(91, 124, 250, 0.28);
}

.px-btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--px-border);
  color: var(--px-text-soft);
}
.px-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--px-border-strong);
  color: var(--px-text);
}

.px-btn--ghost {
  height: 40px;
  padding-inline: var(--px-4);
  background: transparent;
  color: var(--px-text-soft);
}
.px-btn--ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--px-text); }

.px-btn--lg { height: 52px; padding-inline: var(--px-8); font-size: 1rem; }
.px-btn--block { width: 100%; }

.px-btn__icon-arrow { transition: transform var(--px-transition); }
.px-btn:hover .px-btn__icon-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */
.px-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(7, 11, 18, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: border-color var(--px-transition), background-color var(--px-transition);
}

.px-nav.is-scrolled {
  border-bottom-color: var(--px-border);
  background: rgba(7, 11, 18, 0.92);
}

.px-nav__inner {
  height: var(--px-nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-6);
}

.px-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--px-text);
}

.px-brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--px-accent), #4358D6);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.px-brand__mark svg { width: 17px; height: 17px; }

/* When the mark is a real logo image instead of an inline icon, the image
   fills the mark and keeps its own artwork (so the gradient/box-shadow from
   the icon variant is not applied on top of it). */
img.px-brand__mark {
  background: none;
  box-shadow: none;
  object-fit: contain;
}

.px-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--px-1);
}

.px-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--px-r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--px-text-muted);
  transition: color var(--px-transition), background-color var(--px-transition);
}

/* The Resources entry is a <button> (it opens a dropdown) while its siblings are
   <a> links. Without this reset it keeps the UA button styling — a grey fill and
   a 2px outset border — and reads as a filled control sitting in a row of plain
   text. Reset the native box so the two element types render identically; the
   .px-nav__link rules above then own the colour and background for both. */
button.px-nav__link {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
}

.px-nav__link:hover { color: var(--px-text); background: rgba(255,255,255,0.045); }
.px-nav__link svg { width: 13px; height: 13px; opacity: 0.7; transition: transform var(--px-transition); }
.px-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.px-nav__right {
  display: flex;
  align-items: center;
  gap: var(--px-2);
}

.px-icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--px-r-sm);
  background: transparent;
  color: var(--px-text-muted);
  cursor: pointer;
  transition: color var(--px-transition), background-color var(--px-transition), border-color var(--px-transition);
}
.px-icon-btn:hover { color: var(--px-text); background: rgba(255,255,255,0.05); }
.px-icon-btn svg { width: 17px; height: 17px; }

.px-nav__toggle { display: none; }

/* Dropdown */
.px-dropdown { position: relative; }

.px-dropdown__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 300px;
  padding: var(--px-2);
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-lg);
  background: var(--px-surface);
  box-shadow: 0 24px 60px -20px rgba(2, 6, 23, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--px-transition), transform var(--px-transition), visibility var(--px-transition);
}
.px-dropdown__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.px-dropdown__item {
  display: flex;
  gap: var(--px-3);
  padding: 10px;
  border-radius: var(--px-r-md);
  transition: background-color var(--px-transition);
}
.px-dropdown__item:hover { background: rgba(255,255,255,0.045); }
.px-dropdown__item svg { width: 16px; height: 16px; color: var(--px-accent); flex-shrink: 0; margin-top: 2px; }
.px-dropdown__title { font-size: 0.875rem; font-weight: 500; color: var(--px-text); }
.px-dropdown__desc { font-size: 0.75rem; color: var(--px-text-faint); line-height: 1.5; margin-top: 2px; }

/* In-page search dialog */
.px-search {
  width: min(640px, calc(100% - 32px));
  max-height: min(80vh, 720px);
  margin: auto;
  padding: var(--px-6);
  overflow: auto;
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-r-xl);
  background: var(--px-surface);
  color: var(--px-text);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.px-search::backdrop { background: rgba(2, 6, 23, 0.76); backdrop-filter: blur(4px); }
.px-search__head { display: flex; align-items: center; justify-content: space-between; gap: var(--px-4); }
.px-search__title { font-size: 1.125rem; font-weight: 600; }
.px-search__label { display: block; margin-top: var(--px-5); color: var(--px-text-muted); font-size: 0.8125rem; }
.px-search__input {
  width: 100%;
  margin-top: var(--px-2);
  padding: 12px 14px;
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-r-md);
  background: var(--px-bg-soft);
  color: var(--px-text);
  font: inherit;
}
.px-search__input:focus { border-color: var(--px-accent); outline: 2px solid var(--px-accent-border); }
.px-search__input::placeholder { color: var(--px-text-faint); }
.px-search__status { min-height: 1.25em; margin-top: var(--px-3); color: var(--px-text-muted); font-size: 0.8125rem; }
.px-search__results { display: grid; gap: var(--px-2); margin-top: var(--px-3); }
.px-search__result {
  display: grid;
  gap: 2px;
  padding: var(--px-3);
  border: 1px solid transparent;
  border-radius: var(--px-r-md);
  transition: border-color var(--px-transition), background-color var(--px-transition);
}
.px-search__result:hover,
.px-search__result:focus-visible { border-color: var(--px-border); background: rgba(255,255,255,0.04); }
.px-search__result-title { color: var(--px-text); font-size: 0.9375rem; font-weight: 600; }
.px-search__result-desc { color: var(--px-text-muted); font-size: 0.8125rem; line-height: 1.5; }

/* Mobile drawer */
.px-drawer {
  display: none;
  border-top: 1px solid var(--px-border);
  background: var(--px-bg-soft);
  padding: var(--px-4) 0 var(--px-6);
}
.px-drawer.is-open { display: block; }
.px-drawer__link {
  display: block;
  padding: 12px var(--px-2);
  font-size: 1rem;
  font-weight: 500;
  color: var(--px-text-soft);
  border-bottom: 1px solid var(--px-border-soft);
}
.px-drawer__actions { display: flex; flex-direction: column; gap: var(--px-3); margin-top: var(--px-6); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.px-hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(64px, 8vw, 110px);
  overflow: hidden;
}

/* A single, very soft accent glow — the only ambient color on the page. */
.px-hero::before {
  content: '';
  position: absolute;
  top: -260px;
  left: 50%;
  width: 1100px;
  height: 780px;
  transform: translateX(-38%);
  background: radial-gradient(closest-side, rgba(91, 124, 250, 0.13), transparent 72%);
  pointer-events: none;
}

.px-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.px-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.px-hero__copy .px-pill { margin-bottom: var(--px-6); }
.px-hero__copy .px-h1 { margin-bottom: var(--px-6); }

.px-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--px-3);
  margin-top: var(--px-8);
}

.px-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--px-3) var(--px-6);
  margin-top: var(--px-8);
  padding-top: var(--px-6);
  border-top: 1px solid var(--px-border-soft);
}

.px-trust__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--px-text-muted);
}
.px-trust__item svg { width: 14px; height: 14px; color: var(--px-green); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Product preview (the hero dashboard mock)
   -------------------------------------------------------------------------- */
.px-preview { position: relative; }

.px-preview__frame {
  position: relative;
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-xl);
  background: var(--px-surface);
  box-shadow: 0 40px 90px -40px rgba(2, 6, 23, 0.95), 0 0 0 1px rgba(255,255,255,0.015) inset;
  overflow: hidden;
  transform: perspective(1800px) rotateY(-5deg) rotateX(1.5deg);
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.px-preview:hover .px-preview__frame { transform: perspective(1800px) rotateY(-2deg) rotateX(0.5deg); }

.px-preview__chrome {
  height: 38px;
  display: flex;
  align-items: center;
  gap: var(--px-3);
  padding-inline: var(--px-4);
  border-bottom: 1px solid var(--px-border);
  background: rgba(255,255,255,0.015);
}
.px-preview__dots { display: flex; gap: 6px; }
.px-preview__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--px-border-strong); }
.px-preview__url {
  flex: 1;
  max-width: 220px;
  height: 20px;
  display: flex;
  align-items: center;
  padding-inline: 10px;
  border: 1px solid var(--px-border-soft);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 0.6875rem;
  color: var(--px-text-faint);
}

.px-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); }

/* App sidebar */
.px-app__side {
  padding: var(--px-4) var(--px-3);
  border-right: 1px solid var(--px-border);
  background: rgba(255,255,255,0.012);
}
.px-app__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px var(--px-4);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--px-text);
}
.px-app__brand .px-brand__mark { width: 22px; height: 22px; border-radius: 7px; }
.px-app__brand .px-brand__mark svg { width: 12px; height: 12px; }

/* Real logo inside the hero mockup's app sidebar (see index.html .px-app__brand). */
.px-app__brand-mark {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}

.px-app__nav { display: flex; flex-direction: column; gap: 2px; }

.px-app__nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--px-text-faint);
  transition: color var(--px-transition), background-color var(--px-transition);
}
.px-app__nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.px-app__nav-item:hover { color: var(--px-text-soft); background: rgba(255,255,255,0.03); }
.px-app__nav-item.is-active {
  color: var(--px-text);
  background: var(--px-accent-soft);
  box-shadow: inset 2px 0 0 var(--px-accent);
}
.px-app__nav-item.is-active svg { color: var(--px-accent); }

/* App main */
.px-app__main {
  padding: var(--px-4);
  display: flex;
  flex-direction: column;
  gap: var(--px-4);
  min-width: 0;
}

.px-app__topbar {
  display: flex;
  align-items: center;
  gap: var(--px-3);
}
.px-app__search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding-inline: 10px;
  border: 1px solid var(--px-border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 0.75rem;
  color: var(--px-text-faint);
}
.px-app__search svg { width: 13px; height: 13px; flex-shrink: 0; }
.px-app__search kbd {
  margin-left: auto;
  padding: 1px 5px;
  border: 1px solid var(--px-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.625rem;
  color: var(--px-text-faint);
}
.px-app__user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: var(--px-3);
  border-left: 1px solid var(--px-border);
}
.px-app__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #2E3A55, #1B2434);
  border: 1px solid var(--px-border-strong);
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--px-text-soft);
  flex-shrink: 0;
}

.px-app__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--px-4); }
.px-app__title { font-size: 0.875rem; font-weight: 600; color: var(--px-text); }
.px-app__subtitle { font-size: 0.6875rem; color: var(--px-text-faint); margin-top: 2px; }
.px-app__badge {
  padding: 3px 8px;
  border: 1px solid var(--px-accent-border);
  border-radius: var(--px-r-pill);
  background: var(--px-accent-soft);
  font-size: 0.625rem;
  font-weight: 600;
  color: #93A9FF;
  white-space: nowrap;
}

/* KPI cards */
.px-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--px-2); }
.px-kpi__card {
  padding: 10px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-md);
  background: rgba(255,255,255,0.018);
}
.px-kpi__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--px-text-faint);
}
.px-kpi__label svg { width: 11px; height: 11px; }
.px-kpi__value { margin-top: 5px; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--px-text); }
.px-kpi__delta { margin-top: 3px; font-size: 0.625rem; font-weight: 500; color: var(--px-green); }
.px-kpi__delta--accent { color: #93A9FF; }

/* Lower panes: tasks + calendar */
.px-app__panes { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--px-2); }

.px-pane {
  padding: 10px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-md);
  background: rgba(255,255,255,0.018);
  min-width: 0;
}
.px-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--px-text-soft);
}
.px-pane__head span:last-child { font-size: 0.625rem; font-weight: 500; color: var(--px-text-faint); }

.px-task { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.px-task + .px-task { border-top: 1px solid var(--px-border-soft); }
.px-task__check {
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--px-border-strong);
  border-radius: 4px;
  flex-shrink: 0;
}
.px-task__check.is-done {
  background: var(--px-accent);
  border-color: var(--px-accent);
  display: grid;
  place-items: center;
}
.px-task__check.is-done svg { width: 8px; height: 8px; color: #fff; }
.px-task__name { font-size: 0.6875rem; color: var(--px-text-soft); }
.px-task__name.is-done { color: var(--px-text-faint); text-decoration: line-through; }
.px-task__meta { margin-left: auto; font-size: 0.5625rem; color: var(--px-text-faint); white-space: nowrap; }
.px-task__meta.is-urgent { color: var(--px-amber); }

/* Mini calendar */
.px-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.px-cal__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 0.5625rem;
  color: var(--px-text-faint);
}
.px-cal__day.is-muted { opacity: 0.32; }
.px-cal__day.is-marked { background: rgba(91, 124, 250, 0.14); color: #A6B7FF; }
.px-cal__day.is-today { background: var(--px-accent); color: #fff; font-weight: 700; }

/* Floating analytics card */
.px-float-card {
  position: absolute;
  right: -22px;
  bottom: -30px;
  width: 236px;
  padding: var(--px-4);
  border: 1px solid var(--px-border-strong);
  border-radius: var(--px-r-lg);
  background: var(--px-surface-2);
  box-shadow: 0 32px 64px -24px rgba(2, 6, 23, 0.95);
  z-index: 2;
}
.px-float-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-2);
  margin-bottom: var(--px-3);
}
.px-float-card__title { font-size: 0.75rem; font-weight: 600; color: var(--px-text); }
.px-float-card__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; color: var(--px-text); line-height: 1; }
.px-float-card__unit { font-size: 0.6875rem; font-weight: 500; color: var(--px-green); margin-left: 6px; }

.px-chart { display: flex; align-items: flex-end; gap: 6px; height: 58px; margin-top: var(--px-3); }
.px-chart__bar {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: rgba(255,255,255,0.07);
  transition: background-color var(--px-transition);
}
.px-chart__bar.is-peak { background: var(--px-accent); }
.px-float-card:hover .px-chart__bar { background: rgba(255,255,255,0.11); }
.px-float-card:hover .px-chart__bar.is-peak { background: var(--px-accent-hover); }

.px-float-card__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.5625rem;
  color: var(--px-text-faint);
}

/* --------------------------------------------------------------------------
   Feature grid (3 x 2)
   -------------------------------------------------------------------------- */
.px-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--px-5);
}

.px-card {
  padding: var(--px-6);
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-lg);
  background: var(--px-surface);
  transition: border-color var(--px-transition), background-color var(--px-transition), transform var(--px-transition);
}
.px-card:hover {
  border-color: var(--px-border-strong);
  background: var(--px-surface-2);
  transform: translateY(-2px);
}

.px-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--px-border);
  border-radius: 11px;
  background: rgba(255,255,255,0.025);
  color: var(--px-accent);
  margin-bottom: var(--px-5);
  transition: border-color var(--px-transition), background-color var(--px-transition);
}
.px-card__icon svg { width: 18px; height: 18px; }
.px-card:hover .px-card__icon { border-color: var(--px-accent-border); background: var(--px-accent-soft); }

.px-card .px-body { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Automation section
   -------------------------------------------------------------------------- */
.px-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}

.px-split__copy .px-eyebrow { margin-bottom: var(--px-4); }
.px-split__copy .px-h2 { margin-bottom: var(--px-5); }
.px-split__copy .px-body { font-size: 1.0625rem; line-height: 1.7; max-width: 44ch; }
.px-split__copy .px-btn { margin-top: var(--px-8); }

.px-flow {
  padding: var(--px-5);
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-xl);
  background: var(--px-surface);
}

.px-flow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-4);
  padding-bottom: var(--px-4);
  border-bottom: 1px solid var(--px-border);
  margin-bottom: var(--px-5);
}
.px-flow__name { font-size: 0.875rem; font-weight: 600; color: var(--px-text); }
.px-flow__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--px-green);
}
.px-flow__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--px-green);
}

/* Steps + connector rail */
.px-flow__steps { display: flex; flex-direction: column; gap: 0; }

.px-flow__step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--px-3);
  padding: 12px var(--px-4);
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-md);
  background: var(--px-surface-2);
}
.px-flow__step + .px-flow__step { margin-top: 26px; }
.px-flow__step + .px-flow__step::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -27px;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--px-border), var(--px-border-strong));
}
.px-flow__step + .px-flow__step::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -6px;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  border-right: 1px solid var(--px-border-strong);
  border-bottom: 1px solid var(--px-border-strong);
  transform: rotate(45deg);
}

.px-flow__step-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--px-border);
  border-radius: 9px;
  background: rgba(255,255,255,0.025);
  flex-shrink: 0;
}
.px-flow__step-icon svg { width: 15px; height: 15px; }
.px-flow__step--task .px-flow__step-icon { color: var(--px-text-soft); }
.px-flow__step--ai .px-flow__step-icon { color: var(--px-violet); border-color: rgba(139,124,246,0.3); background: rgba(139,124,246,0.12); }
.px-flow__step--notify .px-flow__step-icon { color: var(--px-accent); border-color: var(--px-accent-border); background: var(--px-accent-soft); }

.px-flow__step-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.px-flow__step-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--px-text);
}
.px-flow__step-desc {
  display: block;
  font-size: 0.6875rem;
  color: var(--px-text-faint);
  margin-top: 2px;
}
.px-flow__step-tag {
  align-self: center;
  padding: 3px 8px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-pill);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--px-text-faint);
  white-space: nowrap;
}

/* Integrations column */
.px-integrations {
  margin-top: var(--px-5);
  padding-top: var(--px-5);
  border-top: 1px solid var(--px-border);
}
.px-integrations__label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--px-text-faint);
  margin-bottom: var(--px-3);
}
.px-integrations__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.px-integration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-sm);
  background: rgba(255,255,255,0.018);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--px-text-soft);
  transition: border-color var(--px-transition), background-color var(--px-transition);
}
.px-integration:hover { border-color: var(--px-border-strong); background: rgba(255,255,255,0.04); }
.px-integration__mark {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--px-text-muted);
  flex-shrink: 0;
}
.px-integration--more { color: var(--px-text-faint); justify-content: center; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.px-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--px-5); align-items: start; }

.px-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--px-8);
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-lg);
  background: var(--px-surface);
  transition: border-color var(--px-transition), transform var(--px-transition);
}
.px-plan:hover { border-color: var(--px-border-strong); transform: translateY(-2px); }

.px-plan--featured {
  border-color: var(--px-accent-border);
  background: var(--px-surface-2);
}
.px-plan--featured:hover { border-color: var(--px-accent); }

.px-plan__badge {
  position: absolute;
  top: -11px;
  left: var(--px-8);
  padding: 3px 10px;
  border: 1px solid var(--px-accent-border);
  border-radius: var(--px-r-pill);
  background: #0F1729;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93A9FF;
}

.px-plan__name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--px-text-muted); }
.px-plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--px-4); }
.px-plan__amount { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.035em; color: var(--px-text); line-height: 1; }
.px-plan__period { font-size: 0.875rem; color: var(--px-text-faint); }
.px-plan__desc { font-size: 0.875rem; color: var(--px-text-muted); margin-top: var(--px-3); min-height: 42px; }

.px-plan .px-btn { margin-top: var(--px-6); }

.px-plan__list {
  display: flex;
  flex-direction: column;
  gap: var(--px-3);
  margin-top: var(--px-6);
  padding-top: var(--px-6);
  border-top: 1px solid var(--px-border);
}
.px-plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--px-text-soft);
}
.px-plan__list svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--px-accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.px-footer {
  border-top: 1px solid var(--px-border);
  padding-block: var(--px-10);
  background: var(--px-bg-soft);
}
.px-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-4);
}
.px-footer__copy { font-size: 0.8125rem; color: var(--px-text-faint); }
.px-footer__links { display: flex; flex-wrap: wrap; gap: var(--px-6); }
.px-footer__links a { font-size: 0.8125rem; color: var(--px-text-muted); transition: color var(--px-transition); }
.px-footer__links a:hover { color: var(--px-text); }

/* --------------------------------------------------------------------------
   Scroll reveal (progressive enhancement, fail-safe)
   Content is fully visible by default so the page is readable with JS off or
   if the observer never fires. js/planexa-landing.js adds `.js` to <html>
   before paint, which is what actually engages the hidden start state.
   -------------------------------------------------------------------------- */
.js .px-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .px-reveal.is-visible { opacity: 1; transform: none; }
.px-reveal--1 { transition-delay: 70ms; }
.px-reveal--2 { transition-delay: 140ms; }
.px-reveal--3 { transition-delay: 210ms; }
.px-reveal--4 { transition-delay: 280ms; }
.px-reveal--5 { transition-delay: 350ms; }

/* Hero copy/element entrance — same easing as .px-reveal but staggered
   immediately on load rather than on scroll. */
.js .px-hero [data-hero] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1), transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
.px-hero [data-hero].is-visible { opacity: 1; transform: none; }
.px-hero [data-hero="2"] { transition-delay: 90ms; }
.px-hero [data-hero="3"] { transition-delay: 180ms; }
.px-hero [data-hero="4"] { transition-delay: 270ms; }
.px-hero [data-hero="5"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .planexa-landing *,
  .planexa-landing *::before,
  .planexa-landing *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .px-reveal, .px-reveal { opacity: 1; transform: none; }
  .js .px-hero [data-hero], .px-hero [data-hero] { opacity: 1; transform: none; }
  .px-preview__frame { transform: none; }
}

/* --------------------------------------------------------------------------
   Download / install
   -------------------------------------------------------------------------- */
/* One quiet panel, matching the feature cards: no gradient, no glow, so the
   primary CTA stays the loudest thing in the section. */
.px-download {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--px-12);
  padding: var(--px-10);
  border: 1px solid var(--px-border);
  border-radius: var(--px-r-xl);
  background: var(--px-surface);
}

.px-download__copy { max-width: 62ch; }
.px-download__copy .px-h2 { margin-top: var(--px-4); }
.px-download__copy .px-body { margin-top: var(--px-4); }

.px-download__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--px-3) var(--px-6);
  margin-top: var(--px-6);
}

.px-download__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--px-2);
  font-size: 0.875rem;
  color: var(--px-text-soft);
}

.px-download__list svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--px-accent);
}

.px-download__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--px-3);
  flex-shrink: 0;
}

.px-download__note {
  margin: 0;
  max-width: 30ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--px-text-muted);
}

/* --------------------------------------------------------------------------
   Responsive — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .px-hero__grid { grid-template-columns: 1fr; gap: 56px; }
  .px-download { flex-direction: column; align-items: flex-start; gap: var(--px-8); }
  .px-download__copy { max-width: 640px; }
  .px-download__action { width: 100%; align-items: flex-start; }
  .px-hero__copy { max-width: 620px; }
  .px-preview__frame { transform: none; }
  .px-float-card { right: 0; bottom: -24px; }
  .px-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-split { grid-template-columns: 1fr; gap: 48px; }
  .px-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-pricing .px-plan:last-child { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; width: 100%; }
}

@media (max-width: 900px) {
  .px-nav__menu { display: none; }
  .px-nav__toggle { display: grid; }
  .px-nav__right .px-btn--ghost,
  .px-nav__right .px-btn--secondary { display: none; }
  /* …but the install button is the one secondary action worth keeping here. */
  .px-nav__right .px-btn--secondary.px-nav__install { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   Responsive — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .planexa-landing { --px-gutter: 18px; }

  .px-download { padding: var(--px-6); }
  .px-download__action { align-items: stretch; }
  .px-download__action .px-btn { width: 100%; }
  .px-download__note { max-width: none; text-align: left; }

  /* The drawer already carries both auth actions, so the navbar keeps only
     the mark, search and the menu toggle instead of doubling up. */
  .px-nav__right .px-btn--primary { display: none; }
  /* Below 720px the drawer carries the install action, so drop it from the
     bar before it crowds the brand and the toggle. The selector matches the
     one in the 900px block class-for-class — a weaker selector here would
     lose on specificity and the button would never go away. */
  .px-nav__right .px-btn--secondary.px-nav__install { display: none; }

  .px-grid-3,
  .px-pricing { grid-template-columns: 1fr; }
  .px-pricing .px-plan:last-child { max-width: none; }

  .px-hero__actions { width: 100%; }
  .px-hero__actions .px-btn { width: 100%; }

  .px-app { grid-template-columns: 1fr; }
  .px-app__side { display: none; }
  .px-app__panes { grid-template-columns: 1fr; }
  .px-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-app__main { padding: var(--px-3); }

  .px-float-card {
    position: static;
    width: 100%;
    margin-top: var(--px-4);
    box-shadow: none;
  }

  .px-integrations__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .px-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-brand span { display: none; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .px-nav, .px-drawer, .px-btn { display: none !important; }
  .planexa-landing { background: #fff; color: #000; }
}