/* Agency vs me price comparison (home, pricing and web development pages).
   Uses the site's theme variables so every theme works. Desktop (>760px) shows the package board, phones show the swipe cards. */
.pcmp{ position:relative; }
.pcmp .pcmp-head{ max-width:760px; margin:0 0 34px; }
.pcmp h2{ font-family:var(--display); font-weight:600; font-size:clamp(30px,5.2vw,52px); line-height:1.06; letter-spacing:-.02em; margin:14px 0 14px; text-wrap:balance; }
.pcmp h2 em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pcmp .pcmp-lead{ color:var(--muted-2,var(--muted)); font-size:clamp(15px,1.6vw,17px); line-height:1.6; margin:0; max-width:60ch; }
.pcmp .pamt{ font-variant-numeric:tabular-nums; }
.pcmp-m{ display:none; }
.pcmp-d{ display:block; }
.pcmp button{ font:inherit; color:inherit; }
.pcmp :focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ---------- desktop board ---------- */
.pcmp-grid{ display:grid; grid-template-columns:310px minmax(0,1fr) 310px; gap:20px; align-items:start; }
.pcmp-panel{ background:var(--surface); border:1px solid var(--line); border-radius:22px; }
.pcmp-list{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.pcmp-cap{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0; padding:12px 12px 8px; font-weight:400; }
.pcmp-item{ display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:12px; border-radius:14px; cursor:pointer; border:1px solid transparent; text-align:left; background:transparent; width:100%; }
.pcmp-item:hover{ background:var(--surface-2); }
.pcmp-item[aria-selected="true"]{ background:var(--violet-soft); border-color:var(--violet); }
.pcmp-item .n{ font-weight:500; font-size:14px; line-height:1.3; }
.pcmp-item .m{ font-size:12px; color:var(--muted); }
.pcmp-item .m b{ color:var(--cyan); font-weight:600; }
.pcmp-tick{ width:28px; height:28px; border-radius:8px; border:1.5px solid var(--line); background:transparent; color:transparent; cursor:pointer; display:grid; place-items:center; font-size:14px; grid-row:1 / span 2; grid-column:2; padding:0; }
.pcmp-tick[aria-pressed="true"]{ background:var(--cyan); border-color:var(--cyan); color:var(--ink); }
.pcmp-stage{ padding:28px 30px 26px; display:flex; flex-direction:column; gap:24px; min-height:540px; }
.pcmp-sh{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.pcmp-name{ font-family:var(--display); font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.15; margin:0; text-wrap:balance; }
.pcmp-count{ font-family:var(--mono); font-size:11px; color:var(--muted); padding-top:8px; white-space:nowrap; }
.pcmp-duel{ display:flex; flex-direction:column; gap:20px; }
.pcmp-br{ display:flex; flex-direction:column; gap:9px; }
.pcmp-bt{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pcmp-who{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pcmp-v{ font-family:var(--display); font-weight:600; }
.pcmp-v.ag{ font-size:19px; color:var(--coral); }
.pcmp-v.me{ font-size:clamp(30px,3.4vw,40px); line-height:1; color:var(--cyan); }
.pcmp-v small{ font-family:var(--mono); font-weight:400; font-size:12px; color:var(--muted); margin-left:6px; }
.pcmp-track{ height:18px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.pcmp-fill{ height:100%; border-radius:99px; width:0; transition:width .9s cubic-bezier(.16,.84,.36,1); }
.pcmp-fill.ag{ background:linear-gradient(90deg,var(--coral),var(--coral)); opacity:.92; }
.pcmp-fill.me{ background:linear-gradient(90deg,var(--violet),var(--cyan)); }
.pcmp-save{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line); }
.pcmp-save b{ font-family:var(--display); font-weight:700; font-size:clamp(46px,6vw,70px); line-height:1; letter-spacing:-.025em; color:var(--cyan); }
.pcmp-save span{ color:var(--muted-2,var(--muted)); }
.pcmp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pcmp-inc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pcmp-inc li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; }
.pcmp-inc li::before{ content:""; flex:none; width:7px; height:7px; border-radius:2px; background:var(--cyan); margin-top:8px; }
.pcmp-basis{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.6; align-self:end; }
.pcmp-pkg{ padding:8px 8px 20px; position:sticky; top:96px; display:flex; flex-direction:column; }
.pcmp-chosen{ list-style:none; margin:0; padding:0 12px; display:flex; flex-direction:column; gap:8px; min-height:56px; }
.pcmp-chosen li{ display:flex; justify-content:space-between; gap:10px; font-size:13.5px; }
.pcmp-chosen li span:last-child{ color:var(--muted-2,var(--muted)); white-space:nowrap; }
.pcmp-empty{ color:var(--muted); font-size:13.5px; padding:2px 12px; }
.pcmp-sums{ margin:14px 12px 0; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.pcmp-r2{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.pcmp-r2 .ag{ font-family:var(--display); font-weight:600; color:var(--coral); font-size:15px; text-decoration:line-through; text-decoration-thickness:1.5px; text-align:right; }
.pcmp-r2 .me{ font-family:var(--display); font-weight:700; color:var(--cyan); font-size:26px; }
.pcmp-r2 .me i{ font-style:normal; font-family:var(--mono); font-weight:400; font-size:11px; color:var(--muted); margin-right:5px; }
.pcmp-ys{ margin:8px 12px 0; padding:16px; border-radius:16px; background:var(--violet-soft); }
.pcmp-ys b{ display:block; font-family:var(--display); font-weight:700; font-size:24px; line-height:1.2; color:var(--cyan); margin-top:4px; }
.pcmp-pn{ margin:12px 14px 0; font-size:11.5px; color:var(--muted); line-height:1.55; }
.pcmp .pcmp-btn{ display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:99px; font-family:var(--mono); font-weight:600; font-size:13px; text-decoration:none; text-align:center; padding:0 18px; background:var(--ivory); color:var(--ink); }
.pcmp-pkg .pcmp-btn{ margin:16px 12px 0; }
.pcmp .pcmp-btn.ghost{ background:transparent; color:var(--ivory); border:1px solid var(--line); }
.pcmp .pcmp-btn.off{ opacity:.45; pointer-events:none; }
.pcmp-stage .pcmp-btn{ align-self:flex-start; padding:0 26px; }

/* ---------- phone swipe cards ---------- */
.pcmp-chips{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 10px; margin:0 -2px 6px; scrollbar-width:none; }
.pcmp-chips::-webkit-scrollbar{ display:none; }
.pcmp-chip{ flex:none; scroll-snap-align:center; font-size:13px; font-weight:500; color:var(--muted-2,var(--muted)); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:10px 15px; min-height:44px; cursor:pointer; white-space:nowrap; }
.pcmp-chip[aria-selected="true"]{ color:var(--ivory); border-color:var(--violet); background:var(--violet-soft); }
.pcmp-card{ background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:22px 20px 20px; display:flex; flex-direction:column; gap:20px; touch-action:pan-y; }
.pcmp-card .pcmp-name{ font-size:21px; }
.pcmp-card .pcmp-v.ag{ font-size:16px; }
.pcmp-card .pcmp-v.me{ font-size:30px; }
.pcmp-card .pcmp-track{ height:14px; }
.pcmp-card .pcmp-save{ padding-top:16px; }
.pcmp-card .pcmp-save b{ font-size:clamp(40px,13vw,54px); }
.pcmp-card .pcmp-inc li{ font-size:14px; }
.pcmp-card .pcmp-basis{ align-self:auto; font-size:12px; }
.pcmp-ctas{ display:flex; flex-direction:column; gap:10px; }
.pcmp-pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.pcmp-dots{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.pcmp-dot{ width:7px; height:7px; border-radius:99px; background:var(--line); transition:all .3s; }
.pcmp-dot.on{ width:22px; background:var(--violet); }
.pcmp-nav{ width:48px; height:48px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ivory); font-size:18px; cursor:pointer; padding:0; }
.pcmp-hint{ font-family:var(--mono); font-size:11px; color:var(--muted); text-align:center; letter-spacing:.04em; margin:10px 0 0; }

/* ---------- table + notes ---------- */
.pcmp-tbl{ margin-top:22px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.pcmp-tbl > summary{ cursor:pointer; list-style:none; padding:16px 20px; min-height:52px; font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pcmp-tbl > summary::-webkit-details-marker{ display:none; }
.pcmp-tbl > summary::after{ content:"+"; font-size:18px; color:var(--cyan); }
.pcmp-tbl[open] > summary::after{ content:"–"; }
.pcmp-tw{ overflow-x:auto; padding:0 12px 14px; }
.pcmp table{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.pcmp th{ font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.pcmp td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
.pcmp td small{ display:block; color:var(--muted); font-size:12px; }
.pcmp-fine{ margin:20px 2px 0; font-size:12px; color:var(--muted); line-height:1.65; max-width:880px; }
.pcmp-fine a{ color:inherit; }

@media (max-width:760px){
  .pcmp-d{ display:none; }
  .pcmp-m{ display:block; }
  .pcmp .pcmp-head{ margin-bottom:24px; }
}
@media (max-width:1040px) and (min-width:761px){
  .pcmp-grid{ grid-template-columns:260px minmax(0,1fr); }
  .pcmp-pkg{ grid-column:1 / -1; position:static; }
  .pcmp-cols{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .pcmp-fill,.pcmp-dot{ transition:none; } }

/* notes under each service removed; keep the package panel's agency range on one clean line */
.pcmp-basis{ display:none; }
.pcmp-cols{ grid-template-columns:1fr; }
.pcmp-r2 .ag{ white-space:nowrap; font-size:14px; }
.pcmp-r2 .pcmp-who{ white-space:nowrap; }