/* Agent Page Design System — shared across all agent detail pages. Anchored on Buildtal DS tokens (buildtal-ds.css). All values use the existing --sp-*, --text-*, --surface-*, --navy, --blue-pale, etc. variables — no parallel scale. Page templates must also link /css/buildtal-ds.css in their . */ /* ── TYPOGRAPHY HIERARCHY ───────────────────────────────────── */ .ap-h1 { font-family: 'Bricolage Grotesque', -apple-system, sans-serif; font-size: clamp(32px, 5vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: inherit; text-wrap: balance; margin: 0; } .ap-h2 { font-family: 'Bricolage Grotesque', -apple-system, sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--text-primary); text-wrap: balance; margin: 0; } .ap-h3 { font-family: 'Bricolage Grotesque', -apple-system, sans-serif; font-size: clamp(18px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; color: var(--text-primary); margin: 0; } .ap-h4 { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin: 0; } .ap-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0; padding: 0; } .ap-body { font-family: 'DM Sans', sans-serif; font-size: var(--text-base); line-height: 1.7; color: var(--text-secondary); } .ap-prose p { max-width: 65ch; margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.75; color: var(--text-secondary); text-wrap: pretty; } .ap-prose p:last-child { margin-bottom: 0; } .ap-prose strong { color: var(--text-primary); font-weight: 600; } .ap-prose ul, .ap-prose ol { max-width: 65ch; margin: 0 0 var(--sp-4); padding-left: var(--sp-6); color: var(--text-secondary); } .ap-prose li { font-size: 15px; line-height: 1.7; margin-bottom: var(--sp-2); } /* ── STACK RHYTHM ───────────────────────────────────────────── */ .ap-stack > * + * { margin-top: var(--sp-7); } .ap-stack-sm > * + * { margin-top: var(--sp-5); } .ap-stack-lg > * + * { margin-top: var(--sp-9); } /* ── SECTION CARD ───────────────────────────────────────────── */ .ap-section-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-9) var(--sp-10); margin-bottom: var(--sp-6); scroll-margin-top: 80px; } .ap-section-head { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); border-bottom: 1px solid var(--border); } .ap-section-head-meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-muted); } /* ── CONTAINER & GRID ───────────────────────────────────────── */ .ap-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); } .ap-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 320px; gap: var(--sp-8); padding: var(--sp-8) 0 var(--sp-12); align-items: start; } .ap-main-col { min-width: 0; } @media (max-width: 1024px) { .ap-grid { grid-template-columns: 1fr; gap: var(--sp-6); } .ap-toc-rail { display: none; } .ap-toc-topbar { display: block; } } @media (max-width: 640px) { .ap-section-card { padding: var(--sp-6); } } /* ── HERO STATS (legacy element name bridge) ───────────────── */ .hero-stat { padding: 0 var(--sp-7) 0 0; margin-right: var(--sp-7); border-right: 1px solid rgba(255,255,255,0.1); } .hero-stat:last-child { border-right: none; margin-right: 0; } .hero-stat-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1; } .hero-stat-key { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); color: rgba(255,255,255,0.5); margin-top: var(--sp-1); text-transform: uppercase; letter-spacing: 0.04em; } /* ── PERF GRID (JS-rendered into #perf-grid) ──────────── */ .perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); } .perf-cell { background: var(--surface-2); border-radius: 8px; padding: 10px; text-align: center; border: 1px solid var(--border); } .perf-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-primary); } .perf-key { font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; } /* ── SAMPLE PREVIEW (JS-rendered into #sample-preview) ── */ .sample-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-5); } .sample-preview-title { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); } .sample-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); } .sample-row:last-child { border-bottom: none; } .sample-code { font-family: 'SF Mono', monospace; font-size: 11px; font-weight: 700; color: var(--orange); min-width: 44px; } .sample-desc { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-secondary); flex: 1; } .sample-hold { font-family: 'DM Sans', sans-serif; font-size: 10px; background: #FEF3C7; color: #92400E; padding: 2px 6px; border-radius: 3px; font-weight: 700; white-space: nowrap; } /* ── RELATED (legacy classes still used by JS) ────────── */ .related-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .related-header { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-primary); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .related-list { padding: var(--sp-2) 0; } .related-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; text-decoration: none; transition: background var(--duration-fast) var(--ease); color: inherit; } .related-item:hover { background: var(--surface-2); } .related-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .related-info { flex: 1; min-width: 0; } .related-name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .related-tagline { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .related-price { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--blue); flex-shrink: 0; } /* ── PAGE STATE (loading / error) ───────────────────────────── */ .ap-page-state { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: var(--sp-3); font-size: 14px; } .ap-page-state-icon { font-size: 40px; } .ap-page-state h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; color: var(--text-primary); } .ap-page-state a { color: var(--blue); text-decoration: none; font-weight: 600; } /* ── BREADCRUMB BAR ─────────────────────────────────────────── */ .breadcrumb-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; } .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); color: var(--text-muted); flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease); } .breadcrumb a:hover { color: var(--blue); } .breadcrumb-sep { color: var(--border-hover); font-size: 10px; } .breadcrumb-current { color: var(--text-secondary); font-weight: 500; } /* ── STICKY TOC RAIL ────────────────────────────────────────── */ .ap-toc-rail { position: sticky; top: 80px; align-self: start; font-size: var(--text-sm); } .ap-toc-label { display: block; font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: var(--sp-4); } .ap-toc { display: flex; flex-direction: column; gap: var(--sp-1); border-left: 2px solid var(--border); } .ap-toc-link { display: block; padding: var(--sp-2) var(--sp-4); margin-left: -2px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; line-height: 1.4; transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } .ap-toc-link:hover { color: var(--text-primary); } .ap-toc-link.is-active { color: var(--blue); font-weight: 600; border-left-color: var(--blue); } .ap-toc-topbar { display: none; position: sticky; top: 56px; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; margin: 0 calc(-1 * var(--sp-6)); padding-left: var(--sp-6); padding-right: var(--sp-6); } .ap-toc-topbar .ap-toc { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-left: none; border-bottom: 2px solid var(--border); gap: 0; } .ap-toc-topbar .ap-toc-link { border-left: none; border-bottom: 2px solid transparent; margin-left: 0; margin-bottom: -2px; padding: var(--sp-2) var(--sp-3); white-space: nowrap; } .ap-toc-topbar .ap-toc-link.is-active { border-bottom-color: var(--blue); } /* ── SIDEBAR ────────────────────────────────────────────────── */ .ap-sidebar { display: flex; flex-direction: column; gap: var(--sp-6); position: sticky; top: 80px; } .ap-sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-6); } /* ── ICONS (markers per section) ─────────────────────────────── */ .ap-icon-md { width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; line-height: 1; } .ap-icon-md.blue { background: var(--blue-pale); color: var(--blue); } .ap-icon-md.teal { background: var(--teal-bg); color: var(--teal); } .ap-icon-md.amber { background: var(--amber-pale); color: var(--amber); } .ap-icon-md.purple { background: var(--purple-bg); color: var(--purple); } .ap-icon-md.green { background: var(--green-bg); color: var(--green); } .ap-icon-md.navy { background: var(--navy-pale); color: var(--navy); } .ap-icon-md.rose { background: #FEF2F2; color: #DC2626; } /* ── NEVER LIST EYEBROW (small variant) ───────────── */ .never-eyebrow { color: #DC2626; margin-bottom: var(--sp-3); font-weight: 700; } /* ── CALLOUTS ───────────────────────────────────────────────── */ .ap-callout { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--blue); border-radius: 10px; background: var(--blue-pale); font-family: 'DM Sans', sans-serif; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); margin-top: var(--sp-5); } .ap-callout-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .ap-callout.info { border-left-color: var(--blue); background: var(--blue-pale); } .ap-callout.tip { border-left-color: var(--teal); background: var(--teal-bg); } .ap-callout.warning{ border-left-color: var(--amber); background: var(--amber-pale); } .ap-callout.scope { border-left-color: #DC2626; background: #FEF2F2; } .ap-callout.example{ border-left-color: var(--navy); background: var(--navy-pale); color: var(--text-primary); } .ap-callout strong { color: var(--text-primary); font-weight: 600; } /* ── CODE / OUTPUT BLOCK ────────────────────────────────────── */ .ap-code-block { background: #1B2A4A; color: #E6ECF5; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace; font-size: 13px; line-height: 1.7; padding: var(--sp-5) var(--sp-6); border-radius: 10px; white-space: pre-wrap; word-break: break-word; border: 1px solid rgba(255,255,255,0.06); margin-top: var(--sp-4); } /* ── COMPARISON TABLE ───────────────────────────────────────── */ .ap-table { width: 100%; border-collapse: collapse; font-family: 'DM Sans', sans-serif; font-size: var(--text-sm); margin-top: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .ap-table th { background: var(--surface-2); text-align: left; font-weight: 600; color: var(--text-primary); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); } .ap-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; } .ap-table tr:last-child td { border-bottom: none; } .ap-table tbody tr:hover { background: var(--surface-2); } /* ── HERO BAND OVERRIDES (refinement only) ──────────────────── */ .ap-hero-band { background: var(--navy); padding: 56px 0 40px; position: relative; overflow: hidden; } .ap-hero-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 120% at 80% 50%, rgba(37,99,235,0.18), transparent); pointer-events: none; } .ap-hero-inner { position: relative; z-index: 1; } .ap-hero-top { display: flex; align-items: flex-start; gap: var(--sp-6); } .ap-hero-meta { flex: 1; min-width: 0; } .ap-hero-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 5px 12px; border-radius: 9999px; background: var(--suite-bg, var(--blue-pale)); color: var(--suite-color, var(--blue)); font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; border: 1px solid rgba(0,0,0,0.04); margin-bottom: var(--sp-4); } .ap-hero-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(34px, 5vw, 56px); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--sp-4); text-wrap: balance; } .ap-hero-tagline { font-family: 'DM Sans', sans-serif; font-size: 17px; color: rgba(255,255,255,0.7); line-height: 1.55; max-width: 640px; } .ap-hero-stats { display: flex; gap: 0; margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; } .ap-hero-stat { padding-right: var(--sp-7); margin-right: var(--sp-7); border-right: 1px solid rgba(255,255,255,0.1); } .ap-hero-stat:last-child { border-right: none; margin-right: 0; } .ap-hero-stat-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700; color: #fff; line-height: 1.1; } .ap-hero-stat-key { font-size: var(--text-xs); color: rgba(255,255,255,0.5); margin-top: var(--sp-1); text-transform: uppercase; letter-spacing: 0.04em; } @media (max-width: 640px) { .ap-hero-band { padding: var(--sp-7) 0 var(--sp-6); } .ap-hero-top { flex-direction: column; gap: var(--sp-4); } .ap-hero-name { font-size: 32px; } .ap-hero-stats { gap: 0; margin-top: var(--sp-5); padding-top: var(--sp-4); } .ap-hero-stat { padding-right: var(--sp-4); margin-right: var(--sp-4); } } /* ── AGENT ICON (large) ─────────────────────────────────────── */ .ap-icon-lg { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); } /* ── LEGACY ELEMENT BRIDGES ────────────────────────────────── */ /* These preserve the IDs the existing inline script in agent-detail.html reads, so the JS continues to find/use them after the inline style block is removed. */ .overview-text { font-family: 'DM Sans', sans-serif; } .overview-text p { max-width: 65ch; margin-bottom: var(--sp-4); font-size: 15px; line-height: 1.75; color: var(--text-secondary); } .overview-text p:last-child { margin-bottom: 0; } .use-cases { display: flex; flex-direction: column; gap: 10px; margin-top: var(--sp-5); } .use-case-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface-2); border-radius: 8px; } .use-case-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--blue-pale); color: var(--blue); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .use-case-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; } .audience-section { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); } .audience-label { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); } .audience-tags { display: flex; flex-wrap: wrap; gap: 6px; } .audience-tag { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 600; padding: 5px 10px; border-radius: 6px; } .aud-gc { background: var(--orange-pale); color: var(--orange-dark); } .aud-own { background: var(--navy-pale); color: var(--navy); } .aud-sub { background: var(--purple-bg); color: var(--purple); } .aud-des { background: var(--blue-pale); color: var(--blue); } .aud-spec { background: var(--green-bg); color: var(--green); } .aud-ops { background: var(--surface-2); color: var(--text-secondary); } .inputs-row { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); } .input-chip { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); padding: 5px 11px; border-radius: 6px; font-weight: 500; border: 1px solid var(--blue-bg); background: var(--blue-pale); color: var(--blue); } .input-label { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); } .process-steps { display: flex; flex-direction: column; gap: 0; } .process-step { display: flex; gap: 14px; padding: 14px 0; position: relative; } .process-step:not(:last-child) { border-bottom: 1px solid var(--border); } .step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-pale); color: var(--blue); font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-body { flex: 1; } .step-title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; } .step-desc { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted); line-height: 1.55; } .cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); } @media (max-width: 600px) { .cap-grid { grid-template-columns: 1fr; } } .cap-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 12px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); } .cap-check { width: 20px; height: 20px; border-radius: 5px; background: var(--green-bg); color: var(--green); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .cap-text { font-family: 'DM Sans', sans-serif; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; } .deliverables-list { display: flex; flex-direction: column; gap: var(--sp-3); } .deliverable-item { padding: 14px 16px; border-radius: 10px; border-left: 3px solid var(--blue); background: var(--surface-2); } .deliverable-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .deliverable-desc { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 6px; } .deliverable-format { display: inline-flex; align-items: center; gap: 4px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: var(--teal); background: var(--teal-bg); border-radius: 4px; padding: 3px 8px; letter-spacing: 0.03em; } .rules-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-4); } .rule-item { display: flex; gap: 10px; align-items: flex-start; font-family: 'DM Sans', sans-serif; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.55; } .rule-x { color: #DC2626; font-weight: 700; flex-shrink: 0; font-size: 13px; margin-top: 1px; } .scope-note { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-secondary); background: var(--surface-2); border-radius: 8px; padding: 12px 14px; line-height: 1.65; border: 1px solid var(--border); margin-top: var(--sp-4); } /* ── PRICE CARD (sidebar) ───────────────────────────────────── */ .ap-price-card { background: var(--navy); border-radius: var(--radius-lg); padding: var(--sp-6); color: #fff; border: 1px solid var(--navy); } .ap-price-model-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); margin-bottom: var(--sp-3); } .ap-price-amount-main { font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; color: #fff; line-height: 1; } .ap-price-unit { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.5); margin-left: 2px; } .ap-price-subtitle { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(255,255,255,0.4); margin-top: var(--sp-2); } .ap-pricing-tiers { margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-3); } .ap-tier-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .ap-tier-row:last-child { border-bottom: none; } .ap-tier-row.is-try { border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: var(--sp-3); margin-bottom: var(--sp-2); } .ap-tier-row.is-annual { background: rgba(255,255,255,0.05); border-radius: 6px; padding: 6px 10px; margin-top: var(--sp-2); border-bottom: none; } .ap-tier-label { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); color: rgba(255,255,255,0.55); } .ap-tier-save { font-family: 'DM Sans', sans-serif; font-size: 10px; background: rgba(255,255,255,0.15); padding: 2px 6px; border-radius: 3px; margin-left: 4px; } .ap-tier-amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; color: #fff; } .ap-tier-amount.is-try { color: #6EE7B7; } .ap-price-per-task-wrap { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: baseline; gap: 4px; } .ap-price-per-task-label { font-size: var(--text-xs); color: rgba(255,255,255,0.4); } .ap-price-per-task-amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.8); } .ap-price-per-task-unit { font-size: 12px; color: rgba(255,255,255,0.4); } .ap-perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); } .ap-perf-cell { background: var(--surface-2); border-radius: 8px; padding: 10px; text-align: center; border: 1px solid var(--border); } .ap-perf-val { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-primary); } .ap-perf-key { font-family: 'DM Sans', sans-serif; font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; } .ap-btn-hire, .ap-btn-secondary, .ap-btn-annual { display: block; width: 100%; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; text-align: center; text-decoration: none; transition: all var(--duration-fast) var(--ease); } .ap-btn-hire { font-size: 15px; font-weight: 700; color: #fff; background: var(--blue); border-radius: 8px; padding: 14px 20px; margin-bottom: 8px; letter-spacing: -0.01em; } .ap-btn-hire:hover { background: #1E40AF; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,0.35); } .ap-btn-annual { font-size: 14px; font-weight: 600; color: var(--green); background: var(--green-bg); border: 1px solid var(--green); border-radius: 8px; padding: 12px 20px; margin-bottom: 8px; } .ap-btn-annual:hover { background: #D1FAE5; } .ap-btn-secondary { font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 11px 20px; } .ap-btn-secondary:hover { background: var(--navy-pale); color: var(--navy); } .ap-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } .ap-badge { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 600; padding: 3px 9px; border-radius: 12px; } .ap-badge-free-first { background: var(--green-bg); color: var(--green); border: 1px solid rgba(5,150,105,0.3); } .ap-badge-tried { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .ap-guarantee { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); color: var(--text-muted); text-align: center; margin-top: var(--sp-3); line-height: 1.55; } .ap-guarantee strong { color: var(--text-secondary); } /* ── SAMPLE PREVIEW block (sidebar) ─────────────────────────── */ .ap-sample-preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-4); } .ap-sample-preview-title { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-3); } .ap-sample-row { display: flex; align-items: center; gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid var(--border); } .ap-sample-row:last-child { border-bottom: none; } .ap-sample-code { font-family: 'SF Mono', monospace; font-size: 11px; font-weight: 700; color: var(--orange); min-width: 48px; } .ap-sample-desc { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); color: var(--text-secondary); flex: 1; } .ap-sample-hold { font-family: 'DM Sans', sans-serif; font-size: 10px; background: #FEF3C7; color: #92400E; padding: 2px 6px; border-radius: 3px; font-weight: 700; white-space: nowrap; } /* ── SUITE BUNDLE NOTE ─────────────────────────────────────── */ .ap-suite-bundle-note { font-family: 'DM Sans', sans-serif; font-size: var(--text-xs); } .ap-suite-bundle-eyebrow { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-2); } .ap-suite-bundle-link { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--amber); text-decoration: none; display: flex; align-items: center; gap: 4px; } .ap-suite-bundle-link:hover { color: var(--orange-dark); } /* ── RELATED AGENTS ─────────────────────────────────────────── */ .ap-related-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .ap-related-header { font-family: 'Bricolage Grotesque', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-primary); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); } .ap-related-list { padding: var(--sp-2) 0; } .ap-related-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; text-decoration: none; transition: background var(--duration-fast) var(--ease); } .ap-related-item:hover { background: var(--surface-2); } .ap-related-icon { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; } .ap-related-info { flex: 1; min-width: 0; } .ap-related-name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-related-tagline { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-related-price { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--blue); flex-shrink: 0; } /* ── PAGE STATE (loading / error) ───────────────────────────── */ .ap-page-state { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); gap: var(--sp-3); font-size: 14px; } .ap-page-state-icon { font-size: 40px; } .ap-page-state h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; color: var(--text-primary); } .ap-page-state a { color: var(--blue); text-decoration: none; font-weight: 600; } /* ── CARD-TITLE BRIDGE (older element kept by JS) ───────────── */ .card-header { display: flex; align-items: center; gap: 10px; padding-bottom: var(--sp-4); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); } .card-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .card-icon.blue { background: var(--blue-pale); } .card-icon.teal { background: var(--teal-bg); } .card-icon.amber { background: var(--amber-pale); } .card-icon.purple { background: var(--purple-bg); } .card-icon.green { background: var(--green-bg); } .card-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); } .card-body { padding: 0; } /* ── STANDALONE PAGE TYPOGRAPHY (dark theme) ────────────────── */ body .ap-h1.text-white { color: #fff; } body .ap-h3.text-white { color: #fff; } body .ap-eyebrow { color: var(--text-muted); } body .ap-prose { color: var(--text-secondary); } /* Dark-theme adjustments — when .ap-eyebrow attached to the dark standalone pages, the muted-on-light style is still readable but we boost letter-spacing slightly. */ .dark .ap-eyebrow { color: rgba(255,255,255,0.6); }