/* The pay-per-appointment service page (mission 377, option C piece 3). Loads after about.css and vs.css; adds the six-step path, the billed / not-billed pair and the fit lists. */
.ppa-hero .lead strong{color:#fff}
.ppa-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.ppa-pills li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.35);color:#fff;font-weight:600;font-size:.95rem}
.ppa-pills svg{width:16px;height:16px;color:#60a5fa}
.ppa-hero .lead a,.ppa-body a:not(.btn){color:#60a5fa}

/* Drawn visuals (Sean via MC v37, 2026-10-08: "be some thought into visuals"). Lanes per Brand & Visual Identity: blue = what we do, amber = money / the billable event, green = not billed (guarantee). */
:root{--b:#60a5fa;--b2:rgba(96,165,250,.14);--a:#f5a623;--a2:rgba(245,166,35,.16);--g:#34d399;--g2:rgba(52,211,153,.14);--card:#10131c;--line:rgba(255,255,255,.08)}
.ppa-body svg{width:22px;height:22px}
/* 1. the path: desktop = one horizontal row with arrows */
.flow{list-style:none;margin:28px 0 24px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.fnode{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px}
.fnode:not(:last-child)::after{content:"";position:absolute;top:31px;left:calc(50% + 36px);right:calc(-50% + 36px);height:2px;background:linear-gradient(90deg,var(--b),rgba(96,165,250,.35))}
.fnode:not(:last-child)::before{content:"";position:absolute;top:26px;right:calc(-50% + 30px);border:6px solid transparent;border-left:9px solid rgba(96,165,250,.6)}
.fdot{width:64px;height:64px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--b2);border:2px solid var(--b);color:var(--b)}
.fdot svg{width:28px;height:28px}
.fnode.pay .fdot{background:var(--a2);border-color:var(--a);color:var(--a);box-shadow:0 0 0 6px rgba(245,166,35,.12)}
.fword{margin-top:12px;font-weight:800;font-size:1.05rem;color:#fff;letter-spacing:-.01em}
.fcap{flex:1;margin-top:6px;font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.7)}
.ftag{margin-top:10px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(96,165,250,.85)}
.fnode.pay .ftag{color:#0b0b10;background:var(--a);padding:4px 8px;border-radius:6px}
/* 2. the invoice ledger */
.ledger,.fitt{width:100%;border-collapse:separate;border-spacing:0;margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ledger th,.ledger td,.fitt th,.fitt td{padding:12px 16px;text-align:left;border-top:1px solid rgba(255,255,255,.06);vertical-align:middle}
.ledger thead th,.fitt thead th{border-top:0;background:rgba(255,255,255,.04);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.ledger tbody th{font-weight:600;color:rgba(255,255,255,.88)}
.lic{display:inline-flex;vertical-align:middle;margin-right:12px;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.lic svg{width:18px;height:18px}
.lt{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.9rem;white-space:nowrap}
.lt svg{width:18px;height:18px}
.ledger .free .lt{color:var(--g)}
.ledger .once .lt{color:rgba(245,166,35,.85)}
.ledger .billed{background:var(--a2)}
.ledger .billed th{color:#fff}
.ledger .billed .lic{background:var(--a);color:#0b0b10}
.ledger .billed .lt{color:#0b0b10;background:var(--a);padding:5px 10px;border-radius:8px}
/* 3. fit, the same shape */
.fitt thead th.good{color:var(--b)}
.fitt td{width:50%;color:rgba(255,255,255,.84)}
.fitt td.bad{color:rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.06)}
.fi{display:inline-flex;vertical-align:middle;margin-right:10px}
.fitt .good .fi{color:var(--b)}.fitt .bad .fi{color:rgba(255,255,255,.4)}
/* 4. when you pay: a timeline */
.paytl{list-style:none;margin:28px 0 8px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.paytl::before{content:"";position:absolute;top:21px;left:7%;right:7%;height:3px;background:linear-gradient(90deg,var(--b) 0%,var(--b) 40%,var(--a) 50%,rgba(255,255,255,.25) 60%,rgba(255,255,255,.25) 85%,var(--a) 100%);border-radius:2px}
.paytl li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px}
.ptdot{position:relative;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#0b0d14;border:2px solid var(--b);color:var(--b)}
.ptdot svg{width:20px;height:20px}
.paytl .pay .ptdot{border-color:var(--a);color:#0b0b10;background:var(--a)}
.paytl .rev .ptdot{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8)}
.ptw{margin-top:10px;font-weight:700;font-size:.92rem;color:#fff}
.ptn{margin-top:3px;font-size:.78rem;color:rgba(255,255,255,.6)}
.paytl .free .ptn{color:var(--g)}.paytl .pay .ptn{color:var(--a)}
/* phone: its own layout, vertical paths, not a shrunk row */
@media (max-width:760px){
 .flow{grid-template-columns:1fr;gap:0;margin:22px 0}
 .fnode{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto auto;column-gap:14px;text-align:left;align-items:start;padding:0 0 22px}
 .fdot{grid-row:1/4;width:52px;height:52px}
 .fdot svg{width:24px;height:24px}
 .fword{margin-top:2px}.fcap{margin-top:2px}.ftag{margin-top:6px;justify-self:start}
 .fnode:not(:last-child)::after{top:56px;bottom:4px;left:25px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--b),rgba(96,165,250,.3))}
 .fnode:not(:last-child)::before{top:auto;bottom:-6px;left:19px;right:auto;border:7px solid transparent;border-top:9px solid rgba(96,165,250,.6)}
 .paytl{grid-template-columns:1fr;gap:14px}
 .paytl::before{top:20px;bottom:20px;left:21px;right:auto;width:3px;height:auto;background:linear-gradient(180deg,var(--b) 0%,var(--b) 40%,var(--a) 50%,rgba(255,255,255,.25) 60%,rgba(255,255,255,.25) 85%,var(--a) 100%)}
 .paytl li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;text-align:left;align-items:center}
 .ptdot{grid-row:1/3}.ptw{margin-top:0}.ptn{margin-top:0}
 .ledger th,.ledger td{padding:11px 12px}
 .ledger tbody th{font-size:.92rem}
 .lic{width:28px;height:28px;margin-right:8px}
 .lt{white-space:normal;font-size:.82rem}
 .fitt,.fitt tbody,.fitt tr,.fitt td,.fitt thead{display:block;width:auto}
 .fitt thead{display:none}
 .fitt tbody{display:grid;grid-template-columns:1fr}
 .fitt tr{display:contents}
 .fitt td.good{order:1}
 .fitt td.bad{order:2;border-left:0}
 .fitt td{font-size:.88rem;padding:11px 10px}
 .fitt td.good::before,.fitt td.bad::before{display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
 .fitt tr:first-child td.good::before{content:"Suits you";color:var(--b)}
 .fitt tr:first-child td.bad::before{content:"Look elsewhere";color:rgba(255,255,255,.55)}
}
.cell{display:flex;align-items:center;gap:0}.cell .lic,.cell .fi{flex:none}
@media (max-width:760px){.fitt td.good::before,.fitt td.bad::before{margin-left:0}.cell{align-items:flex-start}.cell .fi{margin-top:1px}}
/* the billing-trigger drawing: one amber dot per model where money leaves */
.trig{list-style:none;margin:24px 0 20px;padding:0;display:grid;gap:10px}
.trig li{display:grid;grid-template-columns:170px 1fr;grid-template-rows:auto auto;column-gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.trig li.ours{border-color:rgba(245,166,35,.5)}
.tn2{grid-row:1/3;font-weight:800;color:#fff}
.trig li.ours .tn2{color:var(--a)}
.track{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.track::before{content:"";position:absolute;top:8px;left:12.5%;right:12.5%;height:2px;background:rgba(255,255,255,.18)}
.tp{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.tpd{width:18px;height:18px;border-radius:50%;background:#0b0d14;border:2px solid rgba(255,255,255,.3)}
.tp.hit .tpd{background:var(--a);border-color:var(--a);box-shadow:0 0 0 5px rgba(245,166,35,.18)}
.tpl{margin-top:6px;font-size:.74rem;color:rgba(255,255,255,.55)}
.tp.hit .tpl{color:var(--a);font-weight:700}
.tc{grid-column:2;margin-top:8px;font-size:.88rem;color:rgba(255,255,255,.78)}
@media (max-width:760px){.trig li{grid-template-columns:1fr;row-gap:10px;padding:14px}.tn2{grid-row:auto}.tc{grid-column:1;margin-top:0}.tpl{font-size:.68rem}}
/* one color per model (Sean 2026-10-09: "I don't like that it's all the same color") — a traffic light: red = pay before any work, amber = pay before anyone answers, green = pay only when the homeowner is home */
.trig li.m-ret{--m:#f87171;--m2:rgba(248,113,113,.18)}
.trig li.m-lead{--m:#f5a623;--m2:rgba(245,166,35,.18)}
.trig li.m-ppa{--m:#34d399;--m2:rgba(52,211,153,.18)}
.trig li.m-ret,.trig li.m-lead,.trig li.m-ppa{border-color:var(--line);border-left:4px solid var(--m)}
.trig li.m-ppa{border-color:rgba(52,211,153,.45);border-left:4px solid var(--m)}
.trig li .tn2{color:var(--m,#fff)}
.trig li .tp.hit .tpd{background:var(--m);border-color:var(--m);box-shadow:0 0 0 5px var(--m2)}
.trig li .tp.hit .tpl{color:var(--m)}
.trig li.m-ppa .tn2{color:var(--m)}