/* ==========================================================================
   Tally — Grocery planning & spend intelligence case study
   Page-specific components ONLY. All tokens, layout primitives, cards, flow,
   timeline, db-strip, ba-table, stat strips, pull-quote, cta-band, footer,
   reveal + nav come from ../portfolio.css. This file adds:
     .phone / .pscreen  — the mobile-PWA hero mockup (Tally's signature)
     .spend-ledger      — planned-vs-actual ledger bars (hero + sections)
     .mini              — stat trio under prose blocks
     .shot-cap          — mockup caption
     .lean-callout      — "built within free tiers" callout
   ========================================================================== */

/* 1. Phone mockup (hero signature) ---------------------------------------- */
.phone-stage{display:flex;justify-content:center;perspective:1400px}
.phone{width:min(300px,84%);background:linear-gradient(160deg,#12352a,#0d2820);border-radius:42px;padding:13px;box-shadow:var(--shadow-xl);position:relative;transform:rotateY(-9deg) rotateX(2deg);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.phone:hover{transform:rotateY(0) rotateX(0)}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:96px;height:6px;background:rgba(255,255,255,.22);border-radius:100px;z-index:3}
.pscreen{background:var(--bg);border-radius:31px;overflow:hidden;font-family:'Manrope',sans-serif}
.pscreen-top{padding:34px 20px 16px;background:linear-gradient(150deg,var(--green-deep),var(--green));color:#fff}
.pscreen-top .p-eyebrow{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.pscreen-top .p-title{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:600;margin-top:3px}
.pscreen-top .p-sub{font-size:.72rem;opacity:.85;margin-top:2px}
.p-list{padding:6px 16px 4px}
.p-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.p-item:last-child{border-bottom:0}
.p-item .p-name{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:var(--ink)}
.p-check{width:17px;height:17px;border-radius:6px;background:var(--green-soft);border:1.5px solid var(--mint);display:grid;place-items:center;flex:none;color:var(--green-deep);font-size:.62rem;font-weight:900}
.p-item.pending .p-check{background:#fff;border-color:var(--line);color:transparent}
.p-item .p-price{font-family:'Fraunces',serif;font-size:.82rem;font-weight:600;color:var(--ink)}
.p-item.pending .p-price{color:var(--ink-faint)}
.p-total{margin:8px 14px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-sm)}
.p-total .pt-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.p-total .pt-row b{font-family:'Fraunces',serif;font-size:1.02rem;color:var(--ink)}
.p-total .pt-actual b{color:var(--green-deep);font-size:1.3rem}
.p-bar{height:8px;background:var(--bg-soft);border-radius:100px;overflow:hidden;margin:11px 0 7px}
.p-bar span{display:block;height:100%;width:74%;background:linear-gradient(90deg,var(--green),var(--mint));border-radius:100px}
.p-note{font-size:.66rem;font-weight:700;color:var(--green-deep);text-align:right}

/* 2. Planned-vs-actual ledger (hero + before/after) ----------------------- */
.spend-ledger{margin:26px 0 30px;max-width:520px}
.sl-row{margin-bottom:15px}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.84rem;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
.sl-top b{font-weight:800;color:var(--ink)}
.sl-track{height:18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;overflow:hidden}
.sl-fill{height:100%;border-radius:100px}
.sl-fill.plan{width:100%;background:repeating-linear-gradient(135deg,#dfe6e3,#dfe6e3 9px,#e9eeec 9px,#e9eeec 18px)}
.sl-fill.actual{width:82%;background:linear-gradient(90deg,var(--green-deep),var(--green))}
.sl-delta{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;color:var(--green-deep)}
.sl-delta .chip{background:var(--green-soft);border:1px solid var(--mint);border-radius:100px;padding:3px 12px;font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep)}

/* 3. Mini stat trio -------------------------------------------------------- */
.mini{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.mini > div{min-width:96px}
.mini b{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--green-deep);display:block;line-height:1}
.mini span{font-size:.78rem;color:var(--ink-faint);font-weight:600;margin-top:5px;display:block;line-height:1.35}

/* 4. Caption + free-tier callout ------------------------------------------ */
.shot-cap{font-size:.82rem;color:var(--ink-faint);margin-top:18px;font-weight:500;max-width:44ch;line-height:1.5;text-align:center;margin-left:auto;margin-right:auto}
.lean-callout{background:var(--green-soft);border:1px solid var(--mint);border-left:4px solid var(--green);border-radius:0 14px 14px 0;padding:20px 26px;margin-top:38px;max-width:760px}
.lean-callout b{font-family:'Fraunces',serif;color:var(--green-deep);font-size:1.02rem}
.lean-callout p{color:var(--ink-soft);font-weight:500;font-size:.96rem;margin-top:5px;line-height:1.65}

/* 5. Responsive ------------------------------------------------------------ */
@media(max-width:920px){
  .phone{transform:none;margin-top:8px}
  .spend-ledger{max-width:none}
}