/* pricing.css - styles for the pricing page only (pricing.php loads it after
   business.css). Markup comes from includes/pricing-page.php. Rules that adjust
   shared classes (.plan-board, .compare, .plans-fineprint) are scoped to
   body.page-pricing, so nothing here can reach another page even if this file
   were ever loaded elsewhere. New components use the pp- prefix. The page ground
   (Mist) comes from style.css like every other page. */

/* ---- Plan boards ------------------------------------------------------- */
/* Pro is filled forest with a white button, so the recommended plan reads first. */
.page-pricing .plan-board--popular { background: var(--forest); border-color: var(--forest); }
.page-pricing .plan-board--popular .plan-name,
.page-pricing .plan-board--popular .plan-price,
.page-pricing .plan-board--popular .plan-feats b { color: #fff; }
.page-pricing .plan-board--popular .plan-per { color: rgba(255, 255, 255, .62); }
.page-pricing .plan-board--popular .plan-allowance { color: rgba(255, 255, 255, .8); }
.page-pricing .plan-board--popular .plan-feats li { color: rgba(255, 255, 255, .88); }
.page-pricing .plan-board--popular .plan-feats .wr-check-ico { color: #86efac; }
.page-pricing .plan-board--popular .plan-cta--primary { background: #fff; color: var(--forest); border-color: #fff; }
.page-pricing .plan-board--popular .plan-cta--primary:hover { background: #f3f0ea; color: var(--forest); }

/* One line under the name: who the plan is for. */
.page-pricing .plan-for { font-size: .86rem; color: var(--text-muted); margin: .3rem 0 .1rem; line-height: 1.4; }
.page-pricing .plan-board--popular .plan-for { color: rgba(255, 255, 255, .66); }

/* One terms line under every price, so the task lines stay level across boards. */
.page-pricing .plan-terms { font-size: .8rem; color: var(--text-muted); margin-top: .45rem; line-height: 1.4; }
.page-pricing .plan-terms b { font-weight: 600; color: var(--charcoal); }
.page-pricing .plan-board--popular .plan-terms { color: rgba(255, 255, 255, .66); }

/* ---- Side door (developers, teams bigger than Business) ----------------- */
.pp-side { max-width: 1144px; margin: 0 auto; padding: 0 2rem 5.5rem; }
.pp-side-inner { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--cream-dark); border-radius: 20px; }
.pp-side-cell { padding: 1.7rem 1.9rem; }
.pp-side-cell + .pp-side-cell { border-left: 1px solid var(--cream-dark); }
.pp-side h3 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 700; color: var(--forest); margin: 0 0 .4rem; }
.pp-side p { font-size: .92rem; color: var(--text); line-height: 1.6; margin: 0 0 .75rem; }
.pp-side a { font-weight: 600; font-size: .92rem; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Jobs table: a month of real templates, by hand vs with WebRun ------ */
/* The numbers sit on a white card inside the forest band, styled like the
   comparison table: dark text on white, a tinted icon per template, and the
   WebRun column in the Pro column's light green. No labels under the column
   names (owner: eyebrow-style labels read as AI slop); the rate and the task
   price are in the note under the card. Lines are a translucent forest so they
   stay visible on white and on the green column alike. */
.pp-jobs { background: var(--forest); color: #fff; padding: 5rem 2rem 5.2rem; }
.pp-jobs-inner { max-width: 940px; margin: 0 auto; }
.pp-jobs h2 { color: #fff; text-align: center; margin-bottom: .8rem; }
.pp-jobs h2 em { color: var(--coral); font-style: normal; }
.pp-jobs-sub { text-align: center; color: rgba(255, 255, 255, .82); font-size: 1.02rem; line-height: 1.6; max-width: 620px; margin: 0 auto 2.4rem; }
.pp-jobs-card { overflow-x: auto; background: #fff; border-radius: 20px; }
.pp-jobs-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; color: var(--text); }
.pp-jobs-t col.pp-jc { width: 23%; }
.pp-jobs-t thead th { padding: 1.1rem 1.25rem 1rem; text-align: center; vertical-align: bottom; font-size: .9rem; font-weight: 700; color: var(--charcoal); border-bottom: 1px solid rgba(26, 58, 50, .16); }
.pp-jobs-t thead th:first-child { text-align: left; padding-left: 1.5rem; }
.pp-jobs-t thead th.is-wr { color: var(--forest); }
.pp-jobs-t tbody th, .pp-jobs-t tbody td { padding: 1.05rem 1.25rem; vertical-align: top; border-top: 1px solid rgba(26, 58, 50, .1); }
.pp-jobs-t tbody tr:first-child th, .pp-jobs-t tbody tr:first-child td { border-top: 0; }
.pp-jobs-t tbody th { text-align: left; padding-left: 1.5rem; font-weight: 400; }
.pp-jw { display: flex; align-items: flex-start; gap: .85rem; }
.pp-jobs-t .pp-ri { width: 30px; height: 30px; border-radius: 8px; }
.pp-jobs-t .pp-ri .pp-ico { width: 16px; height: 16px; }
/* No underline on the titles (owner: it broke around q, g and j and read as
   distorted); the link shows itself on hover by turning green instead. */
.pp-jobs-t tbody th a { color: var(--charcoal); font-weight: 600; text-decoration: none; }
.pp-jobs-t tbody th a:hover, .pp-jobs-t tbody th a:focus-visible { color: #2f7d55; }
.pp-jobs-t small { display: block; margin-top: .25rem; font-size: .85rem; font-weight: 400; color: var(--text-muted); }
.pp-jobs-t td { text-align: center; }
/* tabular figures on the numbers only: in Inter they also widen the hyphen
   to a digit's width, which spaced out words like "five - star" */
.pp-jobs-t td b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.pp-jobs-t thead th.is-wr, .pp-jobs-t td.is-wr { background: #e7f0ea; }
.pp-jobs-t td.is-wr b { color: var(--forest); }
/* top-aligned so both totals share a line even when the note under one wraps */
.pp-jobs-t tfoot th, .pp-jobs-t tfoot td { padding: 1.1rem 1.25rem 1.3rem; border-top: 1px solid rgba(26, 58, 50, .16); vertical-align: top; }
.pp-jobs-t tfoot th { text-align: left; padding-left: 1.5rem; padding-top: 1.45rem; font-weight: 700; color: var(--charcoal); }
.pp-jobs-t .pp-big { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; line-height: 1.05; }
.pp-jobs-note { max-width: 720px; margin: 1.4rem auto 0; font-size: .9rem; color: rgba(255, 255, 255, .8); line-height: 1.65; text-align: center; text-wrap: balance; }
.pp-jobs-note a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Closing section: no dotted "Free to try • No credit card" line under the heading
   (owner: label lines like that read as AI slop), so the heading carries the gap */
.page-pricing .cta-section h2 { margin-bottom: 2rem; }

/* ---- Comparison table: one colour per group, an icon on every row ------- */
.page-pricing .compare { max-width: 1040px; }
.pp-cmp { overflow-x: auto; background: #fff; border: 1px solid var(--cream-dark); border-radius: 20px; }
.pp-cmp-t { width: 100%; min-width: 680px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.pp-cmp-t col.pp-c-l { width: 40%; }
.pp-cmp-t thead th { padding: 1.35rem 1rem 1.15rem; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--cream-dark); background: #fff; }
/* The section title sits in the top-left corner instead of above the table, so
   that cell is not empty space beside the plan names. It is a td: a th cannot hold a heading. */
.pp-cmp-t thead .pp-cmp-lh { padding: 1.35rem 1rem 1.15rem 1.25rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--cream-dark); background: #fff; }
.pp-cmp-lh h2 { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.1rem); }
.pp-pn { display: block; font-size: 1.05rem; font-weight: 700; color: var(--forest); }
.pp-pp { display: block; margin-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.pp-cmp-t thead th.is-pro { background: var(--forest); }
.pp-cmp-t thead th.is-pro .pp-pn { color: #fff; }
.pp-cmp-t thead th.is-pro .pp-pp { color: rgba(255, 255, 255, .72); }
/* Pro column: a light green, so it reads as part of the forest Pro header, not as the Mist page */
.pp-cmp-t td.is-pro { background: #e7f0ea; }
.pp-ico { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* group colours: usage dark orange, scale blue, agent power green, governance amber */
.pp-usage { --pp-g: #d4513f; --pp-gt: #fce9e6; }
.pp-scale { --pp-g: #2563eb; --pp-gt: #e6eefd; }
.pp-power { --pp-g: #2f7d55; --pp-gt: #e3f1e8; }
.pp-gov   { --pp-g: #b7791f; --pp-gt: #fbf0da; }

.pp-cmp-t thead th { border-bottom-color: var(--cream-dark); }

/* A group row is a divider, not a big row: a compact tinted band with a hairline
   above and below, a small SOLID icon in the group colour, and the name at row size
   in bold. Rows underneath use the same left edge with a lighter TINTED icon, so
   solid-vs-tint (not size) says which level you are looking at. */
.pp-g th { text-align: left; padding: .62rem 1.25rem; background: #dce3ec; border-top: 1px solid #d3dbe6; border-bottom: 1px solid #d3dbe6; font-weight: 400; }
.pp-cmp-t thead + tbody .pp-g th { border-top: 0; }
.pp-gw { position: sticky; left: 1.25rem; display: inline-flex; align-items: center; gap: .7rem; }
.pp-gi { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; background: var(--pp-g); }
.pp-gi .pp-ico { width: 14px; height: 14px; stroke-width: 2.2; }
.pp-gt { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; }
.pp-gn { font-size: .92rem; font-weight: 700; color: var(--forest); }
.pp-gd { font-size: .8rem; color: #586170; }

.pp-r th { text-align: left; font-weight: 500; color: var(--charcoal); padding: .68rem 1rem .68rem 1.25rem; background: #fff; }
.pp-rw { display: flex; align-items: center; gap: .7rem; }
.pp-ri { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: var(--pp-g); background: var(--pp-gt); }
.pp-ri .pp-ico { width: 14px; height: 14px; }
.pp-r td { text-align: center; padding: .68rem 1rem; color: var(--text); }
.pp-r th, .pp-r td { border-top: 1px solid rgba(26, 58, 50, .09); }
.pp-g + .pp-r th, .pp-g + .pp-r td { border-top: 0; }
/* a little air at the top and bottom of each group, so bands sit between groups */
.pp-g + .pp-r th, .pp-g + .pp-r td { padding-top: .9rem; }
.pp-grp .pp-r:last-child th, .pp-grp .pp-r:last-child td { padding-bottom: .9rem; }
/* tabular figures on the bold numbers, not the whole cell, so "Pay-as-you-go" keeps normal hyphens */
.pp-r td b { color: var(--charcoal); font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-r td b.pp-unl { color: var(--forest); }
.pp-pre, .pp-unit { color: var(--text-muted); }
.pp-pre { font-size: .8rem; }
.pp-nw { white-space: nowrap; }
.pp-yes { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: #15803d; align-items: center; justify-content: center; vertical-align: middle; }
.pp-yes svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-no { color: #c3cbd5; font-weight: 600; }

/* translucent forest, not --cream-dark: the Mist-grey line vanished over the green Pro cell */
.pp-buy th, .pp-buy td { border-top: 1px solid rgba(26, 58, 50, .14); padding: 1.15rem 1rem 1.3rem; background: #fff; }
.pp-buy td.is-pro { background: #e7f0ea; }
.pp-buy th { text-align: left; font-weight: 600; color: var(--forest); padding-left: 1.25rem; }
.pp-buy td { text-align: center; }
.page-pricing .pp-buy .plan-cta { display: inline-block; min-width: 140px; padding: .65rem 1rem; margin: 0; }

@media (max-width: 920px) {
  .pp-side { padding: 0 1.25rem 3.5rem; }
  .pp-side-inner { grid-template-columns: 1fr; }
  .pp-side-cell + .pp-side-cell { border-left: 0; border-top: 1px solid var(--cream-dark); }
  .pp-jobs { padding: 3.6rem 1.25rem 3.8rem; }
  .pp-jobs-t { font-size: .88rem; }
  .pp-jobs-t col.pp-jc { width: 24%; }
  .pp-jobs-t thead th, .pp-jobs-t tbody th, .pp-jobs-t tbody td, .pp-jobs-t tfoot th, .pp-jobs-t tfoot td { padding-left: .7rem; padding-right: .7rem; }
  .pp-jobs-t thead th:first-child, .pp-jobs-t tbody th, .pp-jobs-t tfoot th { padding-left: 1rem; }
  .pp-jobs-t .pp-big { font-size: 1.5rem; }
  .pp-cmp-t { min-width: 600px; font-size: .86rem; }
  .pp-cmp-t col.pp-c-l { width: 190px; }
  .pp-rw { gap: .6rem; }
  .pp-r th { padding-left: 1rem; }
  /* the first column stays put while the plans scroll sideways */
  .pp-r th, .pp-buy th, .pp-cmp-t thead .pp-cmp-lh { position: sticky; left: 0; z-index: 1; }
  .pp-cmp-t thead .pp-cmp-lh { padding-left: 1rem; }
  .pp-cmp-lh h2 { font-size: 1.35rem; }
  .pp-gt { display: block; }
  .pp-gd { display: block; margin-top: .15rem; }
  .page-pricing .pp-buy .plan-cta { min-width: 0; padding: .6rem .7rem; font-size: .84rem; }
}

/* Phones: the template names need the width more than the icons do, and the
   number cells need less side padding so "300 tasks" stays on one line */
@media (max-width: 600px) {
  .pp-jobs-t .pp-ri { display: none; }
  .pp-jobs-t small { font-size: .8rem; }
  .pp-jobs-t col.pp-jc { width: 25%; }
  .pp-jobs-t thead th + th, .pp-jobs-t td { padding-left: .4rem; padding-right: .4rem; }
  .pp-jobs-t tbody td small { white-space: nowrap; }
  .pp-jobs-t tfoot td small { font-size: .74rem; }
}