/* App pages (/chatgpt/, /claude-code/, and the hubs such as /agents/ and /connect/) use the homepage layout from
   revdoku-home.css. This file adds only what they have on top: the "Works with <app>" badge in the hero, the
   app's setup steps and, on the hubs, the list of apps. */

/* "Works with <app>" badge above the title. */
.rd-home .rd-home-hero__works { display:inline-flex; align-items:center; gap:10px; max-width:100%; margin:0 0 26px; padding:5px 16px 5px 6px; border:1px solid var(--rd-line); border-radius:999px; background:var(--rd-paper); color:var(--rd-ink); font-size:14px; font-weight:500; line-height:1.4; }
.rd-home-hero__works-logos { display:flex; flex:none; }
.rd-home .rd-home-hero__works img { width:26px; height:26px; margin:0; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 0 0 2px var(--rd-paper); }
.rd-home .rd-home-hero__works img + img { margin-left:-7px; }

/* Sections under the hero: the homepage section heading, then the content. */
.rd-app-section { border-bottom:1px solid var(--rd-line); }
.rd-home-control ~ .rd-app-section { border-top:1px solid var(--rd-line); }
.rd-app-section__body { padding:0 36px 52px; }
.rd-app-section__body > * { max-width:860px; }
.rd-home .rd-app-section__body p { margin:0 0 14px; font-size:15px; line-height:1.7; }
.rd-home .rd-app-section__body .rd-app-section__lead { margin-bottom:24px; color:var(--rd-ink); font-size:17px; line-height:1.65; }
.rd-app-section__body a { color:var(--rd-accent); text-decoration:underline; text-underline-offset:3px; }
.rd-app-section__body strong { color:var(--rd-ink); font-weight:500; }
.rd-home .rd-app-section__body > ul:not([class]) { margin:0 0 14px; padding-left:22px; list-style:disc; font-size:15px; line-height:1.7; }
.rd-home .rd-app-section__body > ul:not([class]) > li { margin:0 0 6px; }
.rd-app-section__body code { overflow-wrap:anywhere; }
.rd-home .rd-app-section__body .rd-app-landing__need { padding:10px 14px; border-left:2px solid var(--rd-accent); background:var(--rd-soft); color:var(--rd-ink); }
.rd-home .rd-app-section__body .rd-app-landing__note { font-size:13px; }

/* Numbered setup steps, with the same number circles as the homepage use cases. */
.rd-app-landing__steps { margin:6px 0 22px; padding:0; list-style:none; counter-reset:rd-step; color:var(--rd-muted); font-size:15px; line-height:1.7; }
.rd-app-landing__steps > li { position:relative; margin:0 0 18px; padding-left:46px; counter-increment:rd-step; }
.rd-app-landing__steps > li::before { content:counter(rd-step); position:absolute; top:-1px; left:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--rd-accent-soft); color:var(--rd-accent); font:600 14px/1 var(--rd-font); }
.rd-app-section__body .rd-app-landing__cmd { display:block; position:relative; margin-top:8px; padding:8px 44px 8px 12px; background:var(--rd-soft); color:var(--rd-ink); font:400 13px/1.6 var(--rd-mono); }
.rd-app-section__body .rd-app-landing__cmd span { white-space:nowrap; }
.rd-app-landing__steps .rd-app-landing__pre { position:relative; margin:8px 0 0; padding:10px 48px 10px 12px; overflow-x:auto; border:0; border-radius:0; background:var(--rd-soft); color:var(--rd-ink); }
.rd-app-landing__steps .rd-app-landing__pre code { padding:0; border:0; background:none; color:inherit; font:400 13px/1.6 var(--rd-mono); white-space:pre; }
.rd-app-landing__steps .rd-app-landing__pre code::before,.rd-app-landing__steps .rd-app-landing__pre code::after { content:none; }
/* Screenshot under a setup step; the link opens it at full size. */
.rd-app-section__body .rd-app-landing__shot { display:block; width:fit-content; max-width:100%; margin:12px 0 10px; border:1px solid var(--rd-line); background:#fff; }
.rd-home .rd-app-landing__shot img { display:block; max-width:100%; height:auto; margin:0; border:0; border-radius:0; box-shadow:none; }

/* Ready-made prompt for AI app builders (Lovable, Bolt, Replit, v0), with the site's copy button. */
.rd-builder-prompt { margin:4px 0 18px; }
.rd-builder-prompt pre { position:relative; margin:0; padding:14px 48px 14px 16px; overflow-x:auto; border:1px solid var(--rd-line); background:var(--rd-soft); color:var(--rd-ink); }
.rd-builder-prompt pre code { padding:0; border:0; background:none; color:inherit; font:400 13px/1.6 var(--rd-mono); white-space:pre; }
.rd-builder-prompt pre code::before,.rd-builder-prompt pre code::after { content:none; }

/* Hubs: the list of apps (tiles come from revdoku-app-directory.css). */
.rd-app-section.rd-app-directory,.rd-app-section .rd-app-directory__group { margin-top:0; scroll-margin-top:80px; }
.rd-app-section__body > .rd-app-directory__links,.rd-app-section__body > .rd-app-directory__group { max-width:none; }
.rd-app-directory__group + .rd-app-directory__group { margin-top:34px; }
.rd-home .rd-app-directory__group h3 { margin:0 0 14px; font-size:20px; }
.rd-home .rd-app-directory__group h3 a { color:inherit; text-decoration:underline; text-decoration-color:var(--rd-accent); text-decoration-thickness:1.5px; text-underline-offset:4px; }

.rd-app-section__body h3 { margin:34px 0 10px; color:var(--rd-ink); font-size:18px; font-weight:600; line-height:1.35; scroll-margin-top:6rem; }
.rd-app-table-wrap { max-width:860px; overflow-x:auto; }
.rd-app-table { width:100%; margin:4px 0 22px; border-collapse:collapse; font-size:14px; line-height:1.55; }
.rd-app-table th,.rd-app-table td { padding:9px 14px 9px 0; border-bottom:1px solid var(--rd-line); text-align:left; vertical-align:top; }
.rd-app-table th { color:var(--rd-ink); font-weight:500; }
.rd-app-table td { color:var(--rd-muted); }
@media(max-width:1100px) { .rd-app-section__body { padding-inline:28px; } }
@media(max-width:800px) { .rd-app-section__body { padding:0 24px 40px; } }
@media(max-width:480px) {
  .rd-app-section__body { padding-inline:18px; }
  .rd-home .rd-home-hero__works { margin-bottom:20px; font-size:13px; }
  .rd-home .rd-app-section__body .rd-app-section__lead { font-size:16px; }
  .rd-app-landing__steps > li { padding-left:40px; }
}