/* The front door (FRONT DOOR, 14 Oct 2026): install cards for Claude, ChatGPT, Cursor and any MCP
   client, the copy-to-clipboard address, the banners and the Day 0 / Day 30 / after day 30
   timeline. Blue palette and Geist from design-system.css; one filled button per screen stays
   the $490 kind, so every control here is outlined. Works from 320 px; nothing scrolls sideways. */
.fd-hero{max-width:880px;margin:0 0 32px}
.fd-hero h1{margin-bottom:16px}
.fd-hero .fd-lede{font-size:19px;line-height:1.55;color:var(--bw-muted,#475467);margin:0}
.fd-address{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:20px 0 4px;max-width:640px}
.fd-address code{flex:1 1 260px;min-width:0;display:flex;align-items:center;padding:10px 14px;border:1px solid var(--bw-border,#D5DDE8);border-radius:10px;background:var(--bw-surface,#fff);font-size:15px;overflow-wrap:anywhere}
.fd-copy{margin:0!important;white-space:nowrap}
.fd-copied{font-size:14px;color:var(--bw-accent,#1D4ED8);min-height:1.4em;margin:4px 0 0}
.fd-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bw-gap,24px);margin:32px 0}
.fd-card{display:flex;flex-direction:column;gap:12px;background:var(--bw-surface,#fff);border:1px solid var(--bw-border,#D5DDE8);border-radius:var(--bw-card-radius,16px);padding:24px;box-shadow:0 1px 3px rgb(16 24 40 / 4%);min-width:0}
.fd-card h3{margin:0;font-size:20px;letter-spacing:-.01em}
.fd-card p{margin:0}
.fd-card ol{margin:0;padding-left:20px;font-size:15px}
.fd-card ol li{margin:4px 0}
.fd-card .fd-tier{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--bw-muted,#475467);margin-top:4px}
.fd-card .button{margin-top:0;text-align:center;justify-content:center;display:inline-flex;align-items:center}
.fd-card .fd-account{margin-top:auto;padding-top:12px;border-top:1px solid var(--bw-border,#D5DDE8);font-size:15px}
.fd-card .fd-account a{font-weight:600}
.fd-try{background:var(--bw-subtle,#EFF4FB);border:1px solid #BCD0F5;border-radius:var(--bw-card-radius,16px);padding:24px;margin:24px 0}
.fd-try h2{margin-top:0}
.fd-try ul{margin:8px 0 0;padding-left:20px}
.fd-try li{margin:6px 0}
.fd-timeline{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:fd}
.fd-timeline li{position:relative;padding:28px 20px 0 0;min-width:0}
.fd-timeline li::before{content:"";position:absolute;top:8px;left:0;right:0;height:3px;background:var(--bw-decoration,#3B82F6)}
.fd-timeline li::after{content:"";position:absolute;top:2px;left:0;width:15px;height:15px;border-radius:50%;background:var(--bw-accent,#1D4ED8);box-shadow:0 0 0 4px var(--bw-canvas,#F7F9FC)}
.fd-timeline .fd-when{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--bw-accent,#1D4ED8)}
.fd-timeline h3{font-size:18px;margin:6px 0 6px}
.fd-timeline p{font-size:15px;margin:0 0 6px}
.fd-timeline .fd-src{font-size:13px;color:var(--bw-muted,#475467)}
.fd-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;background:var(--bw-subtle,#EFF4FB);border:1px solid #BCD0F5;border-radius:12px;padding:16px 20px;margin:16px 0}
.fd-banner p{margin:0;max-width:72ch}
.fd-banner .actions{gap:8px}
.fd-banner .button{margin-top:0}
@media(max-width:1100px){.fd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.fd-timeline{grid-template-columns:1fr;gap:4px}.fd-timeline li{padding:0 0 18px 32px}.fd-timeline li::before{top:0;bottom:0;left:6px;right:auto;width:3px;height:auto}.fd-timeline li::after{top:4px}}
@media(max-width:560px){.fd-cards{grid-template-columns:1fr}.fd-address{flex-direction:column}.fd-copy{width:100%}.fd-hero .fd-lede{font-size:17px}}
@media(prefers-reduced-motion:reduce){.fd-card{transition:none}}
/* The banner stands alone on pages outside the account system (the tools): its buttons are outlined here. */
.fd-banner .actions{display:flex;flex-wrap:wrap;gap:8px}
.fd-banner .button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #1D4ED8;border-radius:6px;background:#fff;color:#1D4ED8;font-weight:700;text-decoration:none}
.fd-banner .button:focus-visible{outline:2px solid #1D4ED8;outline-offset:2px}
.fd-story{margin:24px 0}
.fd-timeline .fd-src{font-size:13px}
/* The configuration block wraps inside its card at every width rather than widening the page. */
.fd-card pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;margin:0;padding:12px;border-radius:8px;background:var(--bw-subtle,#EFF4FB);font-size:13px}
.fd-card pre code{white-space:inherit;overflow-wrap:anywhere}
.fd-card code{overflow-wrap:anywhere}
/* Stacked at phone width, the address keeps its own height. */
@media(max-width:560px){.fd-address code{flex:0 0 auto}}