/* Shared styling for LeaseDesk guide pages (the Google-facing article set).
   Built on top of pages.css tokens - load pages.css first, then this. */

/* lead paragraph under the H1 */
.g-lead{ font-size:clamp(16px,1.5vw,18.5px) !important; line-height:1.68 !important; color:var(--ink) !important; margin:0 0 34px !important; }

/* on-page contents */
.g-toc{ border:1px solid var(--hair); border-radius:14px; padding:22px 24px; margin:0 0 44px; background:var(--bg2); }
.g-toc p{ font-family:var(--font-body); font-size:12px !important; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted) !important; margin:0 0 12px !important; }
.g-toc ol{ margin:0; padding-left:18px; }
.g-toc li{ font-size:14.5px !important; line-height:1.6 !important; margin:0 0 7px !important; }
.g-toc a{ color:oklch(0.72 0.09 60); text-decoration:none; }
.g-toc a:hover{ color:var(--accent); text-decoration:underline; }

/* callout: a landlord-side note */
.g-note{ border-left:2px solid var(--accent); background:var(--bg2); border-radius:0 12px 12px 0; padding:20px 24px; margin:28px 0 30px; }
.g-note p{ margin:0 !important; font-size:15px !important; }
.g-note p + p{ margin-top:12px !important; }
.g-note strong{ color:var(--ink); }

/* numbers table */
.g-tablewrap{ overflow-x:auto; margin:26px 0 30px; -webkit-overflow-scrolling:touch; }
.g-table{ width:100%; border-collapse:collapse; min-width:460px; font-size:14.5px; }
.g-table caption{ caption-side:top; text-align:left; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); padding:0 0 12px; }
.g-table th{ text-align:left; font-family:var(--font-body); font-weight:600; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); padding:0 18px 10px 0; border-bottom:1px solid var(--hair); white-space:nowrap; }
.g-table td{ padding:13px 18px 13px 0; border-bottom:1px solid var(--hair); color:var(--muted); line-height:1.5; vertical-align:top; }
.g-table td:last-child, .g-table th:last-child{ padding-right:0; }
.g-table tr:last-child td{ border-bottom:none; }
.g-table td strong, .g-table .num{ color:var(--ink); font-weight:600; }
.g-table tr.total td{ border-top:1px solid var(--accent); border-bottom:none; color:var(--ink); font-weight:600; padding-top:14px; }

/* proof strip: a real screenshot of a shipped file */
.g-proof{ margin:34px 0 30px; }
.g-proof img{ display:block; width:100%; height:auto; border:1px solid var(--hair); border-radius:12px; }
.g-proof figcaption{ font-size:12.5px; line-height:1.6; color:var(--muted); margin-top:10px; }

/* bottom conversion block */
.g-cta{ border:1px solid var(--hair); border-radius:18px; background:var(--bg2); padding:34px 32px; margin:56px 0 12px; }
.g-cta h2{ margin:0 0 12px !important; font-size:clamp(20px,2.2vw,26px) !important; }
.g-cta p{ margin:0 0 14px !important; }
.g-cta ul{ margin:0 0 22px; padding-left:20px; }
.g-cta li{ margin:0 0 8px !important; font-size:15px !important; }
.g-cta .pg-btn{ margin-top:4px; }
.g-cta .fine{ display:block; margin-top:16px; font-size:12.5px !important; color:var(--muted) !important; }

/* related guides */
.g-related{ margin:52px 0 0; padding-top:30px; border-top:1px solid var(--hair); }
.g-related p.h{ font-family:var(--font-body); font-size:12px !important; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted) !important; margin:0 0 16px !important; }
.g-related ul{ list-style:none; margin:0; padding:0; }
.g-related li{ margin:0 0 11px !important; font-size:15.5px !important; }
.g-related a{ color:oklch(0.72 0.09 60); text-decoration:none; }
.g-related a:hover{ color:var(--accent); text-decoration:underline; }

@media (max-width:560px){
  .g-cta{ padding:26px 22px; }
  .g-note{ padding:18px 18px; }
}