/* ===== 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}

/* ===== FAST-START STRIP =====
   Ad -> page message match for the "days, not months" promise. Three concrete,
   product-true steps; no timeline guarantee beyond the framing already carried
   in approved ad copy. */
.pms-faststart-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;margin-top:8px;
}
.pms-faststart-step{
  padding:24px 26px;background:var(--white);
  border:1px solid var(--indigo-a08);border-radius:var(--radius-sm);
}
.pms-faststart-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:15px;margin-bottom:12px;
  background:rgba(38,55,244,.08);color:var(--system-blue);
  font-family:var(--font-heading);font-weight:700;font-size:14px;
}
.pms-faststart-step h3{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--indigo)}
.pms-faststart-step p{font-size:14px;font-weight:400;color:var(--indigo-a55);line-height:1.75}
.pms-faststart-cta{margin-top:32px}

/* ===== ARTIFACTS MODULE =====
   Concrete records the system produces on its own, rendered as small excerpts,
   each linking out to the insight behind it. Artifacts, never testimonials.
   Doubles as the pages-per-session lever: this page used to be a dead end. */
.pms-artifacts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;margin-top:8px;
}
.pms-artifact{display:flex;flex-direction:column}
.pms-artifact-frame{
  background:var(--white);
  border:1px solid var(--indigo-a10);border-radius:var(--radius-sm);
  padding:18px 20px;box-shadow:0 4px 24px var(--indigo-a04);
  flex-grow:1;
}
.pms-artifact-frame-title{
  font-family:var(--font-heading);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--system-blue);
  margin-bottom:6px;
}
.pms-artifact-row{padding:10px 0}
.pms-artifact-row + .pms-artifact-row{border-top:1px solid var(--indigo-a08)}
.pms-artifact-row p{font-size:14px;font-weight:400;color:var(--indigo-a70);line-height:1.7;margin:6px 0 0}
.pms-artifact-row p strong{color:var(--indigo);font-weight:700}
.pms-artifact-flag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:1px;
  padding:2px 8px;border-radius:999px;margin-right:8px;vertical-align:middle;
  background:rgba(193,73,35,.1);color:var(--burnt-orange);
}
.pms-artifact-time{font-size:11px;font-weight:400;color:var(--indigo-a55);letter-spacing:.5px}
.pms-artifact-row-action p{font-size:13px;color:var(--indigo)}
.pms-artifact-ledger{
  margin:4px 0;padding:10px 14px;
  border:1px dashed var(--indigo-a18);border-radius:8px;
}
.pms-artifact-ledger p{
  display:flex;justify-content:space-between;gap:12px;
  margin:0;font-size:13px;font-weight:400;color:var(--indigo);line-height:1.9;
}
.pms-artifact-ledger span:first-child{color:var(--indigo-a70)}
.pms-artifact-caption{margin-top:14px;font-size:14px;font-weight:400;color:var(--indigo-a60);line-height:1.7}
.pms-artifact-link{
  margin-top:8px;font-size:14px;font-weight:600;color:var(--system-blue);
  text-decoration:underline;text-underline-offset:3px;
}
.pms-artifact-link::after{content:' \2192'}

/* ===== GEO VARIANTS =====
   Used only by Views/PropertyManagementSoftware/Geo.cshtml. Shared by all five geos;
   nothing in here is per-market, so there is no per-geo CSS to keep in sync. */

/* The currency band. Sits directly under the hero because the billed currency is the
   single thing a non-US visitor most needs resolved before reading a price. */
.geo-currency-band{
  background:var(--warm-grey);
  border-bottom:1px solid var(--indigo-a08);
  padding:28px 0;
}
.geo-currency-inner{display:flex;flex-direction:column;gap:10px;max-width:900px}
.geo-currency-headline{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.geo-currency-chip{
  display:inline-flex;align-items:center;
  background:var(--indigo);color:#fff;
  font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.08em;padding:6px 11px;border-radius:5px;flex-shrink:0;
}
.geo-currency-headline p{font-size:17px;font-weight:400;color:var(--indigo);line-height:1.6;margin:0}
.geo-currency-headline strong{font-weight:700}
.geo-currency-note{font-size:14px;font-weight:400;color:var(--indigo-a70);line-height:1.75;margin:0}

/* The indicative local figure inside the Growth pricing card. Visually subordinate to the
   USD price above it, because the USD price is the one that gets charged. */
.price-local{
  font-size:13px;font-weight:400;color:var(--indigo-a60);
  line-height:1.6;padding-top:6px;border-top:1px dashed var(--indigo-a18);margin-top:8px;
}

/* The jurisdiction band: named forms and named regulators, the geo-specific proof. */
.geo-jurisdiction{background:var(--indigo-a025)}
.geo-marker-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;margin-top:8px;
}
.geo-marker{
  background:#fff;border:1px solid var(--indigo-a10);border-radius:12px;
  padding:20px 22px;display:flex;flex-direction:column;gap:7px;
}
.geo-marker-market{
  font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:15px;
  color:var(--indigo);margin:0;
}
.geo-marker-paper{font-size:14px;font-weight:400;color:var(--indigo-a65);line-height:1.7;margin:0}

.geo-regulators{
  margin-top:24px;padding:20px 24px;
  background:#fff;border:1px solid var(--indigo-a10);border-radius:12px;
}
.geo-regulators-label{
  font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--system-blue);margin:0 0 8px;
}
.geo-regulators p:last-child{font-size:15px;font-weight:400;color:var(--indigo-a70);line-height:1.75;margin:0}

/* Honest limits get an accent border rather than a warning colour. They are a trust
   signal on this page, not an error state. */
.geo-caveats{
  margin-top:16px;padding:20px 24px;
  background:#fff;border:1px solid var(--indigo-a10);
  border-left:3px solid var(--burnt-orange);border-radius:12px;
}
.geo-caveats-label{
  font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--burnt-orange);margin:0 0 8px;
}
.geo-caveats p:not(.geo-caveats-label){
  font-size:15px;font-weight:400;color:var(--indigo-a70);line-height:1.75;margin:0 0 8px;
}
.geo-caveats p:last-child{margin-bottom:0}

.geo-facilitator{
  margin-top:24px;padding:22px 26px;
  background:var(--indigo);border-radius:12px;
}
.geo-facilitator p{
  font-size:15px;font-weight:400;color:rgba(255,255,255,.78);line-height:1.8;margin:0;
}

@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}
  .geo-currency-headline{gap:10px}
  .geo-currency-headline p{font-size:15px}
  .geo-marker-grid{grid-template-columns:1fr}
  .geo-facilitator{padding:18px 20px}
}

/* Ported from home.css with the rest of the pricing block. Side by side, each card
   used to size to its own content, so the three CTAs landed at three different
   heights. Sharing the grid's row tracks lines up header, price, meta, CTA and
   features across all columns. Every card is five in-flow rows; the badge and glow
   are absolute. Browsers without subgrid keep the previous behaviour. */
@supports (grid-template-rows:subgrid){
  @media(min-width:901px){
    .pricing-grid{
      grid-template-rows:repeat(5,auto);
      align-items:stretch;row-gap:20px;column-gap:24px;
    }
    .pricing-grid > .pricing-card{
      grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:20px;
    }
    /* The three CTAs are naturally 49-57px (the Scale one is an anchor and
       inherits a different line-height), so stretch them to one shared height. */
    .pricing-grid > .pricing-card .btn{align-self:stretch;justify-self:stretch}
    .pricing-grid > .pricing-card .pricing-features{margin-top:0}
  }
}

/* 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;
  }
}