/* Mai Pantry — "How to save with Mai Pantry" guide (/how-to-use).
   Builds on site.css: the page sits in the shared .legal reading column. */
.guide .updated{color:#5f6779;font-size:14px;margin:0 0 18px}
.guide .lead{font-size:18px;line-height:1.6;color:var(--ink);margin:0 0 20px}

/* "On this page" jump links */
.guide .toc{background:var(--green-tint);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin:0 0 8px}
.guide .toc h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:var(--green-dark);margin:0 0 10px}
.guide .toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.guide .toc li{margin:0}
.guide .toc a{display:inline-block;padding:6px 12px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:14px;color:var(--green-dark)}
.guide .toc a:hover{border-color:var(--green);text-decoration:none}

/* Each section heading lands below the sticky nav */
.guide section{scroll-margin-top:76px}
.guide section h2{margin-top:1.6em}

/* Free / Pro / once-a-month tags under a task heading */
.guide .tags{display:flex;flex-wrap:wrap;gap:6px;margin:-2px 0 12px}
.guide .tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.02em;
  border-radius:999px;padding:3px 10px;line-height:1.5}
.guide .tag.free{background:var(--green-tint);color:var(--green-dark);border:1px solid #cde8dd}
.guide .tag.monthly{background:#FFF4E2;color:#7f4d00;border:1px solid #f1d6a6}

/* Steps beside one phone screenshot (stacked on phones) */
.guide .task{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.guide .task ol{margin-bottom:.6em}
.guide .shot{margin:0 auto;width:100%;max-width:250px;text-align:center}
.guide .shot img{display:block;width:100%;height:auto;border-radius:24px;border:1px solid var(--line);
  background:#fff;box-shadow:0 12px 30px -14px rgba(16,80,60,.35)}
.guide .shot figcaption{margin-top:8px;font-size:13px;line-height:1.4;color:#5f6779}
.guide .note{font-size:15px;background:#f7faf9;border-left:3px solid var(--green);
  border-radius:0 10px 10px 0;padding:10px 14px;margin:0 0 1em}
@media(min-width:700px){
  .guide .task{grid-template-columns:minmax(0,1fr) 230px;gap:30px}
  .guide .shot{margin:4px 0 0}
}

/* Free vs Pro table */
.guide .table-wrap{overflow-x:auto;margin:1em 0}
.guide .table-wrap table{margin:0;min-width:300px}
.guide table th{border:1px solid var(--line);padding:9px 12px;text-align:left;color:var(--ink);
  font-weight:800;background:#fff}
.guide table td:first-child{color:var(--ink);font-weight:600}

/* App Store call to action */
.guide .cta{margin:2.2em 0 0;padding:22px;border-radius:16px;background:var(--green-tint);
  border:1px solid var(--line);text-align:center}
.guide .cta p{margin:0 0 12px;color:var(--ink);font-weight:700}
.guide .cta a{display:inline-block;background:var(--green);color:#fff;font-weight:800;
  padding:12px 22px;border-radius:12px}
.guide .cta a:hover{background:var(--green-dark);text-decoration:none}