/* ====== Semantic Classes (extracted from repeated patterns) ====== */

/* Link: muted → foreground on hover */
.l-std, .footer-nav a { font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); transition: color 0.15s; text-decoration: none; }
.l-std:hover, .footer-nav a:hover { color: hsl(var(--foreground)); }

/* Nav link (medium weight) */
.l-nav, .header-nav a { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: hsl(var(--muted-foreground)); transition: color 0.15s; text-decoration: none; }
.l-nav:hover, .header-nav a:hover { color: hsl(var(--foreground)); }

/* Mobile nav links */
.l-nav-mob, .header-nav-mob a { border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; display: block; }
.l-nav-mob:hover, .header-nav-mob a:hover { background: hsl(var(--accent)); }

/* TOC sidebar links */
.l-toc, .toc-nav a { display: block; border-radius: 0.25rem; padding: 0.25rem 0.5rem; color: hsl(var(--muted-foreground)); transition: color 0.15s, background 0.15s; text-decoration: none; }
.l-toc:hover, .toc-nav a:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

/* Card link */
.c-ref { display: flex; flex-direction: column; border-radius: 0.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: box-shadow 0.15s; text-decoration: none; }
.c-ref:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Section: hero gradient */
.s-hero { background-image: linear-gradient(to bottom, hsl(var(--primary)/0.05), hsl(var(--background)), hsl(var(--background))); padding: 3rem 0; }
@media (min-width: 768px) { .s-hero { padding: 4rem 0; } }

/* Section: description lead text */
.d-lead { margin-top: 0.75rem; font-size: 1rem; line-height: 1.75rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 768px) { .d-lead { font-size: 1.125rem; line-height: 2rem; } }

/* Section: label row */
.sec-label { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.sec-icon { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--primary)); }

