/* /guides/ — extends styles.css + food.css, same tokens, no new fonts */
.gd{max-width:720px}
.gd-meta{font-size:15px;color:var(--muted-2);margin:-10px 0 20px}
.gd-hero{width:100%;height:auto;border-radius:var(--radius);margin:0 0 24px;display:block}
.gd h2{margin-top:34px}
.gd h3{font-size:19px;color:var(--navy);margin:26px 0 8px}
.gd p{margin:0 0 16px}
.gd ul,.gd ol{margin:0 0 18px;padding-left:22px}
.gd li{margin-bottom:9px}
.gd a{color:var(--navy)}
.faq{margin:0}
.faq dt{font-weight:700;color:var(--navy);margin:18px 0 6px}
.faq dd{margin:0;color:var(--ink)}
.srcs{font-size:15px;color:var(--muted);padding-left:20px}
.srcs li{margin-bottom:10px}
.srcs a{color:var(--muted);text-decoration:underline}
.srcs a:hover{color:var(--navy)}

.share{background:var(--cream);border-radius:var(--radius);padding:20px 22px;margin:30px 0}
.share-lead{margin:0 0 12px;font-weight:600;color:var(--navy)}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.sh{display:inline-block;font:inherit;font-size:15px;font-weight:600;padding:9px 16px;border-radius:999px;
    border:1px solid var(--line);background:var(--paper);color:var(--navy);text-decoration:none;cursor:pointer}
.sh:hover{border-color:var(--navy);background:#fff}
.sh-native{background:var(--navy);color:#fff;border-color:var(--navy)}
.sh-copy.done{background:var(--green);color:#fff;border-color:var(--green)}

.gd-index{max-width:960px}
.gd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:26px 0 34px}
.gd-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);
         border-radius:var(--radius);overflow:hidden}
.gd-card:hover{border-color:var(--navy);box-shadow:var(--shadow-sm)}
.gd-card img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line-2)}
.gd-card-b{padding:16px 18px 18px}
.gd-card h2{font-size:18px;margin:0 0 8px;line-height:1.3}
.gd-card p{font-size:15px;color:var(--muted);margin:0 0 10px}
.gd-card-m{font-size:13px;color:var(--muted-2)}
.gd-rel a{display:block;padding:12px 8px;border-bottom:1px solid var(--line-2);color:var(--navy);
          text-decoration:none;font-weight:600}
.gd-rel a:hover{background:var(--cream)}

@media (max-width:560px){
  .gd h3{font-size:18px}
  .share{padding:16px}
}