/* ReplyBox landing v2 · styles for pricing.html only. It loads after landing.css, which holds the tokens and every
   shared part this page uses as it is: the header, .hero-bg, .band, .btn--wa, .h2 / .kicker / .lead, .faq, .cta, the footer.
   Every class here starts with pr-. Phone first. Nothing here is fixed or sticky. Motion is the shared
   data-enter / data-reveal only.
   Order: tokens · hero · plan card · line calculator · chips · add-ons · compare table · questions · final call.
   Small print here is at least rgba(fg,.7) on white and mint, which measures 4.5:1 or more. */

:root{
  --pr-ai:#6d28d9; --pr-ai-bg:#f6f1ff; --pr-ai-line:#e2d3fd;     /* reason 1: "Uses AI": the site's one AI colour (V3: violet #7c3aed -> fuchsia #d946ef; this is its ink) */
  --pr-co:#12352c; --pr-co-bg:#e5eeea; --pr-co-line:#c9d9d3;     /* reason 2: "Built for your company" */
  --pr-add:#7a4d00; --pr-add-bg:#fff1cf; --pr-add-line:rgba(122,77,0,.2);   /* the "Add-on" chip: the home page's amber */
  --pr-card:0 10px 40px -20px rgba(8,40,30,.2),0 0 0 1px rgba(7,19,15,.05);
}

/* -------------------------------------------------------------------- hero */
.pr-hero{position:relative;padding-top:12px;text-align:center}
.pr-hero__pill{font-weight:600}
.pr-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16)}
.pr-hero__title{max-width:920px;margin:14px auto 0;font-family:var(--f-head);font-size:clamp(2rem,8.8vw,2.5rem);font-weight:700;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.pr-hero__sub{max-width:760px;margin:12px auto 0;font-size:16px;line-height:1.55;color:rgba(var(--fg-rgb),.72);text-wrap:balance}
@media (max-width:767px){.pr-hero__sub{display:none}} /* a phone: the price card right below says the same two prices (round 28) */
@media (min-width:640px){
  .pr-hero{padding-top:24px}
  .pr-hero__title{max-width:1100px;margin-top:20px;font-size:clamp(2.5rem,4.3vw,3.6rem);line-height:1.04}
  .pr-hero__sub{margin-top:18px;font-size:18px;line-height:1.6}
}

/* a short phone (360x640): a tighter top, so the add-on summary in the price card is on the first screen (the "Pricing"
   label above the title says what the title says, so it gives way there) */
@media (max-width:599px) and (max-height:700px){
  .pr-hero{padding-top:0}
  .pr-hero__pill{display:none}
  .pr-hero__title{margin-top:0}
  .pr-hero__sub{margin-top:8px;font-size:15px;line-height:1.45}
  .pr-planwrap{margin-top:16px}
  .pr-plan__main{padding-top:16px}
  .pr-price__amt{font-size:54px}
  .pr-planwrap.wrap{padding-inline:14px}
  .pr-plan__main{padding-inline:16px}
  .pr-price{margin-top:2px}
  .pr-lines{margin-top:10px}
  .pr-sum{margin-top:10px;padding:8px 10px 2px 12px}
  .pr-sum__h{font-size:15px}
  .pr-sum__row{margin-top:4px;font-size:15px;line-height:1.4}
}
/* --------------------------------------------------------------- plan card */
.pr-planwrap{position:relative;margin-top:24px}
.pr-plan{display:grid;max-width:1010px;margin-inline:auto;overflow:hidden;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2),0 44px 80px -48px rgba(var(--accent-rgb),.75),0 16px 36px -24px rgba(8,40,30,.24)}
.pr-plan__main{padding:20px 20px 22px;background:linear-gradient(180deg,var(--t0),var(--t3))}
.pr-plan__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* the card's name is the ReplyBox logo itself */
.pr-plan__name{display:flex;align-items:center;min-height:36px}
.pr-plan__name img{display:block;width:auto;height:30px}
.pr-plan__tag{padding:4px 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2);font-size:15px;font-weight:600;line-height:1.4;color:var(--accent);white-space:nowrap}
.pr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:8px}
/* V3.2: the price figure in Plus Jakarta Sans, like every heading */
.pr-price__amt{font-family:var(--f-head);font-size:62px;font-weight:700;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.pr-price__per{font-size:18px;font-weight:500;color:rgba(var(--fg-rgb),.7)}
.pr-lines{display:grid;gap:8px;margin-top:16px}
.pr-lines li,.pr-inc li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.4}
.pr-lines li{font-size:17px;font-weight:600}
.pr-mark{display:inline-flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px;margin-top:1px;border-radius:7px;font-size:14px}
.pr-mark .ico{stroke-width:3.2}
.pr-mark--in{background:var(--accent);color:#fff}
.pr-mark--plus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.pr-plan__note{margin-top:10px;padding-left:2px;font-size:15px;line-height:1.45;color:rgba(var(--fg-rgb),.72)}
/* V3.1: the free-trial line above the WhatsApp button (CY D2, 7 Oct; no length or terms) */
.pr-plan__trial{display:flex;align-items:flex-start;gap:8px;margin:12px 0 2px;font-size:15.5px;font-weight:600;line-height:1.45;color:var(--accent-dk)}
.pr-plan__trial .ico{flex:none;margin-top:3px;font-size:17px;color:var(--accent)}
/* the owner's worked example, on its own line under the note */
.pr-plan__eg{display:block;margin-top:2px;font-weight:600;color:rgba(var(--fg-rgb),.86)}
/* no lone last word when one of these wraps on a narrow phone */
.pr-plan__note>span{display:block}
.pr-lines li>span:last-child,.pr-plan__note>span,.pr-plan__eg{text-wrap:balance}
/* the add-on summary: both kinds, each with examples (round 3), on the first phone screen */
.pr-sum{margin-top:12px;padding:10px 12px 4px 14px;border-radius:16px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.14)}
.pr-sum__h{font-size:15px;font-weight:700;line-height:1.35}
.pr-sum__h::after{content:":"}
:lang(zh) .pr-sum__h::after{content:"："}
.pr-sum__row{margin-top:6px;font-size:15px;line-height:1.45;color:rgba(var(--fg-rgb),.84)}
.pr-sum__row>span:last-child{margin-left:6px}
.pr-sum__row .pr-chip{gap:4px;padding:0 8px 0 6px;font-size:15px;line-height:1.5;vertical-align:1px;white-space:nowrap} /* verifier: 15 px, one line */
.pr-sum__more{margin-top:0}
/* the WhatsApp button is the site's .btn--wa; here it only fills the card */
.pr-wa{width:100%;min-height:54px;margin-top:18px;border-radius:16px;font-size:17px}

