/* AI-receptionist unlisted preview only. Do not link from public pages.
   New rules live here so ww.css and style.css versions stay put (golden tests). */
.fp-draft{background:#1D4ED8;color:#FFFFFF;border-bottom:3px solid #0F172A;padding:10px 0;font-size:15px;font-weight:650}
.fp-draft p{margin:0}
.fp-draft strong{font-weight:800}

/* Voice transcript uses the same bubbles; relabel them. */
.fo-preview .w-sms.fp-voice li.out:before{content:"Assistant";color:var(--ww-or-d)}
.fo-preview .w-sms.fp-voice li.in:before{content:"Caller";color:#5a626c}

.fo-preview .fp-confirm{display:inline-block;background:#1D4ED8;color:#FFFFFF;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;margin-left:6px;vertical-align:2px}

/* What it does / doesn't: two-column on desktop, tickets stay sharp. */
.fp-does{display:grid;gap:22px}
.fp-does .feat{background:#fff}
.fp-wont{background:#fff;border:3px solid var(--ww-char,#0F172A);box-shadow:8px 8px 0 #c8102e;padding:22px 26px;max-width:720px}
.fp-wont h3{margin:0 0 10px}
.fp-wont .crosses{margin:0}

/* Three price tiers: receptionist featured, Solo and Pro as text-back only. */
.fo-preview .fp-tiers{display:grid;gap:26px;align-items:stretch}
.fo-preview .fp-rec{border-color:var(--ww-or,#1D4ED8);box-shadow:8px 8px 0 var(--ww-hv,#3B82F6);background:#fff}
.fo-preview .fp-rec .price{font-size:clamp(48px,6vw,64px)}
.fo-preview .fp-muted-plan{opacity:.96}
.fo-preview .fp-label{font:700 13px/1.35 var(--body);color:#3b3f45;margin:0 0 10px}
.fo-preview .w-pricenotes{margin-top:22px}

/* Demo disclosure under the hero, same charcoal as the local-pages strip. */
.fp-demo{background:#fff;color:#334155;padding:14px 0 16px;border-top:1px solid #CBD5E1}
.fp-demo p{margin:0;max-width:74ch;font-size:15px}
.fp-demo a{color:#1D4ED8;font-weight:700;text-decoration:none}
.fp-demo a:hover{text-decoration:underline}
.fp-demo b{color:#0F172A}

/* Keep the sticky mobile bar from covering the finale. */
@media (max-width:700px){
  .fo-preview{padding-bottom:72px}
}

@media (min-width:860px){
  .fp-does{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-preview .fp-tiers{grid-template-columns:1.15fr 1fr 1fr}
  .fo-preview .w-line.fp-steps{grid-template-columns:repeat(3,1fr);gap:22px}
  .fo-preview .w-line.fp-steps li{border-bottom:0}
}
@media (max-width:859px){
  .fp-does{grid-template-columns:1fr}
}

.fo-preview .w-trades a{color:#93C5FD;font-weight:700}
.fo-preview .w-trades a:hover{text-decoration:underline}

/* Live homepage pushes .w-call to second on desktop (trial is first). Here the demo call is the primary CTA. */
@media (min-width:860px){
  .fo-preview .w-hero .ctas .w-call{order:0}
}

/* Equal-height tiers: park the CTA (and any fineprint under it) at the bottom. */
.fo-preview .fp-tiers .w-tier{display:flex;flex-direction:column}
.fo-preview .fp-tiers .w-tier > .btn,
.fo-preview .fp-tiers .w-tier > .fp-cta{margin-top:auto}

/* Trial badge: a small chip, not a full-width yellow banner (flex stretch was widening <p class="trial">). */
.fo-preview .fp-tiers .trial{align-self:flex-start;width:auto;max-width:max-content}
.fo-preview .fp-tiers .planterms{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 12px}
.fo-preview .fp-tiers .nosetup{font:700 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#3b3f45}
.fo-preview .fp-inc{margin:10px 0 2px;font:700 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#5a626c}
.fo-preview .fp-tiers .crosses{margin:0 0 14px}
.fo-preview .fp-tiers .crosses li{color:#3b3f45}
.fo-preview .fp-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 16px;width:100%;max-width:100%}
.fo-preview .w-pricenotes{min-width:0;max-width:100%}
.fo-preview .w-pricenotes .w-tiertable{min-width:520px}
.fo-preview .w-pricenotes .w-tablehead{margin:0 0 8px}
/* The 520px table must not widen the page (and the heading) on phones. */
@media (max-width:859px){
  .fo-preview .w-pricing{overflow-x:hidden}
  .fo-preview .w-pricing h2{max-width:100%}
}