/* ============================================================
   Carepatron pricing add-ons — shared design system
   Tokens matched to the LIVE carepatron.com/pricing page
   (per Carlos: match the live page, not the canonical brand guide)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700&display=swap');

:root{
  /* live-page tokens */
  --purple:#7242ee;
  --purple-hover:#5b35be;
  --soft-bg:#fbfaff;          /* "most popular" / soft card bg */
  --soft-border:#ebe6fa;
  --ink:#0d073b;              /* headings + body (navy-black) */
  --muted:rgba(13,7,59,.60);
  --card:#ffffff;
  --line:#f3f4f6;            /* card border */
  --divider:#e5e7eb;         /* feature dividers */
  --page:#ffffff;
  --band:#faf9ff;            /* faint band behind the add-ons section */
  --cream:#fef6ec;           /* brand cream, used sparingly */
  --ok:#16a34a;
  --radius:3px;
  --pill:999px;
  --shadow:0 10px 15px -3px rgb(0 0 0/.10), 0 4px 6px -4px rgb(0 0 0/.05);
  --shadow-hover:0 22px 34px -14px rgb(114 66 238/.22);
  --maxw:1160px;
  --font:'Helvetica Now Display','Inter Tight',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--page);
  line-height:1.5;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--purple);text-decoration:none}
h1,h2,h3,p{margin:0}

/* ---- review chrome: prototype switcher (NOT part of the page design) ---- */
.proto-switcher{
  background:#15103a;color:#fff;font-size:13.5px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  padding:9px 18px;position:sticky;top:0;z-index:50;
}
.proto-switcher .ps-label{opacity:.62;margin-right:8px;font-weight:500;letter-spacing:.02em}
.proto-switcher a{
  color:#cdc6f5;padding:5px 11px;border-radius:var(--pill);
  font-weight:500;transition:background .15s,color .15s;white-space:nowrap;
}
.proto-switcher a:hover{background:rgba(255,255,255,.10);color:#fff}
.proto-switcher a.active{background:var(--purple);color:#fff}
.proto-switcher .ps-spacer{flex:1}

/* ---- faux Carepatron site nav ---- */
.site-nav{
  display:flex;align-items:center;gap:30px;
  max-width:var(--maxw);margin:0 auto;padding:22px 24px;
}
.wordmark{display:flex;align-items:center;gap:9px;font-weight:700;font-size:22px;color:var(--ink)}
.wordmark .dot{width:26px;height:26px;border-radius:7px;background:var(--purple);display:inline-block;position:relative}
.wordmark .dot::after{content:"";position:absolute;inset:7px;border-radius:3px;background:#fff}
.nav-links{display:flex;gap:26px;margin-left:8px}
.nav-links a{color:var(--ink);font-size:16px;font-weight:500;opacity:.8}
.nav-links a:hover{opacity:1}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
@media(max-width:820px){.nav-links{display:none}}

/* ---- layout ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:64px 0}

/* ---- pricing hero (small, above the plan row) ---- */
.price-hero{text-align:center;padding:56px 24px 8px}
.price-hero h1{font-size:48px;font-weight:400;line-height:1.15;color:var(--ink)}
.price-hero p{font-size:19px;color:var(--muted);margin-top:14px}
@media(max-width:600px){.price-hero h1{font-size:32px}}

/* ---- plan-tier row (Free / Plus / Advanced) ---- */
.plan-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:var(--maxw);margin:36px auto 0;padding:0 24px;align-items:stretch;
}
.plan-card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:40px 30px 34px;display:flex;flex-direction:column;
}
.plan-card.popular{background:var(--soft-bg);border-color:var(--soft-border)}
.plan-card .pop-tag{
  position:absolute;top:16px;right:16px;font-size:13px;font-weight:700;
  color:var(--purple);background:#fff;border:1px solid var(--soft-border);
  border-radius:var(--pill);padding:5px 12px;
}
.plan-name{font-size:30px;font-weight:400;color:var(--ink);margin-bottom:6px}
.plan-desc{font-size:16px;color:var(--muted);min-height:44px}
.plan-price{display:flex;align-items:baseline;gap:3px;margin:18px 0 4px}
.plan-price .cur{font-size:22px;font-weight:500}
.plan-price .num{font-size:42px;font-weight:700;line-height:1}
.plan-price .per{font-size:16px;color:var(--muted);font-weight:500;margin-left:4px}
.plan-sub{font-size:14px;color:var(--muted);min-height:20px}
.plan-card .btn{margin:22px 0 6px}
.plan-feats{list-style:none;padding:0;margin:8px 0 0}
.plan-feats li{
  font-size:16px;color:var(--ink);padding:11px 0;border-top:1px solid var(--divider);
  display:flex;gap:10px;align-items:flex-start;
}
.plan-feats li:first-child{border-top:0}
.plan-feats svg{flex:0 0 auto;margin-top:3px}
@media(max-width:880px){.plan-row{grid-template-columns:1fr;max-width:460px}}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font);font-size:16px;font-weight:700;cursor:pointer;
  border-radius:var(--pill);padding:13px 26px;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s,transform .12s,box-shadow .15s;
  text-align:center;line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn-block{width:100%}
