/* ═══════════════════════════════════════════════════════════
   Pixel Media — pricing page
   Builds on styles.css tokens (ink / canvas / brand / live / signal).
   Concept: the plans, then the lead pipeline drawn like a routing diagram.
   ═══════════════════════════════════════════════════════════ */

:root{
  --hot:#F04438;
  --warm:#F5A524;
  --cold:#6FA6FF;
  --ink-line:rgba(255,255,255,.12);
  --ink-card:#111A2E;
}

/* ── page hero ───────────────────────────────────────────── */
.phero{padding:clamp(56px,8vw,96px) 0 clamp(36px,5vw,56px)}
.phero__h{font-size:clamp(34px,5.6vw,62px);font-stretch:108%;max-width:17ch}
.phero__h em{font-style:normal;color:var(--brand)}
.phero__p{margin-top:20px;max-width:60ch;color:var(--mute);font-size:18px}
.facts{
  margin:30px 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:10px;
}
.facts li{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;font:500 13.5px/1.2 var(--body);color:var(--ink);
}
.facts li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);flex:none}

/* ── plans tweaks ────────────────────────────────────────── */
.pband{padding:clamp(28px,4vw,40px) 0 clamp(64px,9vw,108px)}
.plan__ai{
  margin-top:18px;padding:12px 14px;border-radius:10px;
  background:#EEF4FF;border:1px solid #D6E4FF;
  font:500 13.5px/1.5 var(--body);color:var(--brand-deep);
}
.plan__ai b{display:block;font:600 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:5px}
.plan--pick .plan__ai{background:rgba(111,166,255,.1);border-color:rgba(111,166,255,.28);color:#DCE7FA}
.plan--pick .plan__ai b{color:#6FA6FF}
.plan__total{
  margin-top:8px;font:400 12.5px/1.5 var(--body);color:var(--mute);
}
.plan--pick .plan__total{color:var(--mute-ink)}
.plan__total b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.plan--pick .plan__total b{color:#fff}
.plan__save{
  display:inline-block;margin-top:8px;padding:3px 9px;border-radius:999px;
  background:#E7F8EF;color:#067647;font:600 11.5px/1.4 var(--body);
}

/* ── LeadFlow section (ink band) ─────────────────────────── */
.lf{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,72px);align-items:center}
.lf__h{font-size:clamp(28px,4.4vw,46px);font-stretch:106%;color:#fff}
.lf__p{margin-top:18px;color:var(--mute-ink);font-size:17px;max-width:54ch}
.lf__pts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.lf__pts li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:#E4EBF7;font-size:15.5px;line-height:1.55}
.lf__pts li span{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:rgba(111,166,255,.14);color:#6FA6FF;font:600 12px/1 var(--mono);
}
.lf__pts li b{color:#fff;font-weight:600}
.langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.langs span{
  padding:5px 10px;border-radius:999px;border:1px solid var(--ink-line);
  font:500 13px/1.2 var(--body);color:#C9D6EC;
}

/* phone mock */
.phone{
  width:100%;max-width:370px;margin-inline:auto;
  background:#0B1222;border:1px solid var(--ink-line);border-radius:30px;
  padding:12px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.phone__top{
  display:flex;align-items:center;gap:10px;padding:10px 12px 12px;
  border-bottom:1px solid var(--ink-line);
}
.phone__av{width:34px;height:34px;border-radius:50%;background:var(--brand);display:grid;place-items:center;color:#fff;font:700 14px/1 var(--disp)}
.phone__n{font:600 14px/1.2 var(--body);color:#fff}
.phone__s{font:400 11.5px/1.2 var(--mono);color:var(--live)}
.phone__body{
  background:#0E1729;border-radius:20px;margin-top:10px;padding:14px 12px;
  display:flex;flex-direction:column;gap:8px;min-height:420px;
}
.msg{
  max-width:84%;padding:9px 12px;border-radius:14px;
  font:400 13.5px/1.45 var(--body);
}
.msg--in{align-self:flex-start;background:#1C2740;color:#E4EBF7;border-bottom-left-radius:4px}
.msg--out{align-self:flex-end;background:#145C3F;color:#E9FBF2;border-bottom-right-radius:4px}
.msg small{display:block;margin-top:3px;font:400 10.5px/1 var(--mono);opacity:.6}
.chip{
  align-self:center;display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:999px;font:600 11px/1.3 var(--mono);letter-spacing:.04em;
  background:rgba(255,255,255,.06);color:#C9D6EC;border:1px solid var(--ink-line);
}
.chip i{font-style:normal;padding:1px 7px;border-radius:999px}
.chip--cold i{background:rgba(111,166,255,.18);color:var(--cold)}
.chip--hot i{background:rgba(240,68,56,.2);color:#FF8A80}
.chip--book i{background:rgba(18,183,106,.2);color:#5BE3A4}

/* ── pipeline diagram ────────────────────────────────────── */
.pipe{margin-top:clamp(48px,7vw,80px)}
.pipe__lab{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6FA6FF;margin-bottom:18px}

.lfsteps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;
  counter-reset:s;
}
.lfstep{
  position:relative;background:var(--ink-card);border:1px solid var(--ink-line);border-radius:var(--r);
  padding:18px 16px 18px;counter-increment:s;
}
.lfstep::before{
  content:"0" counter(s);display:block;
  font:600 11px/1 var(--mono);letter-spacing:.12em;color:#6FA6FF;margin-bottom:12px;
}
.lfstep h3{text-wrap:wrap;font-size:16px;color:#fff;font-stretch:102%;letter-spacing:-.01em}
.lfstep p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--mute-ink)}
/* connectors between steps */
.lfstep:not(:last-child)::after{
  content:"";position:absolute;top:50%;right:-15px;width:16px;height:2px;
  background:linear-gradient(90deg,rgba(111,166,255,.2),#6FA6FF);
}
.lfstep--score{border-color:rgba(111,166,255,.45);box-shadow:inset 0 0 0 1px rgba(111,166,255,.15)}

/* score meter */
.meter{margin-top:12px}
.meter__bar{
  position:relative;height:8px;border-radius:6px;
  background:linear-gradient(90deg,var(--cold) 0 40%,var(--warm) 40% 70%,var(--hot) 70% 100%);
}
.meter__bar i{position:absolute;top:-4px;bottom:-4px;width:2px;background:#0A1020}
.meter__ticks{display:flex;justify-content:space-between;margin-top:6px;font:500 10.5px/1 var(--mono);color:var(--mute-ink)}

/* fork */
.fork{position:relative;height:46px}
.fork::before{ /* trunk down from score step */
  content:"";position:absolute;right:calc(10% - 1px);top:0;width:2px;height:22px;background:#6FA6FF;
}
.fork::after{ /* horizontal bar across the three lanes */
  content:"";position:absolute;left:calc(100%/6);right:calc(10% - 1px);top:22px;height:2px;
  background:linear-gradient(90deg,var(--hot),var(--warm) 50%,var(--cold));
}
.fork span{position:absolute;top:22px;width:2px;height:24px}
.fork span:nth-child(1){left:calc(100%/6 - 1px);background:var(--hot)}
.fork span:nth-child(2){left:calc(50% - 1px);background:var(--warm)}
.fork span:nth-child(3){left:calc(500%/6 - 1px);background:var(--cold)}

.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lane{
  background:var(--ink-card);border:1px solid var(--ink-line);border-radius:var(--r);
  padding:20px 18px;border-top:3px solid var(--c);
}
.lane--hot{--c:var(--hot)} .lane--warm{--c:var(--warm)} .lane--cold{--c:var(--cold)}
.lane__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lane__h{font-size:19px;color:#fff}
.lane__r{font:600 11.5px/1 var(--mono);color:var(--c)}
.lane__p{margin-top:10px;font-size:14px;line-height:1.55;color:var(--mute-ink)}
.lane__path{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.lane__path li{
  position:relative;padding:10px 12px 10px 30px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--ink-line);
  font-size:13.5px;line-height:1.5;color:#E4EBF7;
}
.lane__path li::before{
  content:"";position:absolute;left:12px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--c);
}
.lane__path li + li::after{ /* little vertical link between path items */
  content:"";position:absolute;left:15px;top:-9px;width:2px;height:9px;background:var(--c);opacity:.5;
}
.lane__path b{color:#fff;font-weight:600}
.tag{
  display:inline-block;margin-right:6px;padding:1px 7px;border-radius:5px;
  font:600 10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;
}
.tag--s{background:rgba(255,255,255,.1);color:#C9D6EC}
.tag--g{background:rgba(18,183,106,.18);color:#5BE3A4}

.rails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.rail{
  display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;
  border:1px dashed rgba(111,166,255,.35);border-radius:var(--r);padding:16px 18px;
}
.rail__i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(111,166,255,.12);color:#6FA6FF;font:700 16px/1 var(--disp)}
.rail h3{font-size:15.5px;color:#fff}
.rail p{margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--mute-ink)}

/* ── comparison table ────────────────────────────────────── */
.cmp{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.cmp table{width:100%;min-width:720px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.cmp thead th{
  position:sticky;top:0;background:var(--paper);
  font:700 16px/1.2 var(--disp);font-stretch:104%;color:var(--ink);border-bottom:1px solid var(--line);
}
.cmp thead th small{display:block;margin-top:4px;font:500 12.5px/1.2 var(--mono);color:var(--mute)}
.cmp thead th.is-pick{color:var(--brand)}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center;width:19%}
.cmp tbody th{font-weight:500;color:var(--ink)}
.cmp tr.grp th{
  padding-top:22px;background:var(--canvas);
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);
}
.cmp td{color:var(--mute);font-variant-numeric:tabular-nums}
.yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#E7F8EF;color:#067647;font:700 12px/1 var(--body)}
.no{color:#C3CCDA}
.cmp td.pick{background:#F6F9FF}

/* ── closing CTA ─────────────────────────────────────────── */
.close{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.close__h{font-size:clamp(24px,3.4vw,36px);font-stretch:106%;max-width:22ch}
.close__p{margin-top:10px;color:var(--mute);max-width:52ch}
.close__b{display:flex;flex-wrap:wrap;gap:10px}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1020px){
  .lfsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lfstep:not(:last-child)::after{display:none}
  .lfstep--score{grid-column:1 / -1}
  .fork{display:none}
  .lanes{grid-template-columns:1fr;margin-top:14px}
}
@media (max-width:860px){
  .lf{grid-template-columns:1fr}
  .rails{grid-template-columns:1fr}
}
@media (max-width:520px){
  .lfsteps{grid-template-columns:1fr}
  .phone__body{min-height:0}
}
@media (prefers-reduced-motion:no-preference){
  .meter--live .meter__bar{animation:fill 1.6s ease-out both}
  @keyframes fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}
.cmp th:first-child{width:40%}
@media (max-width:640px){
  .cmp table{min-width:560px;font-size:13.5px}
  .cmp th,.cmp td{padding:11px 10px}
  .cmp tbody th{position:sticky;left:0;z-index:1;background:var(--paper);box-shadow:1px 0 0 var(--line-2)}
  .cmp tr.grp th{position:static}
  .cmp__hint{display:block}
}
.cmp__hint{display:none;margin:-8px 0 10px;font:500 12px/1 var(--mono);color:var(--mute)}
.plans__more{margin-top:28px;text-align:center}