/* ==========================================================================
   One-plan pricing section + shared modal shell.
   Loaded by index.html and, via scripts/generate.js, all 30 persona pages.
   Base .ls-* / .vp-* diagram styles stay in styles.css; the Lead Sync and
   AI Voice bodies are cloned into .mo-body, so those selectors still apply.
   ========================================================================== */

/* ---------- section ---------- */
.pr-wrap{ max-width: 720px; margin: 0 auto; text-align: center; }
.pr-h2{ font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
        font-weight: 600; color: var(--ink); margin: 0 0 26px; }

/* ---------- segmented selector ---------- */
.pr-seg{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
         background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
         padding: 6px; margin: 0 auto 26px; max-width: 560px; }
.pr-seg-opt{ appearance: none; border: 1px solid transparent; background: transparent;
             border-radius: 10px; padding: 11px 8px; cursor: pointer; text-align: center;
             font-family: inherit; color: var(--muted); transition: background .18s, color .18s, box-shadow .18s; }
.pr-seg-opt:hover{ color: var(--ink); }
.pr-seg-opt[aria-checked="true"]{ color: var(--ink);
             /* a whisper of brand tint in the fill, a soft purple ring, and a
                neutral drop, so the selected option lifts without shouting */
             background: linear-gradient(180deg, #FFFFFF 0%, #FBFAFF 100%);
             border-color: rgba(102, 87, 204, .30);
             box-shadow: 0 0 0 3px rgba(102, 87, 204, .07),
                         0 3px 10px rgba(15, 25, 50, .07); }
.pr-seg-name{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.pr-seg-sub{ display: block; font-family: var(--font-mono); font-size: 10.5px;
             letter-spacing: 0.03em; margin-top: 3px; color: var(--muted); }
.pr-seg-opt[aria-checked="true"] .pr-seg-sub{ color: var(--ink-2); }
.pr-seg-sub.pr-save,
.pr-seg-opt[aria-checked="true"] .pr-seg-sub.pr-save{ color: var(--green); }
.pr-seg-opt:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- price ---------- */
.pr-price{ font-size: clamp(56px, 9vw, 82px); font-weight: 600; letter-spacing: -0.035em;
           line-height: 1; color: var(--ink); display: flex; align-items: baseline;
           justify-content: center; gap: 2px; }
.pr-price .pr-cur{ font-size: .42em; font-weight: 500; color: var(--muted); align-self: flex-start;
           margin-top: .18em; }
.pr-price .pr-unit{ font-size: .2em; font-weight: 500; color: var(--muted); letter-spacing: 0;
           font-family: var(--font-mono); margin-left: 4px; }
.pr-billed{ font-size: 14px; color: var(--muted); margin: 12px 0 22px; min-height: 21px;
            text-wrap: balance; }

.pr-cta{ min-width: 210px; }
.pr-anchor{ font-size: clamp(17px, 2.1vw, 21px); font-weight: 500; letter-spacing: -0.01em;
            color: var(--ink); margin: 22px 0 0; line-height: 1.35;
            text-wrap: balance; }

/* ---------- proof row ---------- */
.pr-proof{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
           padding: 0; margin: 22px auto 0; }
.pr-proof li{ list-style: none; font-size: 13.5px; font-weight: 500;
              color: var(--muted); display: inline-flex;
              align-items: center; gap: 7px; }
.pr-proof svg{ width: 13px; height: 13px; color: var(--cyan); flex: none; }

/* ---------- six statements ---------- */
.pr-does{ margin: 56px auto 0; max-width: 900px; }
.pr-does-h{ font-size: clamp(21px, 2.6vw, 26px); font-weight: 600; letter-spacing: -0.015em;
            color: var(--ink); text-align: left; margin: 0 0 26px; }
.pr-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 30px;
          padding: 0; margin: 0; }
.pr-list li{ list-style: none; display: flex; align-items: center; gap: 13px;
             text-align: left; font-size: 15px; font-weight: 500; line-height: 1.45;
             color: var(--ink); }
.pr-ico{ width: 40px; height: 40px; border-radius: 12px; background: var(--purple-tint);
         display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pr-ico svg{ width: 20px; height: 20px; color: var(--purple); }

.pr-seeall{ display: inline-flex; align-items: center; gap: 7px; margin: 32px auto 0;
            background: none; border: none; cursor: pointer; font-family: inherit;
            font-size: 14.5px; font-weight: 600; color: var(--purple); padding: 6px 2px; }
.pr-seeall:hover{ color: var(--cyan); }
.pr-seeall:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ---------- usage ---------- */
.pr-usage{ margin: 32px 0 0; font-size: 14px; line-height: 1.55;
           color: var(--muted); text-align: left; }
.pr-usage b{ color: var(--ink); font-weight: 600; }
.pr-fn{ color: var(--purple); font-weight: 600; }
/* the asterisk glyph carries ~1px of side bearing of its own, so the box
   gaps are pulled negative to make the optical gap read tight */
sup.pr-fn{ font-size: .72em; line-height: 0; margin-left: -1px; }
.pr-usage .pr-fn{ margin-right: 1px; }

/* ---------- add-on chips ---------- */
.pr-addons{ margin: 56px auto 0; max-width: 900px; text-align: left; }
.pr-addons-h{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.pr-chips{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; }
.pr-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
          border: 1px solid var(--line-2); background: var(--paper); border-radius: 999px;
          font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink);
          cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s; }
.pr-chip:hover{ border-color: var(--purple); box-shadow: 0 4px 14px rgba(102,87,204,.13);
                transform: translateY(-1px); }
.pr-chip:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }
.pr-chip-from{ font-family: var(--font-mono); font-size: 11px; color: var(--muted); }