.btn-primary{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-primary:hover{background:var(--purple-hover);border-color:var(--purple-hover)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:#fbfbfe}
.btn-soft{background:#fff;color:var(--purple);border-color:var(--soft-border)}
.btn-soft:hover{background:var(--soft-border)}
.btn-ghost{background:transparent;color:var(--purple);border:0;padding:13px 8px}
.btn-ghost:hover{color:var(--purple-hover)}
.btn-ghost .arr{transition:transform .15s}
.btn-ghost:hover .arr{transform:translateX(3px)}

/* ---- add-ons section scaffolding ---- */
.addons{background:var(--band);padding:72px 0 84px}
.addons-head{text-align:center;max-width:680px;margin:0 auto 40px;padding:0 24px}
.eyebrow{
  display:inline-block;font-size:14px;font-weight:700;color:var(--purple);
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:14px;
}
.addons-title{font-size:38px;font-weight:400;color:var(--ink);line-height:1.2}
.addons-sub{font-size:18px;color:var(--muted);margin-top:14px}
@media(max-width:600px){.addons-title{font-size:28px}}

.addon-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  max-width:980px;margin:0 auto;padding:0 24px;align-items:stretch;
}
@media(max-width:760px){.addon-grid{grid-template-columns:1fr;max-width:480px}}

/* ---- generic add-on card ---- */
.addon-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px 32px 32px;display:flex;flex-direction:column;
  transition:box-shadow .2s,transform .2s;
}
.addon-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.addon-ico{
  width:46px;height:46px;border-radius:11px;background:var(--soft-bg);
  display:flex;align-items:center;justify-content:center;color:var(--purple);margin-bottom:18px;
}
.addon-name{font-size:24px;font-weight:700;color:var(--ink)}
.addon-tag{
  font-size:12.5px;font-weight:700;color:var(--purple);background:var(--soft-bg);
  border-radius:var(--pill);padding:4px 11px;margin-left:10px;vertical-align:middle;
  text-transform:uppercase;letter-spacing:.06em;
}
.addon-desc{font-size:16.5px;color:var(--muted);margin-top:10px;line-height:1.5}

/* price block (handles both flat and hybrid shapes) */
.addon-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin:20px 0 2px}
.addon-price .cur{font-size:20px;font-weight:500}
.addon-price .num{font-size:38px;font-weight:700;line-height:1}
.addon-price .per{font-size:16px;color:var(--muted);font-weight:500}
.addon-price .plus{font-size:24px;color:var(--ink);font-weight:400;margin:0 6px;opacity:.55}
.addon-subprice{font-size:14.5px;color:var(--muted);min-height:20px}

/* feature list */
.feature-list{list-style:none;padding:0;margin:22px 0 0}
.feature-list li{
  font-size:16px;color:var(--ink);padding:11px 0;border-top:1px solid var(--divider);
  display:flex;gap:11px;align-items:flex-start;
}
.feature-list svg{flex:0 0 auto;margin-top:3px}
.addon-card .btn{margin-top:24px}
.addon-foot{margin-top:auto}

/* ---- billing toggle ---- */
.billing-toggle{
  display:inline-flex;align-items:center;gap:0;background:#fff;border:1px solid var(--divider);
  border-radius:var(--pill);padding:4px;margin:0 auto;
}
.billing-toggle button{
  font-family:var(--font);font-size:15px;font-weight:700;border:0;background:transparent;
  color:var(--muted);padding:9px 20px;border-radius:var(--pill);cursor:pointer;transition:background .15s,color .15s;
}
.billing-toggle button.on{background:var(--purple);color:#fff}
.save-pill{font-size:13px;font-weight:700;color:var(--ok);margin-left:6px}

/* ---- footer ---- */
.site-foot{background:#15103a;color:#cdc6f5;text-align:center;padding:40px 24px;font-size:14px}
.site-foot a{color:#cdc6f5;text-decoration:underline}

/* ---- small note / disclaimer ---- */
.fineprint{font-size:13.5px;color:var(--muted);text-align:center;max-width:760px;margin:30px auto 0;padding:0 24px}

/* ---- checkmark helper colour via currentColor handled inline ---- */