/* what the plan includes */
.pr-plan__inc{padding:16px 20px 8px}
.pr-plan__h{font-family:var(--f-head);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.pr-inc{display:grid;gap:7px;margin-top:10px}
@media (max-width:767px){.pr-inc li:nth-child(n+6){display:none}} /* a phone: five, then "See everything included" opens the full list (round 28) */
.pr-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--accent)}
.pr-more .ico{font-size:16px;stroke-width:2.4;transition:translate .2s}
.pr-plan__inc>.pr-more{margin-top:4px}
.pr-plan__proof{display:none}
@media (hover:hover){.pr-more:hover .ico{translate:2px 0}.pr-more[href^="#"]:hover .ico{translate:0 2px}}
/* two panels side by side: the price on the left, what it includes on the right, with a pointer to the add-ons */
@media (min-width:720px){
  .pr-plan{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .pr-plan__main{padding:24px}
  .pr-plan__inc{display:flex;flex-direction:column;padding:26px 26px 16px}
  .pr-inc{gap:10px;margin-top:14px}
  .pr-plan__proof{display:block;margin-top:auto;padding-top:16px;border-top:1px solid rgba(var(--fg-rgb),.08);font-size:15px;line-height:1.45;color:rgba(var(--fg-rgb),.72)}
  .pr-plan__proof b{display:block;font-weight:600;color:rgba(6,32,25,.86)}
}
@media (min-width:900px){
  .pr-planwrap{margin-top:36px}
  .pr-plan__main{padding:30px 32px}
  .pr-plan__inc{padding:32px 36px 20px}
  .pr-plan__name img{height:32px}
  .pr-price__amt{font-size:76px}
  .pr-price__per{font-size:20px}
  .pr-inc{gap:11px;margin-top:16px}
}


/* ------------------------------------------------------------------- chips */
/* 13px corners: a pill on one line, a tidy label when a long translation takes two */
.pr-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:13px;font-size:15px;font-weight:600;line-height:1.45}
.pr-chip .ico{font-size:14px;stroke-width:2.2}
.pr-chip--ai{background:var(--pr-ai-bg);box-shadow:inset 0 0 0 1px var(--pr-ai-line);color:var(--pr-ai)}
.pr-chip--co{background:var(--pr-co-bg);box-shadow:inset 0 0 0 1px var(--pr-co-line);color:var(--pr-co)}
.pr-chip--add{padding:2px 10px;background:var(--pr-add-bg);box-shadow:inset 0 0 0 1px var(--pr-add-line);color:var(--pr-add);white-space:nowrap}

