/* Trade landing page (approved template, docs/TRADE_PAGE_TEMPLATE.md). Loads after index.css and uses the homepage
   header, hero, sample showcase, deliverables, pricing cards, questions, steps, contact block and footer as they are.
   Only what the homepage does not have is defined here, all scoped to .trade-page. */
.trade-page .nav a:focus-visible, .trade-page .hero a:focus-visible, .trade-page .how-it-works a:focus-visible { outline-color: #f5f1e7; }

/* Hero: the homepage hero. The trade name is longer than "CONTRACTOR", so the copy column is wider and the heading a step smaller. */
@media (min-width: 801px) {
    .trade-page .hero-content { grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr); }
    .trade-page .hero h1 { font-size: clamp(44px, 4.4vw, 64px); }
}

/* Demo showcase: one desktop capture of the existing fictional demo, framed like the homepage sample cards,
   with a one-line description, the single fictional-example note and the link beside it (below it on narrow screens). */
.trade-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.trade-demo figure { margin: 0; overflow: hidden; background: var(--bg-cream); border: 1px solid var(--card-border); border-radius: 8px; box-shadow: 0 18px 45px rgba(31, 31, 31, 0.08); }
.trade-demo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.trade-demo-body p { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1rem; }
.trade-demo-body strong { color: var(--text-headline); }
.trade-demo-body p.trade-demo-note { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.25rem; }
.trade-demo-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.75rem 1rem; border-radius: 6px; background: var(--text-headline); color: #fff; text-decoration: none; font-weight: 800; transition: background 0.2s, transform 0.2s; }
.trade-demo-link:hover { background: var(--action-orange); transform: translateY(-2px); }

.trade-page .sample-showcase-head h2 { text-wrap: balance; }

/* Pricing: a line under the price saying what that package often covers for this trade. */
.trade-card-example { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.trade-page .pricing-card.featured .trade-card-example { color: inherit; opacity: .85; }

/* Closing block: the in-text link uses the site's link colour instead of the browser default. */
.trade-page .contact:not(.contact-closing) p a { color: var(--action-orange-deep); text-underline-offset: .2em; }
.trade-page .contact:not(.contact-closing) p a:hover { color: var(--action-orange); }

/* Steps intro and step text carry links on this page. */
.trade-page .how-it-works .section-header a, .trade-page .step a { color: #f5f1e7; text-underline-offset: .2em; }

@media (min-width: 768px) {
    .trade-demo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; }
}