/* ==========================================================================
   Shared modal shell (.mo-*). Hosts "Everything included", the 5 add-ons,
   and the cloned Lead Sync / AI Voice bodies. One shell, content swaps in
   place. Never stack a second modal.
   ========================================================================== */
.mo-wrap{ position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
          justify-content: center; padding: 24px; }
.mo-wrap[hidden]{ display: none; }
.mo-backdrop{ position: absolute; inset: 0; background: rgba(15,25,50,.58); backdrop-filter: blur(4px); }
.mo-panel{ position: relative; display: flex; flex-direction: column; width: 100%;
           max-width: 780px; max-height: 88dvh; background: var(--paper); border-radius: 18px;
           box-shadow: 0 40px 90px -30px rgba(15,25,50,.5); overflow: hidden;
           animation: moIn .22s ease both; }
.mo-panel.is-wide{ max-width: 1100px; }
@keyframes moIn{ from{ opacity: 0; transform: translateY(10px) scale(.99); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .mo-panel{ animation: none; } }

/* header does not scroll */
.mo-head{ display: flex; align-items: center; gap: 12px; padding: 18px 20px;
          border-bottom: 1px solid var(--line); flex: none; }
.mo-head-ico{ width: 34px; height: 34px; border-radius: 10px; background: var(--purple-tint);
              display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mo-head-ico svg{ width: 17px; height: 17px; color: var(--purple); }
.mo-title{ font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
           margin: 0; flex: 1; min-width: 0; text-align: left; }
.mo-close{ width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line);
           background: var(--paper); color: var(--muted); cursor: pointer; display: inline-flex;
           align-items: center; justify-content: center; }
.mo-close:hover{ background: var(--bg-2); color: var(--ink); }
.mo-close:focus-visible,
.mo-back:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; }

/* back control REPLACES the header icon (320px cannot hold back + icon + title + close) */
.mo-back{ width: 34px; height: 34px; flex: none; border-radius: 10px; border: 1px solid var(--line-2);
          background: var(--paper); color: var(--ink); cursor: pointer; display: inline-flex;
          align-items: center; justify-content: center; }