/* ----------------------------------------------------------------- add-ons */
/* the shared bands, a little tighter on this page so the first add-ons are close to the price */
.pr-band{margin-top:40px;padding-block:44px 56px}
.pr-band[id],.pr-grp[id]{scroll-margin-top:84px}
.pr-quote{display:flex;align-items:flex-start;gap:10px;max-width:640px;margin:18px auto 0;padding:13px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.16),0 10px 24px -18px rgba(8,40,30,.3);font-size:15.5px;font-weight:500;line-height:1.5;text-align:left;color:rgba(var(--fg-rgb),.84);text-wrap:pretty}
.pr-quote .ico{flex:none;margin-top:2px;font-size:19px;color:var(--accent)}
.pr-agroup{margin-top:24px}
.pr-agroup__head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pr-agroup__title{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 11px;border-radius:999px;font-family:var(--f-head);font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:#fff}
.pr-agroup__title .ico{font-size:17px}
.pr-agroup--ai .pr-agroup__title{background:var(--pr-ai)}
.pr-agroup--co .pr-agroup__title{background:var(--pr-co)}
.pr-agroup__why{font-size:16px;line-height:1.5;color:rgba(var(--fg-rgb),.74)}
.pr-acards{display:grid;gap:12px;margin-top:14px}
.pr-acard{display:flex;flex-direction:column;padding:16px 18px 14px;border-radius:20px;background:#fff;box-shadow:var(--pr-card);transition:translate .35s var(--ease),box-shadow .35s}
.pr-acard__top{display:flex;align-items:flex-start;gap:12px}
.pr-acard__ico{display:inline-flex;flex:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;font-size:21px}
.pr-agroup--ai .pr-acard__ico{background:var(--pr-ai-bg);color:var(--pr-ai)}
.pr-agroup--co .pr-acard__ico{background:var(--pr-co-bg);color:var(--pr-co)}
.pr-acard__id{min-width:0}
.pr-acard__name{margin:0;font-family:var(--f-head);font-size:19px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.pr-acard__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pr-acard__desc{margin-top:10px;font-size:15px;line-height:1.55;color:rgba(var(--fg-rgb),.72)}
.pr-acard__eg{margin-top:8px}
.pr-acard__why{margin-top:8px;font-size:15px;font-weight:600;line-height:1.5;color:var(--pr-co)}
@media (max-width:767px){.pr-acard__eg,.pr-acard__why{display:none}} /* a phone: each card keeps its name and one line; the group note above says why it is an add-on (round 28) */
.pr-acard__dev{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:15px;font-weight:500;line-height:1.5;color:var(--accent)}
.pr-acard__dev .ico{margin-top:3px;font-size:17px}
.pr-acard__price{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;font-size:15px;font-weight:600;line-height:1.4}
.pr-acard__price .ico{font-size:17px;color:var(--accent)}
@media (max-width:767px){.pr-acard__price{display:none}} /* a phone: the cards stack, so the note above them says it once (round 26) */
.pr-addcta{display:flex;justify-content:center;margin-top:24px}
.pr-addcta .btn{width:100%;min-height:52px;font-weight:600;line-height:1.25;white-space:normal;text-align:center}
@media (hover:hover){.pr-acard:hover{translate:0 -3px;box-shadow:0 26px 50px -26px rgba(8,40,30,.34),0 0 0 1px rgba(7,19,15,.05)}}
@media (min-width:640px){
  .pr-acards{grid-template-columns:1fr 1fr;gap:16px}
  .pr-acard--wide{grid-column:1/-1}
  .pr-addcta .btn{width:auto}
}
@media (min-width:900px){
  .pr-band{margin-top:96px;padding-block:88px 96px}
  .pr-agroup{margin-top:40px}
  .pr-agroup__head{flex-direction:row;align-items:center;gap:14px}
  .pr-addcta{margin-top:32px}
}
@media (min-width:1180px){
  .pr-acards{grid-template-columns:repeat(4,1fr);margin-top:18px}
  .pr-acard{padding:20px 20px 18px}
  .pr-acard__top{flex-direction:column;gap:14px}
  .pr-acard--wide .pr-acard__top{flex-direction:row}
  .pr-acard__price{padding-top:16px}
  .pr-acard--wide{grid-column:span 2}
}

/* ----------------------------------------------------------- compare table */
.pr-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:16px;font-size:16px;font-weight:600}
.pr-legend li{gap:6px!important}
.pr-legend li{display:inline-flex;align-items:center;gap:8px}
.pr-jump{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}
.pr-jump__label{font-size:15px;font-weight:600;color:rgba(var(--fg-rgb),.72)}
.pr-jump ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pr-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--bg);box-shadow:0 0 0 1px rgba(7,19,15,.07);font-size:15px;font-weight:500;transition:box-shadow .2s,color .2s}
/* one grid of groups in the natural order: one column on a phone, two side by side with their tops aligned on a laptop.
   Each group shows its five strongest rows; "Show all N" (pricing.js) opens the rest. */
