/* request-demo.aspx and contact.aspx (S7, 10/23/2026): the feature band and the capability statement block rebuilt as
   plain blocks (rd-*) instead of nested Bootstrap columns, and the demo hero as a two-column grid. Self-contained so the
   classic look gets the same layout; under the new master (body.tp-v2) the hero and the band run full width. Fonts are
   inherited from the master, so the page reads in one family. Greens from css/tp-tokens.css with a fallback. */

/* hero: copy left, calendar card right; stacked on a phone */
.rd-hero-inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; align-items: start; }
.rd-hero-copy { min-width: 0; }
.rd-hero-card { min-width: 0; }
.demo-hero-section { padding: 56px 0 64px; }
.demo-hero-section .demo-form-card { margin: 0; }
.rd-hero-copy ul.demo-checklist li { display: flex; align-items: flex-start; gap: 12px; }
body.tp-v2 .demo-hero-section { margin: 0; }
/* under the new master these pages are "public-wide": the column has no padding, so the page centers its own blocks */
body.tp-v2 .content.full > .wrap > .container { max-width: 1168px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
body.tp-v2 .demo-hero-section h1 { font-size: 34px !important; }
body.tp-v2 .demo-hero-section .demo-form-card { background: #fff !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(2, 6, 23, .35); padding: 22px 22px 18px; }
body.tp-v2 .demo-hero-section .demo-form-card h4 { font-size: 18px; margin: 0 0 14px; text-align: center; }
body.tp-v2 .demo-hero-section .demo-form-card h4 font { color: #0f172a !important; }

/* the feature band: heading block above a card grid */
.rd-band { background: #f1f5f9; padding: 48px 24px; }
.rd-inner { max-width: 1120px; margin: 0 auto; }
.rd-band-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.rd-kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tp-green-ink, #047857); margin-bottom: 8px; }
.rd-band-head h2 { font-size: 28px; line-height: 1.25; margin: 0 0 10px; color: #0f172a; }
.rd-band-head p { font-size: 16px; line-height: 1.55; color: #334155; margin: 0 0 18px; }
.rd-cta { display: inline-block; }
.rd-cta .rd-btn { display: inline-block; width: auto; min-width: 260px; padding: 11px 22px; font-size: 15px; font-weight: 600; border-radius: 6px; background: var(--tp-green, #10b981); border: 1px solid var(--tp-green, #10b981); color: #fff; }
.rd-cta .rd-btn:hover { background: var(--tp-green-dark, #059669); border-color: var(--tp-green-dark, #059669); color: #fff; }
.rd-cta small { display: block; margin-top: 8px; font-size: 12.5px; color: #64748b; }
.rd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rd-feature { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.rd-feature .rd-ico { width: 40px; height: 40px; border-radius: 8px; background: var(--tp-green-soft, #ecfdf5); color: var(--tp-green-dark, #059669); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; }
.rd-feature h3 { font-size: 16px; line-height: 1.3; margin: 0 0 6px; color: #0f172a; }
.rd-feature p { font-size: 14px; line-height: 1.5; color: #475569; margin: 0; }
body.tp-v2 .rd-band { margin: 0; }

/* the capability statement block: a dark card, copy left, the image sized to itself on the right */
.rd-csg-wrap { max-width: 1120px; margin: 40px auto; padding: 0 24px; }
.rd-csg { background: #0f172a; color: #fff; border-radius: 14px; padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.rd-csg .rd-kicker { color: var(--tp-green, #10b981); }
.rd-csg h2, body.tp-v2 .rd-csg h2 { font-size: 28px; line-height: 1.25; margin: 0 0 14px; color: #fff; }
.rd-csg h2 .rd-accent { color: var(--tp-green, #10b981); }
.rd-csg p { font-size: 15.5px; line-height: 1.55; color: #cbd5e1; margin: 0 0 10px; }
.rd-csg .rd-cta { margin-top: 18px; }
.rd-csg .rd-cta small { color: #94a3b8; }
.rd-csg .rd-checks { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; font-size: 14px; color: #e2e8f0; }
.rd-csg .rd-checks i { color: var(--tp-green, #10b981); margin-right: 6px; }
.rd-csg .rd-shot { background: #fff; border-radius: 10px; padding: 10px; line-height: 0; }
/* the screenshot file carries 40% blank space under the picture (content ends at row 847 of 1463); crop to the picture */
.rd-csg .rd-shot img { width: 100%; height: auto; aspect-ratio: 1002 / 850; object-fit: cover; object-position: top; border-radius: 6px; display: block; }

@media (max-width: 980px) {
    .rd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rd-csg { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
    .rd-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
    .rd-grid { grid-template-columns: minmax(0, 1fr); }
    .rd-band { padding: 32px 16px; }
    .rd-band-head h2, .rd-csg h2 { font-size: 23px; }
    .rd-csg-wrap { padding: 0 16px; margin: 24px auto; }
    .rd-cta .rd-btn { width: 100%; min-width: 0; }
    .rd-hero-inner { padding: 0 16px; }
    .demo-hero-section { padding: 32px 0 36px; }
    body.tp-v2 .demo-hero-section h1 { font-size: 26px !important; }
}

/* new look (11/09/2026): a wide public page whose bands run edge to edge (contact.aspx first; request-demo.aspx when it moves). The master
   paints the body class in its own PreRender, so the page adds tp-wide-bands after that, the way Default.aspx adds tp-home-page. */
body.tp-v2.tp-wide-bands .app, body.tp-v2.tp-wide-bands .app.plain { max-width: none; width: 100%; margin: 0; }
body.tp-v2.tp-wide-bands .content.full { padding: 0; }
body.tp-v2.tp-wide-bands .app { min-height: 0; }