/* ===== PROPERTY MANAGEMENT SOFTWARE PAGE (platform overview) ===== */

.pms-lede{max-width:820px}

/* Tier badge: states honestly which plan carries a capability. */
.tier-badge{
  display:inline-block;margin-left:8px;vertical-align:middle;
  font-family:var(--font-body);font-size:11px;font-weight:400;
  letter-spacing:1px;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
  background:rgba(38,55,244,.08);color:var(--system-blue);
  white-space:nowrap;
}

/* ===== HERO CAPABILITY CARDS =====
   Deliberately not the stat-card pattern. Stat cards read as a promise of a
   number, and Scaalr outcome statistics are banned, so a card shaped like a
   metric that holds a paragraph reads hollow. These are plain capability
   statements at body scale. */
.pms-cap-grid{
  margin-top:48px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;
}
.pms-cap-card{
  padding:24px 26px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);
}
.pms-cap-title{
  font-family:var(--font-heading);font-weight:700;font-size:17px;line-height:1.4;
  color:#fff;margin-bottom:8px;
}
.pms-cap-card p{font-size:15px;font-weight:400;color:rgba(255,255,255,.7);line-height:1.7}
.pms-cap-card .tier-badge{background:rgba(232,255,100,.12);color:var(--chartreuse);margin-left:0;margin-top:10px}

.pms-hero-note{margin-top:16px;font-size:14px;font-weight:400;color:rgba(255,255,255,.6)}

/* Two-column prose block for the fit-and-migration section. */
.pms-fit{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin-top:8px;
}
.pms-fit-item{
  padding:22px 24px;background:var(--white);
  border:1px solid var(--indigo-a08);border-radius:var(--radius-sm);
}
.pms-fit-item h3{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--indigo)}
.pms-fit-item p{font-size:14px;font-weight:400;color:var(--indigo-a55);line-height:1.75}

/* Closes the fit section on the low-commitment entry point, ahead of pricing. */
.pms-start{
  margin-top:36px;padding:24px 28px;
  background:rgba(38,55,244,.04);
  border-left:3px solid var(--system-blue);
  border-radius:var(--radius-sm);
}
.pms-start p{font-size:15px;font-weight:400;color:var(--indigo-a60);line-height:1.8;margin:0}

.pms-crosslink{margin-top:40px;font-size:15px;line-height:1.8;color:var(--indigo-a60)}

/* ===== MID-PAGE CALL TO ACTION BAND ===== */
.pms-cta-band{
  margin-top:48px;padding:28px 32px;
  background:rgba(38,55,244,.04);
  border:1px solid var(--indigo-a08);border-radius:var(--radius-sm);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.pms-cta-band p{font-size:16px;font-weight:400;color:var(--indigo);line-height:1.7;margin:0;max-width:540px}
.pms-cta-band-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ===== PRICING CARDS =====
   Ported from home.css so this page can carry the ask without loading the
   whole home stylesheet. Class names match the home page on purpose: the
   chevron and card-glow rules for .pricing-card already live in global.css.
   If the home pricing cards are restyled, update both files. */
.pricing-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:52px;align-items:start;
}
.pricing-card{
  background:var(--white);
  border:1px solid var(--indigo-a10);
  border-radius:var(--radius);
  padding:36px 30px 40px;
  display:flex;flex-direction:column;gap:20px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 24px var(--indigo-a04);
  transition:transform .4s var(--ease-out-expo),border-color .3s,box-shadow .4s var(--ease-out-expo);
}
.pricing-card:hover{
  transform:translateY(-6px);
  border-color:rgba(38,55,244,.2);
  box-shadow:0 20px 50px rgba(38,55,244,.08),0 6px 16px var(--indigo-a06);
}
.pricing-card-featured{
  border-color:var(--system-blue);
  box-shadow:0 20px 50px rgba(38,55,244,.12),0 4px 16px var(--indigo-a06);
}
.pricing-badge{
  position:absolute;top:16px;right:16px;
  padding:4px 14px;border-radius:20px;
  font-size:12px;font-weight:400;
  background:var(--system-blue);color:#fff;
  letter-spacing:.5px;
}
.pricing-header h3{font-weight:700;font-size:22px;color:var(--indigo);margin-bottom:8px}
.pricing-desc{font-size:14px;font-weight:400;line-height:1.75;color:var(--indigo-a70)}
.pricing-price{display:flex;flex-direction:column;gap:4px}
.price-amount{
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(28px,3vw,36px);color:var(--indigo);
}
.price-unit{
  font-family:var(--font-heading);font-weight:400;
  font-size:16px;color:var(--indigo-a65);display:inline;margin-left:2px;
}
.price-sub{font-size:14px;font-weight:400;color:var(--indigo-a70)}
.pricing-meta{list-style:none;display:flex;flex-direction:column;gap:6px}
.pricing-meta li{
  font-size:13px;font-weight:400;color:var(--indigo);
  display:flex;align-items:center;gap:8px;
}
.pricing-meta li::before{
  content:'';width:6px;height:6px;border-radius:3px;
  background:var(--system-blue);flex-shrink:0;
}
.pricing-card .btn{align-self:stretch;justify-content:center}
.pricing-features{border-top:1px solid var(--indigo-a12);padding-top:20px;margin-top:auto}
.pricing-features-label{
  font-family:var(--font-heading);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:1.5px;
  color:var(--system-blue);margin-bottom:14px;
}
.pricing-features ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.pricing-features li{
  font-size:14px;font-weight:400;line-height:1.65;
  color:var(--indigo-a75);padding-left:18px;position:relative;
}
.pricing-features li::before{
  content:'\2713';position:absolute;left:0;top:0;
  color:var(--system-blue);font-weight:600;font-size:14px;
}
.pricing-features a{color:var(--system-blue);text-decoration:underline;text-underline-offset:2px}

@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr}
  /* Home promotes the featured Growth card to the top of the mobile stack.
     This page leads with the free tier, and every CTA on it says "start free",
     so Starter stays first here or the stack contradicts the button. */
  .pricing-card-featured{order:0}
  .pms-cta-band{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  .pms-cta-band-actions{width:100%}
  .pms-cta-band-actions .btn{width:100%;justify-content:center}
}

/* Presentation law 3: degrade to readable. The scroll reveal must never be
   the reason a paid visitor lands on a page that looks blank. */
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{
    opacity:1;transform:none;transition:none;
  }
}