.pr-cols{display:grid;gap:14px;margin-top:22px}
/* the groups fade in without the shared rise, so a "Jump to:" link lands each one just under the header (a group still
   rising when the jump began ended up 26 px under the header) */
.motion .pr-grp[data-reveal]:not(.is-done){transform:none}
.pr-grp{overflow:hidden;border-radius:22px;background:var(--bg);box-shadow:0 0 0 1px rgba(7,19,15,.06)}
.js .pr-grp:not(.is-open) .pr-row--more{display:none}
@media (max-width:767px){.js .pr-grp:not(.is-open) .pr-tbl>.pr-row:nth-child(n+5){display:none}} /* a phone: three rows per group until "Show all N" opens the group (round 28) */
.pr-grp__more{display:none}
.js .pr-grp__more{display:flex;align-items:center;justify-content:center;gap:7px;width:calc(100% - 24px);min-height:44px;margin:0 12px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(7,19,15,.09);font-size:15px;font-weight:600;color:var(--accent)}
.js .pr-grp__more::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.js .pr-grp.is-open .pr-grp__more::after{margin-top:3px;transform:rotate(-135deg)}
.pr-grp__head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px}
.pr-grp__ico{display:inline-flex;flex:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(var(--accent-rgb),.14);font-size:19px;color:var(--accent)}
.pr-grp__head h3{font-family:var(--f-head);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.pr-tbl{padding:0 6px 8px}
.pr-tbl__head{display:none}
/* phones: a checklist. The tick or the Add-on chip comes first (order:-1), so the floating WhatsApp button, which sits
   at the right edge, never covers a mark. Laptops: a table with an Included column and an Add-on column. */
.pr-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;min-height:44px;padding:11px 10px;border-top:1px solid rgba(var(--fg-rgb),.07);font-size:15px;line-height:1.4}
.pr-row__name{min-width:0}
.pr-row__inc,.pr-row__add{order:-1}
.pr-row__inc{display:inline-flex;align-items:center;justify-content:center;width:22px;height:21px;font-size:19px;color:var(--accent)}
.pr-row__inc .ico{stroke-width:2.8}
.pr-row__add{display:inline-flex;justify-content:center;margin-top:-2px}
.pr-row__inc:empty,.pr-row__add:empty{display:none}
.pr-row--add{background:linear-gradient(90deg,rgba(255,241,207,.6),rgba(255,241,207,0) 80%)}
.pr-row__nm{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.pr-row__chip{display:none}
.pr-row__why{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:2px}
.pr-row__part{font-size:15px;line-height:1.45;color:rgba(var(--fg-rgb),.72)}
.pr-row__part b{font-weight:600;color:rgba(var(--fg-rgb),.86)}
@media (max-width:767px){.pr-row__part{display:none}} /* a phone: "Part of …" repeats the add-on cards above; the Add-on chip stays (round 28) */
.pr-why{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:500;line-height:1.45}
.pr-why .ico{font-size:14px;stroke-width:2.2}
.pr-why--ai{color:var(--pr-ai)}
.pr-why--co{color:var(--pr-co)}
.pr-faq__more{display:flex;justify-content:center;margin-top:18px}
@media (hover:hover){
  .pr-jump a:hover{color:var(--accent);box-shadow:0 0 0 1.5px rgba(var(--accent-rgb),.5)}
  .pr-row:hover{background-color:rgba(var(--accent-rgb),.06)}
}
@media (min-width:900px){
  .pr-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:20px;margin-top:30px}
  /* an odd last group sits centred under the others, the same width */
  .pr-cols>.pr-grp:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 10px)}
  .pr-grp__head{padding:20px 22px 12px}
  .pr-tbl{padding:0 12px 12px}
  /* one plan, so no Add-on column: an add-on row carries its chip right after its name */
  .pr-tbl__head,.pr-row{grid-template-columns:minmax(0,1fr) 84px}
  .pr-tbl__head span:nth-child(3){display:none}
  .pr-row__add{display:none!important}
  .pr-row__chip{display:inline-flex}
  .pr-tbl__head{display:grid;gap:10px;padding:0 10px 8px;font-size:15px;font-weight:600;color:rgba(var(--fg-rgb),.68)}
  .pr-tbl__head span+span{text-align:center}
  .pr-row{align-items:center;padding:9px 10px}
  .pr-row__inc,.pr-row__add{order:0;margin-top:0}
  .pr-row__inc{width:auto;height:auto}
  .pr-row__inc:empty,.pr-row__add:empty{display:block}
}

