.plan { display: grid; gap: 1.25rem; }
.pl-card { background: var(--paper); border-radius: var(--r-l); padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: 0 0 0 1px var(--line); display: grid; gap: .9rem; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pl-card.is-in { opacity: 1; transform: none; }
.pl-card h3 { font-size: var(--t-xl); font-weight: 800; }
.pl-card > p { margin: 0; }

.pl-svg { width: 100%; height: auto; overflow: visible; }
.pl-edge { fill: none; stroke: var(--paper-3); stroke-width: 3; transition: stroke .3s, stroke-width .3s; }
.pl-edge.is-on { stroke: var(--mint); stroke-width: 3.5; stroke-dasharray: 6 6; }
.pl-dot { fill: var(--mint); }
.pl-node rect { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; transition: opacity .3s; }
.pl-node text { text-anchor: middle; font-family: var(--f-body); }
.pl-node .pl-t { font-family: var(--f-display); font-weight: 700; font-size: 20px; fill: var(--ink); }
.pl-node .pl-s { font-size: 13.5px; fill: var(--ink-3); }
.pl-node.is-main rect { fill: var(--magenta-soft); stroke: var(--magenta); }
.pl-node.is-ai rect { fill: var(--mint-soft); stroke: var(--mint); }
.pl-node { transition: opacity .3s; }
.pl-node.is-dim { opacity: .35; }
.pl-legend { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); flex-wrap: wrap; }
.pl-key { width: 22px; height: 0; border-top: 3.5px dashed var(--mint); display: inline-block; }
.pl-key.off { border-top: 3px solid var(--paper-3); margin-left: 1rem; }
.pl-flow-note { margin: 0; font-size: var(--t-s); background: var(--paper-2); border-radius: var(--r-m); padding: .7rem .9rem; }

.pl-table-wrap { overflow-x: auto; }
.pl-table { width: 100%; border-collapse: collapse; font-size: var(--t-s); min-width: 520px; }
.pl-table th, .pl-table td { text-align: left; padding: .65rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.pl-table thead th { color: var(--ink-3); font-weight: 600; font-size: var(--t-xs); }
.pl-table tbody th { font-weight: 700; white-space: nowrap; }
.pl-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pl-cost-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: end; }
.pl-total { display: grid; justify-items: end; }
.pl-total-n { font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 800; color: var(--mint); line-height: 1; font-variant-numeric: tabular-nums; }

.pl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pl-step { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.pl-step-n { width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; }
.pl-step h4 { font-size: var(--t-m); }
.pl-step-what { margin: .2rem 0 .4rem; font-size: var(--t-s); color: var(--ink-2); }
.pl-step ul { margin: 0; padding-left: 1.1rem; font-size: var(--t-s); display: grid; gap: .25rem; }
.pl-card.is-in .pl-step { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * .1s); }

.pl-two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.pl-two h3 { margin-bottom: .6rem; }
.pl-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: var(--t-s); color: var(--ink-2); }