.mo-back:hover{ background: var(--bg-2); border-color: var(--purple); color: var(--purple); }
/* [hidden] loses to display:inline-flex, so state it explicitly */
.mo-back[hidden], .mo-head-ico[hidden]{ display: none; }
.mo-back svg{ width: 15px; height: 15px; }

.mo-body{ flex: 1; min-height: 0; display: flex; flex-direction: column;
          overflow-y: auto; overflow-x: hidden; padding: 22px 24px 26px; }

/* ---------- "Everything included" ---------- */
.mo-groups{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
.mo-group h4{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
              text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 500; }
.mo-feats{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mo-feats li{ display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.4;
              color: var(--ink-2); }
.mo-feats svg.mo-tick{ width: 14px; height: 14px; flex: none; color: var(--cyan); }
.mo-openable{ background: none; border: none; padding: 0; margin: 0; font: inherit;
              color: var(--purple); font-weight: 500; cursor: pointer; text-align: left; min-width: 0; }
.mo-openable:hover{ text-decoration: underline; }
.mo-openable:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
.mo-openable .mo-arrow{ color: var(--purple); font-weight: 600; }
.mo-subline{ margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
             font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---------- add-on body ---------- */
.mo-lede{ font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; }
.mo-from{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
          color: var(--purple); background: var(--purple-tint); border-radius: 999px;
          padding: 5px 12px; margin: 0 0 16px; align-self: flex-start; }
.mo-bullets{ list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 9px; }
.mo-bullets li{ display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.45;
                color: var(--ink-2); }
.mo-bullets svg{ width: 14px; height: 14px; flex: none; color: var(--cyan); }

.mo-foot{ margin: auto -24px -26px; padding: 16px 24px; border-top: 1px solid var(--line);
          background: var(--paper); display: flex; align-items: center; justify-content: space-between;
          gap: 14px; flex: none; flex-wrap: wrap; }
.mo-scales{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
            color: var(--muted); margin: 0; flex: 1; min-width: 0; text-align: left; }

/* ---------- cloned Lead Sync / AI Voice bodies ----------
   addon-modals.css sizes these for their own panel: .voice-modal-body carries
   max-height:92vh + overflow:hidden, and both assume the panel scrolls. Inside
   this shell .mo-body owns scrolling, so neutralise both. */
.mo-body > .ls-modal-body,
.mo-body > .voice-modal-body{ max-height: none; overflow: visible; padding: 0; min-height: 0;
  flex: 0 0 auto; }
.mo-body .ls-graph{ min-height: 0; }

/* ---------- mobile sheet (spec section 4) ---------- */
@media (max-width: 640px){
  .mo-wrap{ padding: 0; align-items: flex-end; }
  /* height hugs the content, so a short add-on is a bottom sheet and the long
     included list still fills the screen */
  .mo-panel{ max-width: none; width: 100%; height: auto; max-height: 94dvh;
             border-radius: 18px 18px 0 0; }
  .mo-head{ padding: calc(14px + env(safe-area-inset-top)) 16px 14px; }
  .mo-body{ padding: 18px 16px 22px; }
  .mo-groups{ grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mo-foot{ position: sticky; bottom: 0; margin: auto -16px -22px; flex-direction: column;
            align-items: stretch; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .mo-scales{ text-align: center; }
  .mo-foot .btn{ width: 100%; }
}

/* ---------- section responsive ---------- */
@media (max-width: 760px){
  .pr-list{ grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 560px){
  .pr-seg{ grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pr-seg-opt{ display: flex; align-items: baseline; justify-content: space-between;
               gap: 10px; text-align: left; padding: 12px 14px; }
  .pr-seg-name, .pr-seg-sub{ display: inline-block; margin: 0; }
  .pr-proof{ gap: 9px 18px; }
  .pr-cta{ width: 100%; }
}