/* ------------------------------------------------------------- questions */
.no-js .faq__panel{grid-template-rows:1fr}
.no-js .faq__panel>div{visibility:visible}

/* -------------------------------------------------------------- final call */
/* the shared .cta card; this page adds one real number under it, with its period in the same line */
.pr-proof b{display:block;font-weight:600;color:rgba(6,32,25,.86)}

/* ---------------------------------------------------------- CY 4 Nov 2026 */
/* The two plan cards (partials/plans.html, styled in landing.css) lead the page under the headline; the calculator and
   "every plan includes" sit in one panel below them. The calculator shows both plans side by side, each with its total and,
   from 4 lines, the sum. craft.md › Restraint "one number gets to be big": the totals are the calculator's heaviest marks. */
.pr-planwrap .plans{max-width:1010px;margin:0 auto}
.pr-plans__more{max-width:1010px;margin:6px auto 0;text-align:center}
/* round 16: what every plan includes, alone in the panel; two columns of features from 720 px */
.pr-incwrap{margin-top:28px}
.pr-incwrap .pr-plan__h{margin-bottom:2px}
@media (min-width:720px){.pr-plan--inc{grid-template-columns:minmax(0,1fr)}.pr-plan--inc .pr-inc{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}}
@media (min-width:900px){.pr-incwrap{margin-top:48px}}
.pr-planwrap .plans--one{justify-content:center}
/* the banner (CY 5 Nov 2026): his line, "extremely smart" in the AI colour, kept on one line (Thai broke it) */
.pr-get{margin-top:48px}
.pr-get__t{font-weight:800;color:#fff}
.pr-get .ai-words{color:#e9b8ff;white-space:nowrap}
@media (min-width:900px){.pr-get .own__in{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}.pr-get .own__btn{flex:none}}