/* Biply Agency: product-page call to action, quote form, case studies. Builds on the market design tokens in styles.css. */
.ag-cta { padding: 8px 0 72px; }
.ag-cta-card { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: clamp(26px, 4.5vw, 46px); border-radius: var(--radius-m, 24px); background: var(--night, #0b0b10); color: #fff; position: relative; overflow: hidden; }
.ag-cta-card::after { content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(85, 70, 255, .55), transparent 70%); pointer-events: none; }
.ag-cta-copy { flex: 1 1 380px; max-width: 640px; position: relative; z-index: 1; }
.ag-cta-copy .eyebrow { color: var(--accent-glow, #a8a2ff); }
.ag-cta-copy h2 { color: #fff; margin: 8px 0 10px; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
.ag-cta-copy p { color: #c9c9d1; margin: 0 0 14px; line-height: 1.6; }
.ag-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: #e6e6ec; font-size: .95rem; }
.ag-ticks li { padding-left: 24px; position: relative; }
.ag-ticks li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid #5ee0a0; border-bottom: 2px solid #5ee0a0; transform: rotate(-45deg); }
.ag-cta-actions { display: grid; gap: 14px; justify-items: start; position: relative; z-index: 1; min-width: 220px; }
.ag-link { color: var(--accent-ink, #4a3bd9); font-weight: 600; text-decoration: none; }
.ag-cta-card .ag-link { color: #cfcaff; }
.ag-link:hover { text-decoration: underline; }

.wrap.ag-hero { padding-top: 116px; padding-bottom: 8px; }
.ag-hero h1 { max-width: 20ch; }
.wrap.ag-hero.ag-thanks { padding-bottom: 96px; max-width: 760px; }
.ag-thanks h1 { max-width: none; }
.ag-hero h1 { margin: 10px 0 16px; }
.ag-hero .lead { max-width: 680px; }
.ag-thanks .lead { max-width: 560px; }
.ag-thanks { text-align: center; margin-inline: auto; padding-bottom: 80px; }
.ag-thanks .lead { margin-inline: auto; }
.ag-check { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: #e6f6ef; color: var(--good, #12805c); }

.wrap.ag-grid { display: grid; gap: 28px; padding-top: 36px; padding-bottom: 96px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .wrap.ag-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: start; } }
.ag-form { background: #fff; border: 1px solid var(--line, rgba(0, 0, 0, .08)); border-radius: var(--radius-m, 24px); padding: clamp(22px, 4vw, 38px); box-shadow: 0 18px 50px -28px rgba(0, 0, 0, .25); display: grid; gap: 16px; }
.ag-form h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.02em; }
.ag-sub { margin: -8px 0 4px; color: var(--muted, #6e6e73); }
.ag-two { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ag-two { grid-template-columns: 1fr 1fr; } }
.ag-form label { display: grid; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--ink, #1d1d1f); }
.ag-form label small { font-weight: 400; color: var(--soft, #86868b); }
.ag-form input, .ag-form select, .ag-form textarea { width: 100%; font: inherit; font-weight: 400; padding: 13px 14px; border: 1px solid #d2d2d7; border-radius: 12px; background: #fff; color: var(--ink, #1d1d1f); transition: border-color .15s, box-shadow .15s; }
.ag-form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.ag-form input:focus, .ag-form select:focus, .ag-form textarea:focus { outline: 0; border-color: var(--accent, #5546ff); box-shadow: 0 0 0 4px rgba(85, 70, 255, .14); }
.ag-submit { width: 100%; height: 54px; border: 0; cursor: pointer; font-size: 1rem; }
.ag-fine { margin: 0; font-size: .82rem; color: var(--soft, #86868b); text-align: center; }
.ag-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ag-about { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft, #f0eefc); font-size: .95rem; }
.ag-about span { color: var(--muted, #6e6e73); }
.ag-about a { margin-left: auto; font-size: .85rem; }
.ag-alert { margin-bottom: 16px; padding: 14px 18px; border-radius: 14px; background: #fdecea; color: #8a2c22; }
.ag-alert ul { margin: 6px 0 0; padding-left: 18px; }

.ag-side { display: grid; gap: 16px; }
.ag-card { background: var(--panel, #f5f5f7); border-radius: var(--radius-m, 24px); padding: 24px; }
.ag-card h3 { margin: 0 0 12px; font-size: 1.1rem; }
.ag-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-2, #515154); line-height: 1.5; }
.ag-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2, #515154); }
.ag-links { margin: 0; font-size: .95rem; }
.ag-links a { color: var(--accent-ink, #4a3bd9); font-weight: 600; text-decoration: none; }
.ag-links a:hover { text-decoration: underline; }

.wrap.ag-cases { display: grid; gap: 22px; padding-top: 36px; padding-bottom: 28px; }
.ag-case { background: #fff; border: 1px solid var(--line, rgba(0, 0, 0, .08)); border-radius: var(--radius-m, 24px); padding: clamp(22px, 4vw, 38px); box-shadow: 0 18px 50px -34px rgba(0, 0, 0, .3); scroll-margin-top: 90px; }
.ag-tag { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink, #4a3bd9); background: var(--accent-soft, #f0eefc); padding: 5px 12px; border-radius: 999px; }
.ag-case-head h2 { margin: 12px 0 18px; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; }
.ag-case-body { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .ag-case-body { grid-template-columns: 1fr 1fr; gap: 44px; } }
.ag-case h3 { margin: 0 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, #6e6e73); }
.ag-case p { margin: 0 0 18px; line-height: 1.65; color: var(--ink-2, #515154); }
.ag-proof { margin-top: 18px !important; padding: 12px 14px; border-left: 3px solid var(--accent, #5546ff); background: var(--panel, #f5f5f7); border-radius: 0 10px 10px 0; font-size: .95rem; }
.ag-case-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line, rgba(0, 0, 0, .08)); }
.wrap.ag-cases + .wrap { padding-bottom: 96px; }

@media (max-width: 640px) {
  .ag-cta-actions { width: 100%; }
  .ag-cta-actions .btn { width: 100%; text-align: center; }
  .ag-case-foot .btn { width: 100%; text-align: center; }
}
.ag-thanks p:last-child { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 28px auto 0; }