.home-section { margin-top: 42px; }
.featured-ai-card { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: var(--panel); transition: .15s; }
.featured-ai-card:hover, .ai-product-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.featured-ai-mark { width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center; color: #fff; font: 700 26px var(--display); text-transform: uppercase; }
.featured-ai-image { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; background: var(--sunken); }
.featured-ai-copy small, .ai-product-card small { font: 11px var(--mono); letter-spacing: .07em; color: var(--faint); text-transform: uppercase; }
.featured-ai-copy h2 { font: 600 27px/1.1 var(--display); margin: 5px 0; }
.featured-ai-copy > b { font-size: 13px; color: var(--faint); }
.featured-ai-copy p { margin: 8px 0; color: var(--soft); max-width: 68ch; }
.featured-ai-meta { display: grid; justify-items: end; gap: 6px; text-align: right; }
.featured-ai-meta small { color: var(--faint); }
.featured-ai-meta .btn { margin-top: 8px; color: var(--accent); }
.ai-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ai-product-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: .15s; }
.ai-product-card h3 { font: 600 18px/1.25 var(--display); margin: 3px 0; }
.ai-product-card p { margin: 7px 0 11px; color: var(--soft); font-size: 13px; }
.ai-product-card b { font: 11px var(--mono); color: var(--faint); }
.ai-product-image, .tool-list-image { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--sunken); }
.landing-wrap { padding-bottom: 22px; }.landing-hero h1 { max-width: 20ch; }.kicker { font: 11px var(--mono); letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }.landing-links { display: flex; gap: 8px; margin-top: 20px; }.landing-section { margin-top: 42px; }.landing-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.landing-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.landing-card:hover,.landing-tool-card:hover { border-color: var(--accent); }.landing-card img,.landing-tool-card img,.guide-tool-list img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--sunken); }.landing-card small,.landing-tool-card small { font: 11px var(--mono); color: var(--faint); text-transform: uppercase; }.landing-card h3,.landing-tool-card h2 { font: 600 18px/1.25 var(--display); margin: 3px 0; }.landing-card p,.landing-tool-card p { color: var(--soft); margin: 7px 0 11px; font-size: 13px; }.landing-card b,.landing-tool-card b { font: 11px var(--mono); color: var(--faint); }.landing-tool-list { display: grid; gap: 10px; }.landing-tool-card { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.landing-tool-card i { color: var(--accent); font: 13px var(--mono); font-style: normal; white-space: nowrap; }.update-feed { border-top: 1px solid var(--line); }.update-feed-card { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }.update-feed-card time { font: 12px var(--mono); color: var(--faint); }.update-feed-card h2,.update-feed-card h3 { margin: 4px 0; font-family: var(--display); }.update-feed-card h2 { font-size: 21px; }.update-feed-card h3 { font-size: 15px; }.update-feed-card p { color: var(--soft); margin: 5px 0; }.guide-page { max-width: 900px; padding-bottom: 70px; }.guide-header { padding: 58px 0 28px; border-bottom: 1px solid var(--line); }.guide-header h1 { max-width: 18ch; margin: 9px 0; font: 700 clamp(34px,5vw,52px)/1.08 var(--display); letter-spacing: -.035em; }.guide-header > p:not(.kicker) { max-width: 65ch; color: var(--soft); font-size: 18px; }.guide-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--faint); font-size: 12px; }.guide-prose { margin: 34px 0; }.guide-recommendations { margin-top: 44px; }.guide-tool-list { padding: 0; list-style: none; border-top: 1px solid var(--line); }.guide-tool-list li { border-bottom: 1px solid var(--line); }.guide-tool-list article { display: grid; grid-template-columns: 32px 44px minmax(0,1fr) 120px; gap: 14px; padding: 22px 0; }.guide-tool-rank { font: 600 13px var(--mono); color: var(--faint); padding-top: 9px; }.guide-tool-copy h3 { margin: 0; font: 600 20px var(--display); }.guide-tool-copy p { color: var(--soft); margin: 5px 0; }.guide-tool-copy .editor-note { background: var(--sunken); padding: 9px 11px; border-radius: 7px; font-size: 13px; }.guide-tool-list aside { display: grid; align-content: start; justify-items: end; gap: 5px; font-size: 12px; }.guide-tool-list aside small { color: var(--faint); }.guide-tool-list aside a { margin-top: 8px; color: var(--accent); white-space: nowrap; }.guide-methodology { margin-top: 48px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }.guide-methodology h2 { margin-top: 0; font: 600 23px var(--display); }
@media (max-width: 720px) { .featured-ai-card { grid-template-columns: 54px minmax(0, 1fr); padding: 18px; gap: 14px; } .featured-ai-mark, .featured-ai-image { width: 54px; height: 54px; border-radius: 13px; font-size: 18px; } .featured-ai-copy h2 { font-size: 22px; } .featured-ai-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; text-align: left; } .ai-product-grid,.landing-card-grid { grid-template-columns: 1fr; } .landing-tool-card,.update-feed-card { grid-template-columns: 44px minmax(0,1fr); } .landing-tool-card i,.update-feed-card .btn { grid-column: 1/-1; } .update-feed-card time { grid-column: 1/-1; } .guide-tool-list article { grid-template-columns: 25px 44px minmax(0,1fr); } .guide-tool-list aside { grid-column: 2/-1; justify-items: start; display: flex; gap: 10px; align-items: center; } }