in the commercial/earnings/weather panels, where
a bare class loses "margin:0 auto" to ".hc-page p{ margin:0 }". The
physical-layer usage (a wrapping
, not a
) was never affected, so
this only visibly broke the other three panels' intro paragraphs. */
.hc-layers .hc-demo-map-copy{
max-width:54rem;
margin:0 auto 1.5rem;
font-size:1rem;
line-height:1.6;
color:var(--varial-gray-600);
text-align:center;
}
.hc-demo-map-copy p{
font-size:1rem;
line-height:1.6;
color:var(--varial-gray-600);
}
.hc-demo-map-copy p + p{ margin-top:0.75rem; }
.hc-layers .nem-map-card{
max-width:64rem;
min-height:26rem;
margin-inline:auto;
border-radius:1.25rem;
box-shadow:0 24px 60px rgba(13, 27, 46, 0.14);
}
/* The infrastructure title lives in the outer marketing card. Keep the map
rectangular beneath it; otherwise this inner card rounds a second top edge
and makes the two pieces look disconnected. */
.hc-layers .hc-infra-card .nem-map-card{
max-width:none;
margin:0;
border:0;
border-radius:0;
box-shadow:none;
}
@media (max-width: 575.98px){
.hc-layers .nem-map-card{ min-height:20rem; }
}
/* ---------- closing band (contact form embedded here, see below) ---------- */
/* White, matching the hero, so this reads as an invitation rather than a
claims-heavy closer. The contact form (id="contact") lives inside this
same section, directly under the headline/sub-copy, rather than a
separate section with its own heading below the old CTA button — one
close, not two. */
.hc-close-band{
background:var(--hc-surface);
padding-block: clamp(4rem, 10vw, 6.5rem);
text-align:center;
}
/* Widened and the max font-size trimmed, same fix as the hero h1: "Get
ahead of the power market." (31 characters) doesn't fit on one line in
the old 40rem/3.5rem combo, which was sized for the shorter text before
"power" was added. */
.hc-close-band h2{
color:var(--varial-marketing-ink);
font-family:var(--hc-font-serif);
font-size:clamp(2rem, 5vw, 3rem);
font-weight:600; letter-spacing:-0.015em; line-height:1.1;
max-width:52rem; margin-inline:auto;
}
/* Qualified by parent, not a bare .hc-close-sub class: a bare class here
loses to the global ".hc-page p{ margin:0 }" reset on specificity, which
silently kills this margin and the auto-centering with it (see the
.hc-close-band .hc-close-sub bug from earlier in this page's history). */
.hc-close-band .hc-close-sub{
margin-top:1rem; color:var(--varial-gray-500);
font-size:1.0625rem; line-height:1.5;
max-width:32rem; margin-inline:auto;
}
/* ---------- Varial X promo band ---------- */
/* Deliberately quiet: a slim strip between the layers section and the final
close band/contact form, not another full CTA section, so the beta
short-horizon product reads as an adjunct to the platform above rather
than a peer competing with it in nav or with the page's actual close. */
.hc-vx-promo{
background:var(--hc-bg);
border-top:1px solid var(--varial-border);
padding-block: clamp(2rem, 4vw, 2.75rem);
}
.hc-vx-promo-inner{
display:flex; align-items:center; justify-content:space-between; gap:2rem;
flex-wrap:wrap;
}
.hc-vx-promo-eyebrow{
font-family:var(--varial-font-mono); font-weight:600; font-size:0.75rem;
letter-spacing:0.08em; text-transform:uppercase;
color:var(--hc-accent);
margin-bottom:0.375rem;
}
.hc-vx-promo-copy h3{
font-family:var(--hc-font-serif);
font-size:1.125rem; font-weight:600; letter-spacing:-0.005em;
color:var(--varial-gray-900);
}
.hc-vx-promo-copy p:last-child{
margin-top:0.375rem;
font-size:0.9375rem; line-height:1.55; color:var(--varial-gray-500);
max-width:36rem;
}
.hc-vx-promo-link{
flex-shrink:0;
font-weight:600; font-size:0.9375rem; color:var(--hc-accent);
white-space:nowrap;
transition:opacity .15s ease;
}
.hc-vx-promo-link:hover{ opacity:0.7; }
@media (max-width:600px){
.hc-vx-promo-inner{ flex-direction:column; align-items:flex-start; }
}
/* ---------- contact form (inside .hc-close-band above) ---------- */
/* Reuses contact.css's existing form styling (loaded alongside, see
extra_css) rather than re-styling every input/label from scratch — this
page only adds the card placement/palette around the same form markup
the old standalone /contact/ page used. */
.hc-contact-link{ color:var(--hc-accent); font-weight:600; }
/* Explicit background: contact.css's .contact-form-card doesn't set one, so
the card was inheriting Bootstrap's --bs-card-bg, which resolves to the
site's warm cream body background (--bs-body-bg, #FAF7EE) rather than
this page's own sage tokens. margin-top replaces the vertical space the
old standalone section's "Let's talk" heading + intro used to provide,
now that the card sits directly under .hc-close-band's own sub-copy. */
.hc-contact-card{
max-width:48rem;
margin:clamp(2rem, 4vw, 2.75rem) auto 0;
background:var(--hc-bg);
border-color:var(--varial-border);
text-align:left;
}
/* contact.css's default input background (--varial-gray-50) reads as barely
different from this card's own sage background; white gives the fields
real contrast against the card. */
.hc-contact-card .form-control{
background:var(--hc-surface);
}
/* Wide, not tall: name + email stacked in a narrower left column, message
filling a taller box in the wider right column, both columns the same
height so the message box doesn't dwarf or shrink against the two short
fields beside it. */
.hc-contact-grid{
display:grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
gap:1.75rem;
}
.hc-contact-grid-left{
display:flex; flex-direction:column;
}
.hc-contact-grid-right{
display:flex; flex-direction:column;
}
.hc-contact-grid-right textarea{
flex:1;
min-height:9.5rem;
resize:vertical;
}
/* Cloudflare's default Turnstile widget is a fixed 300px wide iframe, which
overflows this card's own padding on a narrow phone even with
data-size="flexible" set above (a defensive floor, not the primary fix). */
.hc-contact-card .cf-turnstile{ max-width:100%; }
@media (max-width: 680px){
.hc-contact-grid{ grid-template-columns:1fr; }
}
/* ---------- shared marketing footer ---------- */
/* These pages hide the newsletter form to keep the footer to the wordmark. */
:is(.home-concept-page, .varial-x-page) #newsletter-signup,
:is(.home-concept-page, .varial-x-page) .home-footer-signin{
display:none;
}
@media (max-width: 780px){
.hc-steps-grid{ grid-template-columns:1fr; row-gap:2rem; }
/* Zeroing only padding-right left the 2.25rem padding-left from the
shorthand in place, so the centred text inside sat in a lopsided box and
read as pushed right of centre. Symmetric padding fixes it. */
.hc-step{ border-right:none; padding-inline:1.25rem; }
/* The heading stays left-aligned above 780px next to the numbered steps,
but reads lopsided sitting over now-centred single-column steps. */
.hc-steps-head{ text-align:center; }
}