/* ============================================================
   codudo 首頁「方案」plans.css
   四個方案：一筆（免費）→ 一行 → 一篇 → 一本。跟寫字一樣，從一筆開始。
   成本線與定價理由：專案根目錄的「方案與成本.md」。
   守 DESIGN.md 第 2 章：顏色、字級只用 :root 的變數；圓角只有 0 或全圓；切版用 1px 細線；
   按鈕只有實心、線框兩種（還沒開放的方案不放按鈕，只寫一行字）。
   ============================================================ */
.ink-plans-note{max-width:760px;margin-top:var(--s3);font-family:var(--f-sans);font-size:var(--t-body);line-height:1.8;color:var(--paper-60)}
.ink-plans-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:var(--s5);list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ink-plan{position:relative;min-width:0;display:flex;flex-direction:column;padding:32px 24px 30px;border-left:1px solid var(--line)}
.ink-plan:first-child{border-left:0;padding-left:0}
/* 推薦的那一個：框線亮一階、上面一條白線，不換顏色 */
.ink-plan.is-pick{box-shadow:inset 0 1px 0 var(--paper)}
.ink-plan-pick{position:absolute;top:12px;right:16px;font-family:var(--f-mono);font-size:var(--t-tag);letter-spacing:.3em;color:var(--paper)}

.ink-plan-name{font-family:var(--f-serif);font-weight:900;font-size:var(--t-step);line-height:1.2;color:var(--paper)}
.ink-plan-tag{margin-top:6px;font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60)}
.ink-plan-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:var(--s3);
  font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60)}
.ink-plan-price b{font-family:var(--f-serif);font-weight:900;font-size:var(--t-h2);line-height:1;color:var(--paper)}
.ink-plan-year{margin-top:10px;font-family:var(--f-sans);font-size:var(--t-body);color:var(--paper-60)}
.ink-plan-who{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);
  font-family:var(--f-sans);font-size:var(--t-body);line-height:1.7;color:var(--paper)}

.ink-plan-feat{flex:1 1 auto;margin-top:var(--s2);list-style:none;font-family:var(--f-sans);font-size:var(--t-body);line-height:1.7;color:var(--paper-60)}
.ink-plan-feat li{position:relative;padding-left:18px;margin-top:10px}
.ink-plan-feat li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:var(--r);border:1px solid var(--paper-35)}
.ink-plan-feat li.inc{color:var(--paper)}
.ink-plan-feat li.inc::before{background:var(--paper);border-color:var(--paper)}

.ink-plan .ink-btn{margin-top:var(--s3);align-self:flex-start}
.ink-plan-soon{margin-top:var(--s3);padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--t-note);letter-spacing:.2em;color:var(--paper-35)}

.ink-plans-foot{margin-top:var(--s3);font-family:var(--f-sans);font-size:var(--t-body);line-height:1.8;color:var(--paper-35)}

@media (max-width:1020px){
  .ink-plans-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ink-plan:nth-child(3){border-left:0;padding-left:0}
  .ink-plan:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:620px){
  .ink-plans-list{grid-template-columns:minmax(0,1fr)}
  .ink-plan{border-left:0;padding:28px 0 26px}
  .ink-plan + .ink-plan{border-top:1px solid var(--line)}
  .ink-plan-pick{right:0}
}