/* prc-doc v2 · /pricing "How Hawcx pricing works". Spec: asset.html header. Prefix pdc-. Three stone cards in a row on the white middle,
   each with one small live moment on a white surface; the step's title and caption under the card. A card's .go plays its moment;
   the markup carries .go on every card (the final frame); .is-live arms the start states. */
.pdc{--pdc-e:cubic-bezier(.25,1,.5,1);margin-top:56px}
:where(.pdc) :where(p,dl,dd,ol,ul,h3){margin:0;padding:0}
.pdc ol,.pdc ul{list-style:none}
.pdc svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.pdc.is-snap *{transition:none!important}
.pdc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pdc-stage{display:grid;place-items:center;height:240px;padding:0 28px;border-radius:20px;background:var(--stone,#f2f1ef)}
.pdc-n{margin-top:22px;font-size:13px;line-height:18px;color:var(--ink-60)}
.pdc-t{margin-top:4px;font-size:18px;line-height:25px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.pdc-l{margin-top:4px;max-width:340px;font-size:15px;line-height:22px;color:var(--ink-60)}
/* 1 · the segmented switch: the thumb slides to Both, which ticks */
.pdc-seg{position:relative;display:grid;grid-template-columns:repeat(3,auto);padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 16px 32px -20px rgba(20,18,14,.3)}
.pdc-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:var(--w1,94px);border-radius:999px;background:var(--ink);transition:transform .6s var(--pdc-e),width .6s var(--pdc-e)}
.pdc-o{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;font-size:14px;line-height:20px;color:var(--ink-60);white-space:nowrap;transition:color .35s}
.pdc-o svg{width:0;height:13px;stroke-width:2;transition:width .35s var(--pdc-e) .35s}
.pdc-c1.go .pdc-thumb{transform:translateX(var(--x3,214px));width:var(--w3,80px)}
.pdc-c1.go .pdc-o3{color:#fff}
.pdc-c1.go .pdc-o3 svg{width:13px}
.pdc.is-live .pdc-c1:not(.go) .pdc-o1{color:#fff}
/* 2 · the call card: three agenda lines tick off in turn */
.pdc-call{width:100%;max-width:270px;padding:16px 18px 8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 18px 36px -22px rgba(20,18,14,.32)}
.pdc-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:10px;font-size:14px;line-height:20px}
.pdc-ch b{font-weight:400;color:var(--ink)}.pdc-ch span{font-size:13px;color:var(--ink-60)}
.pdc-ag li{display:flex;align-items:center;gap:10px;min-height:38px;border-top:1px dotted #d8d3cc;font-size:14px;line-height:20px;color:var(--ink-60);transition:color .3s}
.pdc-ag i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.4px rgba(0,0,0,.18);color:#fff;transition:background .3s,box-shadow .3s}
.pdc-ag svg{width:11px;height:11px;stroke-width:2;opacity:0;transition:opacity .25s}
.pdc-c2.go .pdc-ag li{color:var(--ink)}
.pdc-c2.go .pdc-ag i{background:#2f6cf6;box-shadow:none}
.pdc-c2.go .pdc-ag svg{opacity:1}
.pdc-c2.go .pdc-a2,.pdc-c2.go .pdc-a2 i,.pdc-c2.go .pdc-a2 svg{transition-delay:.45s}
.pdc-c2.go .pdc-a3,.pdc-c2.go .pdc-a3 i,.pdc-c2.go .pdc-a3 svg{transition-delay:.9s}
/* 3 · the quote slip: the plan and pricing land, the status turns Ready */
.pdc-slip{width:100%;max-width:270px;padding:16px 18px 6px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 18px 36px -22px rgba(20,18,14,.32)}
.pdc-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;font-size:14px;line-height:20px;color:var(--ink)}
.pdc-stt{display:grid;justify-items:end}
.pdc-stt>span{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;transition:opacity .35s}
.pdc-stt i{width:6px;height:6px;border-radius:50%;background:currentColor}
.pdc-stt .a{background:var(--stone,#f2f1ef);color:var(--ink-60)}
.pdc-stt .b{background:#e8f3ec;color:#1b6b3a}
.pdc-sr>div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;border-top:1px dotted #d8d3cc;font-size:14px;line-height:20px}
.pdc-sr dt{color:var(--ink-60)}
.pdc-sr dd{color:var(--ink);transition:opacity .4s,transform .5s var(--pdc-e)}
.pdc-c3.go .pdc-s2 dd{transition-delay:.4s}
.pdc-c3.go .pdc-stt .b{transition-delay:.9s}.pdc-c3.go .pdc-stt .a{transition-delay:.9s}
.pdc.is-live .pdc-c3:not(.go) .pdc-sr dd{opacity:0;transform:translateY(4px)}
.pdc-c3:not(.go) .pdc-stt .b,.pdc-c3.go .pdc-stt .a{opacity:0}
@media (max-width:1100px){ .pdc-stage{padding:0 18px} .pdc-o{padding:0 12px;font-size:13px} }
@media (max-width:900px){ .pdc-cards{grid-template-columns:minmax(0,1fr);gap:36px} }
@media (max-width:760px){ .pdc{margin-top:36px} .pdc-stage{height:210px} }
@media (prefers-reduced-motion:reduce){ .pdc *{transition:none!important} }