/* frontdoor/css/tier-cards.css — SHARED SaaS pricing-card styling.
 *
 * Loaded LAST on BOTH the sales page (landing.html, after landing.css) and the
 * photographer portal (dashboard.html, after app.css) so these canonical rules
 * win the cascade and the cards render IDENTICALLY on both surfaces. Card
 * content + DOM come from frontdoor/js/tier-cards.js. Uses design tokens that
 * both landing.css and app.css already define (--white, --border, --radius-md,
 * --green, --green-dark, --green-light, --gray, --black, --ivris-green-600).
 */

.tier-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:18px; align-items:stretch;}
.tier-card{background:var(--white); border:1.5px solid var(--border); border-radius:var(--radius-md);
  padding:26px 22px; display:flex; flex-direction:column; gap:10px; position:relative;}
.tier-card.highlight{border-color:var(--green); box-shadow:0 10px 34px rgba(106,173,63,.14);}
.tier-card.current-tier{border-color:var(--green); box-shadow:0 0 0 3px var(--green-light);}

.tier-flag{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--ivris-green-600); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:3px 12px; border-radius:20px; white-space:nowrap;}
.tier-name{font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--black);}
.tier-price{font-size:32px; font-weight:700; color:var(--black); line-height:1;}
.tier-price small{font-size:14px; font-weight:500; color:var(--gray);}
.tier-homes{font-size:13.5px; font-weight:600; color:var(--green-dark);}
.tier-feats{list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--gray); line-height:2; flex:1;}
.tier-feats li::before{content:'\2713  '; color:var(--green); font-weight:700;}
.tier-feats li.no{color:#b6b6b0;}
.tier-feats li.no::before{content:'\2715  '; color:#c9c9c3;}

/* Card CTA — scoped to .tier-card so it standardizes the button on both surfaces
   without disturbing each page's global .btn used elsewhere. */
.tier-card .btn{width:auto; padding:13px 22px; font-size:15px; box-shadow:0 6px 18px rgba(106,173,63,.28);}
.tier-card .btn.block{width:100%;}
.tier-card .btn.ghost{background:transparent; color:var(--ivris-green-600); border-color:var(--green); box-shadow:none;}
.tier-card .ivris-badge{align-self:flex-start;}

/* Monthly/Annual switcher — a full-width row above the cards on BOTH surfaces. */
.tier-toggle{grid-column:1 / -1; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0 0 8px;}
.tier-toggle[hidden]{display:none;}
.tier-toggle-label{font-weight:600; color:var(--gray); font-size:14px; margin-right:4px;}
.tier-toggle .btn.small{padding:9px 14px; font-size:13px; box-shadow:none;}