/* custom design page (views/site/pages/customizations.php); site.css's .steps is the home page's, so steps here are .cd-steps */
.cd-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding-block: 56px 0; }
.cd-hero h1 { font-size: clamp(40px, 5.4vw, 66px); font-weight: 800; letter-spacing: -.045em; }
.cd-hero .lead { margin-top: 18px; }
.cd-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.cd-stage { position: relative; padding-right: 60px; }
.cd-viewport { height: 560px; overflow: hidden; }
.cd-viewport img { width: 100%; transition: transform 7s ease-in-out; }
.cd-stage .frame:hover .cd-viewport img { transform: translateY(calc(-100% + 560px)); }
.cd-stage .phone { position: absolute; right: 0; bottom: -36px; width: 180px; }
@media (max-width: 960px) {
    .cd-hero { grid-template-columns: 1fr; }
    .cd-viewport { height: 380px; }
    .cd-stage .frame:hover .cd-viewport img { transform: translateY(calc(-100% + 380px)); }
    .cd-stage { padding-right: 0; }
    .cd-stage .phone { width: 110px; }
}
.cd-steps .card { position: relative; }
.cd-steps .card .n { font: 600 13px/1 var(--mono); color: var(--accent); }
.cd-brief { align-items: start; }
.cd-form { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; }
.cd-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .cd-form .row2 { grid-template-columns: 1fr; } .cd-form { padding: 20px; } }
.cd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cd-end { height: 120px; }