/* Logo box */
.logo-box { display: flex; height: 2.25rem; width: 2.25rem; align-items: center; justify-content: center; border-radius: 0.5rem; background: #fff; }

/* Card: amber warning */
.card-amber { display: flex; flex-wrap: wrap; gap: 0.5rem; border-radius: 0.5rem; border: 1px solid hsl(48 96% 77%); background: hsl(48 96% 89%); padding: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

/* Badge: small secondary */
.badge-sm { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; border: 1px solid transparent; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; width: fit-content; white-space: nowrap; gap: 0.25rem; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }

/* Badge: muted inline */
.badge-muted { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 9999px; border: 1px solid hsl(var(--border)); padding: 0.25rem 0.625rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }

/* Table cells */
.tbl-th { color: hsl(var(--foreground)); height: 2.5rem; padding: 0 0.5rem; text-align: left; vertical-align: middle; white-space: nowrap; font-weight: 600; }
.tbl-td { padding: 0.5rem; vertical-align: middle; white-space: nowrap; }
.tbl-th-xs { color: hsl(var(--foreground)); height: 2.5rem; padding: 0 0.5rem; text-align: left; vertical-align: middle; font-weight: 600; font-size: 0.75rem; }
.tbl-td-m { padding: 0.5rem; vertical-align: middle; white-space: nowrap; font-weight: 500; }
.tbl-td-p { padding: 0.5rem; vertical-align: middle; white-space: nowrap; color: hsl(var(--primary)); }

/* Icon sizing helpers */
.ico-ext { width: 1rem; height: 1rem; }
.ico-sm { width: 1rem; height: 1rem; }

/* Flex inline gap */
.flex-in { display: inline-flex; align-items: center; gap: 0.375rem; }

/* Primary colored link */
.l-primary { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 500; color: hsl(var(--primary)); text-decoration: none; }
.l-primary:hover { text-decoration: underline; }

/* Card grid */
.g-card-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .g-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .g-card-grid { grid-template-columns: repeat(3, 1fr); } }

/* Headings */
.h1-main { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 768px) { .h1-main { font-size: 2.25rem; } }
/* cap oversized h1 everywhere */
main h1 { font-size: 2rem !important; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 768px) { main h1 { font-size: 2.5rem !important; } }

/* === missing Tailwind display utilities (without .hidden — template uses it for toggle) === */
.grid { display: grid; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.inline { display: inline; }
@media (min-width: 768px) { .md\:flex { display: flex; } .md\:block { display: block; } .md\:grid { display: grid; } .md\:inline { display: inline; } .md\:hidden { display: none; } }
/* desktop nav fallback — make main nav links visible regardless of cascade */
@media (min-width: 768px) {
  nav.header-nav { display: flex !important; }
  nav.header-nav > div { display: flex !important; align-items: center; }
  nav.header-nav > div:last-child { gap: 0.75rem; }
  nav.header-nav > div:nth-child(2) { gap: 1.5rem; }
}
.h2-ctr { margin-bottom: 2rem; text-align: center; font-size: 1.5rem; font-weight: 700; }

/* Tags */
.tag-hot { border-radius: 9999px; background: #fef3c7; padding: 0 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; font-size: 0.75rem; color: #b45309; }
.rank-badge { position: absolute; left: -0.5rem; top: -0.5rem; display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-bottom-right-radius: 1rem; font-size: 1.125rem; font-weight: 700; color: #fff; background: #f59e0b; }

/* Card header/footer */
.card-hdr { margin-left: 1.75rem; display: flex; min-width: 0; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .card-hdr { margin-left: 2rem; flex-direction: row; align-items: flex-start; justify-content: space-between; } }
.card-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
@media (min-width: 640px) { .card-title-row { font-size: 1.5rem; } }
.card-ftr { display: flex; align-items: center; border-top-width: 1px; padding-top: 1.5rem; flex-direction: column; gap: 0.75rem; background: hsl(var(--muted)/0.3); padding: 0 1rem 1rem; }
@media (min-width: 640px) { .card-ftr { flex-direction: row; padding: 0 1.5rem; } }

/* Tag badge */
.tag-line { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5rem; row-gap: 0.25rem; }

/* Price highlight */
.price-box { border-radius: 0.5rem; background: hsl(var(--primary)/0.05); padding: 0 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: left; }
@media (min-width: 640px) { .price-box { background: transparent; padding: 0; text-align: right; } }
.price-num { font-size: 1.25rem; font-weight: 700; color: hsl(var(--primary)); }
@media (min-width: 640px) { .price-num { font-size: 1.5rem; } }

/* Table wrapper */
.tbl-wrap { overflow-x: auto; border-radius: 0.5rem; border: 1px solid hsl(var(--border)); }
.tbl-main { width: 100%; caption-side: bottom; font-size: 0.875rem; min-width: 520px; }
.tbl-row { border-bottom-width: 1px; transition: background-color 0.15s; }
.tbl-row:hover { background: hsl(var(--muted)/0.5); }
.tbl-row-sel { background: hsl(var(--muted)/0.5); border-bottom-width: 1px; transition: background-color 0.15s; }
.tbl-row-sel:hover { background: hsl(var(--muted)/0.5); }

/* Price card */
.price-card { display: flex; flex-direction: column; gap: 1.5rem; border-radius: 0.75rem; border: 1px solid hsl(var(--border)); padding: 1.5rem 0; background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.15s; }
.price-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Title with padding */
.title-sm { font-size: 1.125rem; font-weight: 600; white-space: nowrap; }

/* Icons: standardized sizes */
.ico-star { fill: #f59e0b; color: #f59e0b; }
.ico-accent { color: hsl(var(--accent)); }
.ico-primary { color: hsl(var(--primary)); }

/* Card header container query */
.card-hdr2 { position: relative; padding: 0 1.5rem; container-type: inline-size; }
@media (min-width: 640px) { .card-hdr2 { padding: 0 1.5rem; } }

/* Price tag on card */
.price-tag { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 0.375rem; border-radius: 9999px; background: hsl(var(--card)); padding: 0.625rem 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 640px) { .price-tag { gap: 0.5rem; padding: 0.5rem 1rem; } }
.price-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; font-weight: 500; }
@media (min-width: 640px) { .price-tag-text { font-size: 0.875rem; } }

/* Button grid */
.btn-grid { display: grid; width: 100%; gap: 0.5rem; }
@media (min-width: 640px) { .btn-grid { display: flex; width: auto; } }

/* Section title with icon */
.sec-title { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; }
@media (min-width: 768px) { .sec-title { font-size: 1.5rem; } }

/* Table cell relative */
.tbl-rel { position: relative; width: 100%; overflow-x: auto; }

/* Price card premium */
.price-card-p { display: flex; flex-direction: column; gap: 1.5rem; border-radius: 0.75rem; border: 1px solid hsl(var(--primary)/0.5); padding: 1.5rem 0; background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.15s; }
.price-card-p:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Coupon code display */
.coupon-code { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: center; gap: 0.5rem; border-radius: 0.375rem; background: #fff; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: #b45309; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 640px) { .coupon-code { width: auto; } }

/* Copy button */
.btn-copy { display: inline-flex; height: 1.75rem; align-items: center; gap: 0.375rem; border-radius: 0.375rem; background: #d97706; padding: 0 0.625rem; font-size: 0.75rem; font-weight: 600; color: #fff; transition: background 0.15s; border: none; cursor: pointer; }
.btn-copy:hover { background: #b45309; }

/* Data card */
.data-card { display: flex; flex-direction: column; gap: 1.5rem; border-radius: 0.75rem; border: 1px solid hsl(var(--border)); padding: 1.5rem 0; background: hsl(var(--card)); color: hsl(var(--card-foreground)); box-shadow: 0 1px 2px rgba(0,0,0,0.05); overflow: hidden; transition: box-shadow 0.15s; }
.data-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Link with underline hover */
.l-underline { font-size: 0.875rem; color: hsl(var(--muted-foreground)); transition: color 0.15s; }
.l-underline:hover { color: hsl(var(--foreground)); }

/* Hot badge inline */
.hot-badge { border-radius: 0.375rem; background: #fef3c7; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; color: #b45309; }

/* Platform badge row */
.platform-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* Text utilities */
.txt-sm-muted { font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--muted-foreground)); }
.txt-xs-muted { font-size: 0.75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); }
.hvr-fg { transition: color 0.15s; }
.hvr-fg:hover { color: hsl(var(--foreground)); }

/* Background highlight */
.bg-highlight { border-radius: 0.5rem; background: hsl(var(--muted)/0.5); padding: 0.75rem; }

/* Center block */
.ctr-block { margin-left: auto; margin-right: auto; max-width: 48rem; text-align: center; }

/* Table helpers */
.tbl-last-noborder tr:last-child td { border-bottom: none; }
.tbl-td-xs { padding: 0.5rem; vertical-align: middle; font-size: 0.75rem; }

/* Section padding */
.sec-pad { scroll-margin-top: 5rem; padding: 2rem 0; }
@media (min-width: 768px) { .sec-pad { padding: 3rem 0; } }
.sec-pad-lg { scroll-margin-top: 5rem; padding: 3rem 0; }
@media (min-width: 768px) { .sec-pad-lg { padding: 3rem 0; } }

/* Badge xs */
.badge-xs { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; border: 1px solid transparent; padding: 0.125rem 0.5rem; font-size: 0.75rem; line-height: 1; font-weight: 500; white-space: nowrap; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }

/* Icon xs */
.ico-xs { width: 0.75rem; height: 0.75rem; }
.ico-copy { width: 0.875rem; height: 0.875rem; }
.ico-chevron { width: 1rem; height: 1rem; }

/* Container */
.ctr { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .ctr { max-width: 640px; } }
@media (min-width: 768px) { .ctr { max-width: 768px; } }
@media (min-width: 1024px) { .ctr { max-width: 1024px; } }
@media (min-width: 1280px) { .ctr { max-width: 1280px; } }

/* Flex gaps */
.flex-gap { display: flex; align-items: center; gap: 0.375rem; }
.flex-gap2 { display: flex; align-items: center; gap: 0.5rem; }

/* Padding card */
.pad-card { padding: 0 1rem; }
@media (min-width: 640px) { .pad-card { padding: 0 1.5rem; } }
.pad-card-y { padding-top: 1rem; padding-bottom: 1rem; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) { .pad-card-y { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* Grid 2 col */
.g-grid-2 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .g-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* Logo image */
.img-logo { height: 1.25rem; width: 1.25rem; object-fit: contain; }

/* Parent-selector variants for common patterns */
.card-grid > a { display: flex; flex-direction: column; border-radius: 0.75rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: box-shadow 0.15s; text-decoration: none; }
.card-grid > a:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

[data-slot="badge"] { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.375rem; border: 1px solid transparent; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; width: fit-content; white-space: nowrap; gap: 0.25rem; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }


/* Tag row */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Text overflow */
.txt-clip { min-width: 0; word-break: break-word; }
.txt-clip-sm { min-width: 0; }

/* Max width container */
.ctr-xl { margin-left: auto; margin-right: auto; max-width: 64rem; }

/* Section default padding */
.sec-default { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .sec-default { padding-top: 4rem; padding-bottom: 4rem; } }

/* Table row borders */
.tbl-bordered tr { border-bottom: 1px solid hsl(var(--border)); }
.tbl-bordered tr:last-child { border-bottom: none; }

/* Footer h3 */
footer h3 { margin-bottom: 1rem; font-weight: 600; }

/* Article content typography */
.post-body { max-width: 48rem; }
.post-body h2 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); }
.post-body h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.25rem; font-weight: 600; color: hsl(var(--foreground)); }
.post-body p { margin-bottom: 1rem; font-size: 0.9375rem; line-height: 1.75; color: hsl(var(--muted-foreground)); }
.post-body ul, .post-body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.post-body li { margin-bottom: 0.25rem; font-size: 0.9375rem; line-height: 1.75; color: hsl(var(--muted-foreground)); }
.post-body a { color: hsl(var(--primary)); text-decoration: underline; }
.post-body a:hover { text-decoration: none; }
.post-body strong { color: hsl(var(--foreground)); }
.post-body blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid hsl(var(--primary)); background: hsl(var(--muted)/0.5); border-radius: 0 0.375rem 0.375rem 0; }
.post-body table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.post-body th, .post-body td { padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--border)); text-align: left; }
.post-body th { background: hsl(var(--muted)/0.5); font-weight: 600; }