.quilt-demo-hero {
position: relative;
overflow: hidden;
}
/* ── Layout ────────────────────────────────────────────── */
.quilt-demo-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 64px;
align-items: start;
}
/* Tablet: keep 2-col, tighten gap and ratio so the form doesn't crowd the headline. */
@media (max-width: 1100px) {
.quilt-demo-hero__inner {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 40px;
}
}
.quilt-demo-hero__left {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 640px;
}
/* ── Eyebrow pill ─────────────────────────────────────── */
.quilt-demo-hero__pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border: 1px solid var(--borders);
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
align-self: flex-start;
}
.quilt-demo-hero__pill-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--primary);;
flex: 0 0 auto;
}
/* ── Headline ─────────────────────────────────────────── */
.quilt-demo-hero__headline {
margin: 0;
text-wrap: balance;
}
.quilt-demo-hero__headline p {
margin: 0;
}
.quilt-demo-hero__accent {
color: var(--primary);
font-style: italic;
font-weight: 600;
}
/* ── Subdek ───────────────────────────────────────────── */
.quilt-demo-hero__subdek {
font-size: 17px;
line-height: 1.55;
color: var(--cdh-ink);
max-width: 520px;
}
.quilt-demo-hero__subdek p {
margin: 0 0 10px;
}
.quilt-demo-hero__subdek p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
.quilt-demo-hero__subdek { font-size: 15px; }
}
/* ── Offer block ──────────────────────────────────────── */
.quilt-demo-hero__offer {
position: relative;
border-radius: 12px;
padding: 22px 26px;
display: flex;
align-items: center;
gap: 20px;
overflow: hidden;
max-width: 580px;
}
.quilt-demo-hero__offer-disc {
position: absolute;
top: -60px;
right: -60px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(255, 255, 250, 0.10);
pointer-events: none;
}
.quilt-demo-hero__offer-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--white);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-weight: 700;
font-size: 26px;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
.quilt-demo-hero__offer-body {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-width: 0;
}
.quilt-demo-hero__offer-headline {
font-weight: 700;
font-size: 22px;
line-height: 1.15;
letter-spacing: -0.3px;
margin-bottom: 4px;
}
.quilt-demo-hero__offer-sub {
font-size: 13px;
line-height: 1.45;
opacity: 0.85;
}
.quilt-demo-hero__offer-sub p { margin: 0; }
.quilt-demo-hero__offer-sub em {
opacity: 0.85;
font-style: italic;
}
@media (max-width: 480px) {
.quilt-demo-hero__offer { padding: 18px; gap: 16px; }
.quilt-demo-hero__offer-circle { width: 64px; height: 64px; font-size: 20px; }
.quilt-demo-hero__offer-headline { font-size: 18px; }
}
/* ── Steps ────────────────────────────────────────────── */
.quilt-demo-hero__steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 540px;
counter-reset: cdh-step;
}
.quilt-demo-hero__step {
display: flex;
align-items: flex-start;
gap: 16px;
}
.quilt-demo-hero__step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--secondary);
display: inline-flex;
align-items: center;
color: var(--white);
justify-content: center;
font-weight: 700;
font-size: 14px;
flex: 0 0 auto;
}
.quilt-demo-hero__step-title {
font-weight: 600;
font-size: 18px;
line-height: 1.2;
margin-bottom: 3px;
}
.quilt-demo-hero__step-text {
font-size: 14px;
line-height: 1.5;
}
/* ── Trust strip ──────────────────────────────────────── */
.quilt-demo-hero__trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding-top: 22px;
border-top: 1px solid rgba(21, 26, 20, 0.10);
row-gap: 10px;
}
.quilt-demo-hero__trust-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
}
.quilt-demo-hero__trust-item + .quilt-demo-hero__trust-item {
border-left: 1px solid rgba(21, 26, 20, 0.18);
padding-left: 16px;
}
.quilt-demo-hero__trust-stars {
display: inline-flex;
gap: 1px;
color: var(--cdh-yellow, #FFD550);
}
.quilt-demo-hero__trust-stars svg { fill: currentColor; color: #F4B400; }
@media (max-width: 720px) {
.quilt-demo-hero__trust-item + .quilt-demo-hero__trust-item {
border-left: none;
padding-left: 0;
}
}
/* ── Right column / form card ─────────────────────────── */
.quilt-demo-hero__right {
position: relative;
margin: 0;
}
.quilt-demo-hero__card {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(21, 26, 20, 0.06);
border-radius: 16px;
box-shadow: 0 24px 60px rgba(21, 26, 20, 0.10), 0 2px 8px rgba(21, 26, 20, 0.04);
overflow: hidden;
width: 100%;
margin-left: auto;
}
/* Gradient top strip removed on every brand (Miles 2026-10-26: generic accent; the shelf tag is the branded element). */
.quilt-demo-hero__card-stripe {
display: none;
}
.quilt-demo-hero__card-body {
padding: 36px 32px 28px;
}
.quilt-demo-hero__card-pill {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 6px 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 14px;
}
.quilt-demo-hero__card-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.quilt-demo-hero__card-heading {
color: var(--heading);
font-weight: 700;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.3px;
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
.quilt-demo-hero__card-heading-row {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 8px;
position: relative;
padding-right: 0;
}
.quilt-demo-hero__card-toggle {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 6px;
background: var(--primary);;
color: var(--white);
display: none;
align-items: center;
justify-content: center;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 200ms ease;
}
.quilt-demo-hero__card-collapse {
overflow: hidden;
transition: height 400ms ease;
}
/* Sticky interactive heading — matches Quilt Content with Form */
@media (min-width: 992px) {
.quilt-demo-hero__right.is-sticky-enabled .quilt-demo-hero__card-heading-row {
cursor: pointer;
padding-right: 4px;
}
.quilt-demo-hero.is-form-closed .quilt-demo-hero__card-toggle,
.quilt-demo-hero.is-form-visible .quilt-demo-hero__card-toggle {
display: inline-flex;
}
.quilt-demo-hero.is-form-visible .quilt-demo-hero__card-toggle {
transform: rotate(180deg);
}
.quilt-demo-hero.is-form-closed .quilt-demo-hero__card {
backdrop-filter: blur(1.25rem);
-webkit-backdrop-filter: blur(1.25rem);
}
.quilt-demo-hero__right.is-sticky-enabled .quilt-demo-hero__card {
box-shadow: none !important;
}
}
.quilt-demo-hero__card-sub {
font-size: 14px;
line-height: 1.55;
color: rgba(21, 26, 20, 0.70);
}
.quilt-demo-hero__card-sub p { margin: 0; }
/* Progress */
.quilt-demo-hero__progress {
display: flex;
align-items: center;
gap: 12px;
margin: 22px 0 18px;
}
.quilt-demo-hero__progress-track {
flex: 1;
height: 3px;
background: var(--cdh-tan);
border-radius: 999px;
overflow: hidden;
}
.quilt-demo-hero__progress-fill {
height: 100%;
background: var(--cdh-forest);
width: 50%;
transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quilt-demo-hero__progress-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cdh-forest);
white-space: nowrap;
}
/* Step panes */
.quilt-demo-hero__step-pane {
display: flex;
flex-direction: column;
gap: 14px;
}
.quilt-demo-hero__step-pane[hidden] { display: none; }
.quilt-demo-hero__field-section {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(21, 71, 39, 0.55);
margin-bottom: 2px;
}
.quilt-demo-hero__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.quilt-demo-hero__field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 480px) {
.quilt-demo-hero__field-row { grid-template-columns: 1fr; }
}
.quilt-demo-hero__field-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(21, 26, 20, 0.70);
}
.quilt-demo-hero__field-input {
width: 100%;
height: 46px;
border: 1px solid var(--cdh-tan);
border-radius: 8px;
padding: 0 14px;
font-size: 14.5px;
color: var(--cdh-ink);
background: #FFFFFF;
outline: none;
transition: border-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quilt-demo-hero__field-input::placeholder {
color: rgba(21, 26, 20, 0.40);
}
.quilt-demo-hero__field-input:focus {
border-color: var(--cdh-forest);
box-shadow: 0 0 0 3px rgba(21, 71, 39, 0.12);
}
.quilt-demo-hero__field-input.is-invalid {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(255, 55, 0, 0.12);
}
.quilt-demo-hero__field-error {
font-size: 12px;
color: var(--primary);
min-height: 1em;
line-height: 1;
}
/* Primary CTA */
.quilt-demo-hero__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
background: var(--cdh-ink);
color: var(--white);
border: 1px solid var(--cdh-ink);
border-radius: 4px;
padding: 16px 22px;
font-weight: 600;
font-size: 15px;
letter-spacing: 0.15px;
cursor: pointer;
text-decoration: none;
transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
min-height: 46px;
}
.quilt-demo-hero__cta:hover {
background: #2B2F2A;
border-color: #2B2F2A;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.quilt-demo-hero__cta:active {
transform: scale(0.98);
}
.quilt-demo-hero__cta svg {
transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quilt-demo-hero__cta:hover svg { transform: translateX(3px); }
.quilt-demo-hero__step-actions {
display: flex;
gap: 12px;
margin-top: 4px;
}
.quilt-demo-hero__back {
flex: 0 0 auto;
background: transparent;
color: var(--cdh-forest);
border: 1px solid var(--cdh-tan);
border-radius: 4px;
padding: 16px 22px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
min-height: 46px;
transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quilt-demo-hero__back:hover { background: var(--cdh-cream-2); }
/* Success state */
.quilt-demo-hero__step-pane.is-success {
text-align: center;
align-items: center;
padding: 12px 0 4px;
gap: 10px;
}
.quilt-demo-hero__success-check {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--cdh-success);
color: #FFFFFA;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.quilt-demo-hero__success-heading {
font-weight: 700;
font-size: 22px;
line-height: 1.2;
color: var(--cdh-forest);
margin: 0;
}
.quilt-demo-hero__success-body {
font-size: 14px;
line-height: 1.5;
color: rgba(21, 26, 20, 0.70);
max-width: 360px;
}
.quilt-demo-hero__success-body p { margin: 0; }
.quilt-demo-hero__success-body a {
color: var(--cdh-orange);
text-decoration: underline;
}
/* ─── HubSpot form embed ──────────────────────────────────────────────
* Style HubSpot's rendered form DOM to match the card aesthetic.
* HubSpot ships v2 (fieldset + legend + .input wrapper) and v4 (modern
* div-based) markup — these rules cover both. !important is used
* intentionally to override HubSpot's inline styles + bootstrap
* collisions on .input width / .hs-form-field float / etc. */
.quilt-demo-hero__form-slot { display: block; }
.quilt-demo-hero__form-slot .hs-form {
display: flex;
flex-direction: column;
gap: 16px;
}
/* JS-injected step pane container */
.quilt-demo-hero__form-slot .cdh-step {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Reset HubSpot's fieldset — strip border + padding, force full width
* so the form-columns-N layout doesn't shrink-wrap. */
.quilt-demo-hero__form-slot fieldset,
.quilt-demo-hero__form-slot fieldset.form-columns-1,
.quilt-demo-hero__form-slot fieldset.form-columns-2,
.quilt-demo-hero__form-slot fieldset.form-columns-3 {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Hide HubSpot's legends (field descriptions). Some brands' forms repeat the
* label in the description (IT Retail: "First Name", "Email"). */
.quilt-demo-hero__form-slot legend {
display: none;
}
/* Except on checkbox fields: that description is the SMS consent disclosure
* ("By entering your phone number and opting in...") and must stay visible. */
.quilt-demo-hero__form-slot .hs-form-field:has(input[type="checkbox"]) legend.hs-field-desc {
display: block;
float: none;
width: auto;
margin: 0 0 8px;
padding: 0;
border: 0;
font-size: 11px;
line-height: 1.45;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: #4a4f57;
}
/* Field wrapper — full width regardless of HubSpot's inline styles.
* max-width: none is critical: HubSpot stamps `max-width: calc(50% - 6px)`
* on .hs-form-field which would re-halve our grid columns into 99px boxes. */
.quilt-demo-hero__form-slot .hs-form-field {
display: flex;
flex-direction: column;
gap: 6px;
width: 100% !important;
max-width: none !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* HubSpot v2's .input wrapper — strip its margin-right + force full width */
.quilt-demo-hero__form-slot .input,
.quilt-demo-hero__form-slot .hs-form-field .input {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
display: block;
}
/* Field label */
.quilt-demo-hero__form-slot .hs-form-field > label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1.3;
margin: 0;
display: block;
color: var(--body_color);
}
/* Required asterisk — orange, no extra spacing, no wrap */
.quilt-demo-hero__form-slot .hs-form-required {
color: var(--primary);
margin-left: 2px;
font-weight: 700;
display: inline;
white-space: nowrap;
}
/* ── Inputs ───────────────────────────────────────────── */
.quilt-demo-hero__form-slot input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quilt-demo-hero__form-slot select.hs-input,
.quilt-demo-hero__form-slot textarea.hs-input {
width: 100% !important;
max-width: 100% !important;
height: 48px;
border-radius: 8px;
padding: 0 14px;
font-size: 15px;
font-weight: 400;
color: var(--body_color);
outline: none;
box-shadow: none;
transition: border-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
box-sizing: border-box;
min-height: 2.9375rem;
}
.quilt-demo-hero__form-slot textarea.hs-input {
height: auto;
min-height: 96px;
padding: 12px 14px;
resize: vertical;
line-height: 1.4;
}
.quilt-demo-hero__form-slot input.hs-input::placeholder,
.quilt-demo-hero__form-slot textarea.hs-input::placeholder {
color: rgba(21, 26, 20, 0.36);
}
.quilt-demo-hero__form-slot input.hs-input:focus,
.quilt-demo-hero__form-slot select.hs-input:focus,
.quilt-demo-hero__form-slot textarea.hs-input:focus {
box-shadow: 0 0 0 3px rgba(21, 71, 39, 0.14);
}
.quilt-demo-hero__form-slot input.hs-input.invalid,
.quilt-demo-hero__form-slot input.hs-input.error,
.quilt-demo-hero__form-slot select.hs-input.invalid,
.quilt-demo-hero__form-slot textarea.hs-input.invalid {
box-shadow: 0 0 0 3px rgba(255, 55, 0, 0.10);
}
/* Number-only inputs (e.g. zip) — same look */
.quilt-demo-hero__form-slot input[type="number"].hs-input {
-moz-appearance: textfield;
}
.quilt-demo-hero__form-slot input[type="number"].hs-input::-webkit-outer-spin-button,
.quilt-demo-hero__form-slot input[type="number"].hs-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ── Two-column rows (firstname + lastname) ─────────────
* HubSpot v2 stamps inline width:50% + float:left on each .hs-form-field
* inside form-columns-2. We override with grid for predictable spacing
* across browsers + zero-margin recovery. */
.quilt-demo-hero__form-slot .form-columns-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
float: none !important;
}
.quilt-demo-hero__form-slot .form-columns-2 .hs-form-field {
width: 100% !important;
max-width: none !important;
}
.quilt-demo-hero__form-slot .form-columns-2 .input {
margin-right: 0 !important;
}
@media (max-width: 480px) {
.quilt-demo-hero__form-slot .form-columns-2 {
grid-template-columns: 1fr !important;
}
}
/* 3-column row — rare but handle it */
.quilt-demo-hero__form-slot .form-columns-3 {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 12px !important;
width: 100% !important;
}
@media (max-width: 600px) {
.quilt-demo-hero__form-slot .form-columns-3 {
grid-template-columns: 1fr !important;
}
}
/* ── Phone number widget (intl-tel-input) ────────────────
* HubSpot's actual DOM:
* .hs-form-field.hs-fieldtype-phonenumber
* > .input (our flex row)
* > div.hs-input.hs-fieldtype-intl-phone ← the visible widget
* > select (country, ~130px)
* > input[type=tel] (number, fills remaining)
* > input[type=hidden] (combined value)
*
* The intl-phone div is NOT an actual input — it's a pseudo-input wrapper
* that itself carries the .hs-input class. We strip its border (the children
* carry their own borders) and make it a flex row so country + number sit
* side by side instead of wrapping. */
.quilt-demo-hero__form-slot .hs-fieldtype-phonenumber .input {
display: block !important;
width: 100% !important;
}
.quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone {
display: flex !important;
flex-direction: row !important;
align-items: stretch;
gap: 8px;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Country select — fixed width on the left */
.quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > select.hs-input {
flex: 0 0 130px;
width: 130px !important;
min-width: 0 !important;
max-width: 130px !important;
height: 48px !important;
padding: 0 12px;
cursor: pointer;
/* Custom dropdown arrow (HubSpot's default is browser-native ugly) */
-webkit-appearance: none;
appearance: none;
background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23154727' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
/* Phone number input — fills remaining width */
.quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > input[type="tel"].hs-input,
.quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > input[type="tel"] {
flex: 1 1 auto;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* Hidden combined-value input stays out of layout */
.quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > input[type="hidden"] {
display: none !important;
}
@media (max-width: 480px) {
.quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > select.hs-input {
flex: 0 0 110px;
width: 110px !important;
max-width: 110px !important;
}
}
/* ── Checkbox / Radio fields ────────────────────────────
* Single boolean checkbox (e.g. SMS opt-in) — uppercase label like
* other field labels, but the actual stays
* native-styled with brand-tinted accent-color. */
.quilt-demo-hero__form-slot input[type="checkbox"],
.quilt-demo-hero__form-slot input[type="radio"] {
width: 16px;
height: 16px;
margin: 2px 0 0;
accent-color: var(--cdh-forest);
flex: 0 0 16px;
cursor: pointer;
}
.quilt-demo-hero__form-slot .hs-form-booleancheckbox-display,
.quilt-demo-hero__form-slot .hs-form-booleancheckbox label,
.quilt-demo-hero__form-slot ul.inputs-list li label {
display: flex !important;
align-items: flex-start;
gap: 10px;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--body_color) !important;
cursor: pointer;
line-height: 1.4;
margin: 0;
}
.quilt-demo-hero__form-slot ul.inputs-list {
list-style: none;
margin: 0;
padding: 0;
}
.quilt-demo-hero__form-slot ul.inputs-list > li + li {
margin-top: 8px;
}
/* ── Section divider (multistep) ─────────────────────────
* JS adds .cdh-section-header to .hs-richtext elements that act as
* step dividers. Other rich-text (legal, body content) keeps its
* default body styling — see below. */
.quilt-demo-hero__form-slot .cdh-section-header {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(21, 71, 39, 0.55);
margin: 4px 0 -4px;
}
.quilt-demo-hero__form-slot .cdh-section-header > * {
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
margin: 0;
}
/* ── Rich text + legal copy — readable body style ─────── */
.quilt-demo-hero__form-slot .hs-richtext:not(.cdh-section-header),
.quilt-demo-hero__form-slot .legal-consent-container,
.quilt-demo-hero__form-slot .legal-consent-container > *,
.quilt-demo-hero__form-slot .hs-richtext:not(.cdh-section-header) p,
.quilt-demo-hero__form-slot .legal-consent-container p {
font-size: 12px;
line-height: 1.5;
color: rgba(21, 26, 20, 0.65);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
margin: 0;
}
.quilt-demo-hero__form-slot .hs-richtext:not(.cdh-section-header) p + p,
.quilt-demo-hero__form-slot .legal-consent-container p + p {
margin-top: 6px;
}
.quilt-demo-hero__form-slot .legal-consent-container .hs-form-booleancheckbox-display {
margin-top: 6px;
}
/* ── Errors ─────────────────────────────────────────────
* Inline errors render as a list of beneath each invalid input.
* Keep them tight so they don't push the layout. */
.quilt-demo-hero__form-slot .hs-error-msgs {
list-style: none;
margin: 4px 0 0 !important;
padding: 0 !important;
}
.quilt-demo-hero__form-slot .hs-error-msgs li,
.quilt-demo-hero__form-slot .hs-error-msg,
.quilt-demo-hero__form-slot label.hs-error-msg,
.quilt-demo-hero__form-slot label.hs-main-font-element {
font-size: 12px !important;
color: var(--primary); !important;
line-height: 1.35;
margin: 0 !important;
font-weight: 500;
text-transform: none !important;
letter-spacing: 0 !important;
display: block;
}
/* Top-of-form error summary (rendered by HubSpot when submission fails) */
.quilt-demo-hero__form-slot .hs_error_rollup,
.quilt-demo-hero__form-slot .hs-main-font-element:first-child {
background: rgba(255, 55, 0, 0.06);
border: 1px solid rgba(255, 55, 0, 0.20);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px !important;
width: 100%;
}
/* ── reCAPTCHA inline widget ────────────────────────────
* Google's badge is an iframe we can't restyle internally — we can only
* size + position the host element. Center it and give it consistent
* spacing so it reads as part of the form rhythm, not a stray widget. */
.quilt-demo-hero__form-slot .hs-recaptcha {
display: flex;
justify-content: center;
width: 100% !important;
margin: 4px 0;
}
.quilt-demo-hero__form-slot .hs-recaptcha > div {
transform-origin: center center;
}
/* ── Submit row + button ────────────────────────────────
* HubSpot wraps submit in .hs_submit > .actions. Strip wrapper margins
* so the button can fully fill the row, then style as the final CTA. */
.quilt-demo-hero__form-slot .hs_submit {
margin-top: 6px;
width: 100%;
}
.quilt-demo-hero__form-slot .hs_submit .actions {
margin: 0 !important;
padding: 0 !important;
width: 100%;
}
.quilt-demo-hero__form-slot .hs-button,
.quilt-demo-hero__form-slot .hs-button.primary,
.quilt-demo-hero__form-slot input.hs-button[type="submit"] {
display: block;
width: 100% !important;
height: 52px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.15px;
border-radius: 8px;
padding: 0 20px;
cursor: pointer;
text-align: center;
-webkit-appearance: none;
appearance: none;
transition: background 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quilt-demo-hero__form-slot .hs-button:active,
.quilt-demo-hero__form-slot .hs-button.primary:active {
transform: scale(0.99);
}
/* HubSpot's default inline submit-success message — hidden, we render
* our own success state via [data-cdh-success]. */
.quilt-demo-hero__form-slot .submitted-message {
display: none !important;
}
/* ── Empty state (no form picked yet) ──────────────────── */
.quilt-demo-hero__empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 28px 16px;
border: 1px dashed var(--cdh-tan);
border-radius: 10px;
color: rgba(21, 26, 20, 0.55);
text-align: center;
}
.quilt-demo-hero__empty p {
margin: 0;
font-size: 13px;
line-height: 1.4;
}
/* Step error pulse — when a Next click fails validation */
.quilt-demo-hero__form-slot .cdh-step.has-error input.hs-input,
.quilt-demo-hero__form-slot .cdh-step.has-error select.hs-input,
.quilt-demo-hero__form-slot .cdh-step.has-error textarea.hs-input {
border-color: var(--primary);
}
/* In-step nav (Back + Next) — match the form's submit button visually
* but with a forest-tinted Back button so primary action stands out. */
.quilt-demo-hero__form-slot .cdh-step-nav {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.quilt-demo-hero__form-slot .cdh-step-nav .cdh-back {
flex: 0 0 auto;
height: 44px;
padding: 0 18px;
background: transparent;
color: var(--cdh-forest);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
border: 1px solid var(--cdh-tan);
border-radius: 8px;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease;
}
.quilt-demo-hero__form-slot .cdh-step-nav .cdh-back:hover {
border-color: var(--cdh-forest);
background: rgba(21, 71, 39, 0.04);
}
.quilt-demo-hero__form-slot .cdh-step-nav .cdh-next {
flex: 1 1 auto;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--cdh-ink);
color: var(--white);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.15px;
border: 1px solid var(--cdh-ink);
border-radius: 8px;
cursor: pointer;
transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.quilt-demo-hero__form-slot .cdh-step-nav .cdh-next:hover {
background: #2B2F2A;
border-color: #2B2F2A;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}
.quilt-demo-hero__form-slot .cdh-step-nav .cdh-next:active {
transform: scale(0.99);
}
/* Success state */
.quilt-demo-hero__success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
padding: 12px 0 4px;
}
/* Footer */
.quilt-demo-hero__card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(21, 26, 20, 0.06);
font-size: 12px;
}
.quilt-demo-hero__security {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(21, 26, 20, 0.55);
}
.quilt-demo-hero__support {
color: var(--link_color);
text-decoration: underline;
font-weight: 500;
white-space: nowrap;
}
.quilt-demo-hero__support:hover { color: var(--primary); }
@media (max-width: 480px) {
.quilt-demo-hero__card-body { padding: 28px 22px 22px; }
.quilt-demo-hero__card-heading { font-size: 24px; }
.quilt-demo-hero__card-footer {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* Hidden HubSpot prod form — used for live submission only */
.quilt-demo-hero__hs-form { display: none; }
/* ══════════════════════════════════════════════════════════════
* STICKY FORM — Quilt Content with Form pattern
* Desktop: when Enable Sticky Form is on, JS pins the card fixed
* at top: 120px, immediately collapses it, and keeps it fixed
* while scrolling down until the user returns above the threshold.
* ══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
.quilt-demo-hero__form-sticky {
position: relative;
width: 100%;
margin-left: auto;
z-index: 40;
max-height: none;
overflow: visible;
}
.quilt-demo-hero__right.is-sticky-enabled .quilt-demo-hero__form-sticky {
position: fixed;
top: 120px;
margin-left: 0;
max-height: none;
overflow: visible;
}
.quilt-demo-hero__right.is-sticky-enabled .quilt-demo-hero__card {
margin-left: 0;
max-width: none;
}
}
@media (max-width: 991px) {
.quilt-demo-hero__form-sticky {
position: static;
width: 100%;
}
.quilt-demo-hero__card-toggle {
display: none !important;
}
.quilt-demo-hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.quilt-demo-hero__right { order: 1; }
.quilt-demo-hero__left { order: 2; }
.quilt-demo-hero__card {
margin: 0 auto;
max-width: none;
}
.quilt-demo-hero__left {
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.quilt-demo-hero__card-collapse,
.quilt-demo-hero__card-toggle {
transition: none !important;
}
}
/* ── Form order and phone sizing (2026-09-28) ─────────────
* reCAPTCHA badge after the submit button, so the button follows the last
* field. iOS Safari zooms the page on focus for any field under 16px. */
.quilt-demo-hero__form-slot form {
display: flex;
flex-direction: column;
}
.quilt-demo-hero__form-slot form > .hs_submit { order: 1; }
.quilt-demo-hero__form-slot form > .hs_recaptcha { order: 2; margin-top: 12px; }
.quilt-demo-hero__form-slot form > .hs_error_rollup,
.quilt-demo-hero__form-slot form > .hs-submit-errors { order: 3; }
@media (max-width: 767px) {
.quilt-demo-hero__form-slot input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quilt-demo-hero__form-slot select.hs-input,
.quilt-demo-hero__form-slot textarea.hs-input {
font-size: 16px;
}
}
/* Shelf-edge tag base rules, copied verbatim from the SBU copy (Bottle POS, 2026-09-24) so the XBU brands share them. */
/* ── Bottle POS only (module.html renders these on bottlepos.com; every other brand keeps the pills above) ──────────
Pete Markland 2026-09-24: the page read "super AI" (two pills with a dot). Miles picked Option 2 (20:10): the eyebrow
becomes a glass plaque (square-ish corners, the Bottle mark behind a hairline, sentence case, no dot) and the form
badge a shelf-edge label that hangs from the card's stripe (frosted where it covers it, a yellow sale band, a scan
code). No other brand's markup carries these classes. */
.quilt-demo-hero .quilt-demo-hero__plaque {
display: inline-flex;
align-self: flex-start;
width: fit-content;
max-width: 100%;
align-items: center;
gap: 12px;
margin: 0 0 28px;
padding: 9px 18px 9px 12px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
border: 1px solid rgba(163, 213, 255, .3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 28px rgba(0, 10, 40, .28);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
font-family: 'Onest', 'Sora', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: #EAF4FF;
}
.quilt-demo-hero .quilt-demo-hero__plaque-mark {
display: flex;
padding-right: 12px;
border-right: 1px solid rgba(163, 213, 255, .3);
}
.quilt-demo-hero .quilt-demo-hero__plaque-mark svg {
width: 24px;
height: auto;
}
.quilt-demo-hero .quilt-demo-hero__plaque-text {
display: block;
}
/* Hangs from the stripe: pulled up over the card body's top padding and the 4px stripe. */
.quilt-demo-hero .quilt-demo-hero__shelf {
position: relative;
z-index: 1;
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 3px;
align-items: end;
margin: -40px 0 20px;
padding: 14px 16px 10px;
border: 1px solid rgba(17, 18, 26, .1);
border-top: 0;
border-radius: 0 0 6px 6px;
background: rgba(255, 255, 255, .78);
-webkit-backdrop-filter: blur(10px) saturate(150%);
backdrop-filter: blur(10px) saturate(150%);
box-shadow: 0 10px 22px rgba(0, 32, 80, .12);
}
.quilt-demo-hero .quilt-demo-hero__shelf::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: rgba(255, 213, 80, .9);
}
.quilt-demo-hero .quilt-demo-hero__shelf-big {
grid-row: 1 / 3;
font-family: 'Sora', sans-serif;
font-weight: 700;
font-size: 34px;
line-height: .9;
letter-spacing: -.03em;
color: #11121A;
}
.quilt-demo-hero .quilt-demo-hero__shelf-rest {
font-family: 'Onest', 'Sora', sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 1.1;
color: #006AC6;
}
.quilt-demo-hero .quilt-demo-hero__shelf-code {
width: 66px;
height: 12px;
opacity: .7;
background: repeating-linear-gradient(90deg, #11121A 0 1px, transparent 1px 3px, #11121A 3px 5px, transparent 5px 6px, #11121A 6px 7px, transparent 7px 10px);
}
@media (max-width: 480px) {
.quilt-demo-hero .quilt-demo-hero__shelf {
margin-top: -32px;
}
}
/* Bottle POS only, the offer card (Miles 2026-09-24 21:38 picked A): the white 75% circle becomes the same shelf-edge tag
as the form label, hanging from the card's top edge; the corner disc goes; the fine print sits under a hairline. */
.quilt-demo-hero .quilt-demo-hero__offer.is-talker {
align-items: flex-start;
gap: 24px;
}
.quilt-demo-hero .quilt-demo-hero__offer.is-talker .quilt-demo-hero__offer-disc {
display: none;
}
.quilt-demo-hero .quilt-demo-hero__talker {
position: relative;
z-index: 1;
flex: none;
display: grid;
justify-items: start;
row-gap: 6px;
margin-top: -22px;
padding: 18px 16px 12px;
background: rgba(255, 255, 255, .94);
border-radius: 0 0 6px 6px;
box-shadow: 0 10px 22px rgba(0, 20, 60, .22);
}
.quilt-demo-hero .quilt-demo-hero__talker::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 4px;
background: #FFD550;
}
.quilt-demo-hero .quilt-demo-hero__talker-big {
font-family: 'Sora', sans-serif;
font-weight: 700;
font-size: 40px;
line-height: .9;
letter-spacing: -.03em;
color: #11121A;
}
.quilt-demo-hero .quilt-demo-hero__talker-code {
width: 100%;
height: 12px;
opacity: .7;
background: repeating-linear-gradient(90deg, #11121A 0 1px, transparent 1px 3px, #11121A 3px 5px, transparent 5px 6px, #11121A 6px 7px, transparent 7px 10px);
}
.quilt-demo-hero .quilt-demo-hero__offer.is-talker .quilt-demo-hero__offer-sub p + p {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, .2);
font-size: 12px;
line-height: 1.45;
opacity: .8;
}
@media (max-width: 480px) {
.quilt-demo-hero .quilt-demo-hero__talker {
margin-top: -18px;
padding: 16px 12px 10px;
}
.quilt-demo-hero .quilt-demo-hero__talker-big {
font-size: 30px;
}
}
/* ── Every other brand: the Bottle POS treatment as the standard (2026-10-26, Miles: "Bottle POS is the new standard") ──
module.html renders the same plaque, shelf label and offer tag as bottlepos.com, marked `.is-brand`. These rules only
swap Bottle's fixed colours and fonts for the brand's own: the plaque takes the hero's text colour (so it reads on dark
and light heroes alike), the mark is the site's own, the label line under a figure takes the colour the page already
chose for its offer card (--dhs-accent, set per placement in module.html), and type follows the theme. The yellow
sale band is the same sale yellow as the card stripe's end and the trust stars. Bottle never gets `.is-brand`. */
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand {
position: relative;
color: inherit;
font-family: inherit;
border-color: transparent;
background: none;
box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
}
/* Glass face and hairline both tinted from the hero's own text colour (dark heroes get a light plaque, light heroes a
dark-tinted one). Drawn as two pseudo layers at fixed opacities so no colour is hardcoded per brand. */
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand::before,
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand::after {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
pointer-events: none;
}
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand::before {
z-index: -1; /* behind the text: backdrop-filter makes the plaque its own stacking context */
background: linear-gradient(135deg, currentColor, transparent 140%);
opacity: .08;
}
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand::after {
border: 1px solid currentColor;
opacity: .24;
}
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand .quilt-demo-hero__plaque-mark {
position: relative;
border-right-color: transparent;
}
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand .quilt-demo-hero__plaque-mark::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -1px;
border-right: 1px solid currentColor;
opacity: .24;
}
.quilt-demo-hero .quilt-demo-hero__plaque.is-brand .quilt-demo-hero__plaque-mark img {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
border-radius: 4px;
}
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand {
box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand::before,
.quilt-demo-hero .quilt-demo-hero__offer.is-brand .quilt-demo-hero__talker::before {
background: var(--cdh-yellow, #FFD550);
}
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand .quilt-demo-hero__shelf-big,
.quilt-demo-hero .quilt-demo-hero__offer.is-brand .quilt-demo-hero__talker-big {
font-family: var(--heading_font, inherit);
color: var(--heading, var(--dark));
}
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand .quilt-demo-hero__shelf-rest {
font-family: inherit;
color: var(--dhs-accent, var(--primary));
}
/* A badge with no figure ("Claim your demo") is one label line over the scan code. */
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand.is-text {
grid-template-columns: auto;
row-gap: 6px;
}
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand.is-text .quilt-demo-hero__shelf-rest {
font-size: 14px;
font-weight: 700;
}
.quilt-demo-hero .quilt-demo-hero__shelf.is-brand.is-text {
max-width: 100%;
}
.quilt-demo-hero .quilt-demo-hero__offer.is-brand .quilt-demo-hero__talker {
box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}
/* ── Form card: the Bottle POS field treatment for every other brand (2026-10-26, Miles on etailpet.io/schedule-demo:
"these look very generic") ── Scoped to `.is-std`, which module.html sets on every standard placement EXCEPT
bottlepos.com, so Bottle's card renders exactly as today. Presentation only: no field, order, value or validation
changes. Labels sit inside an outlined field and lift onto its top edge when it has a value or focus (Bottle's
treatment), set in sentence case at reading size instead of tracked 11px caps. Colours are theme tokens: the field
rule is the theme's --dark, focus and the checkbox take --primary (the brand's CTA colour). */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .hs-form-field > label {
font-size: 14px;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .hs-form-field.active > label {
background-color: var(--white, #fff) !important;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot select.hs-input,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot textarea.hs-input {
height: 48px;
border: 1px solid var(--dark) !important;
border-radius: 8px !important;
background-color: transparent;
box-shadow: none;
margin: 0 !important;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot select.hs-input {
background-color: var(--white, #fff);
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot textarea.hs-input {
height: auto;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot select.hs-input:focus,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot textarea.hs-input:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(var(--primary_rgb), .2);
}
/* Phone row: country and number the same 48px, flush to both edges of the field, one 8px gap. */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > select.hs-input {
height: 48px !important;
}
/* a theme clearfix pseudo-element was a third flex item: one more 8px gap, so the number field stopped 8px short */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone::before,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone::after {
display: none;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot div.hs-input.hs-fieldtype-intl-phone > input[type="tel"] {
flex: 1 1 0;
height: 48px;
}
/* SMS consent: brand-coloured checkbox, label in sentence case. */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot input[type="checkbox"],
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot input[type="radio"] {
accent-color: var(--primary);
width: 18px;
height: 18px;
flex: 0 0 18px;
margin: 1px 0 0;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .hs-form-booleancheckbox-display,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .hs-form-booleancheckbox label,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot ul.inputs-list li label {
align-items: center;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .hs-form-booleancheckbox-display span,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot ul.inputs-list li label span {
font-size: 14px !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin: 0 !important;
}
/* reCAPTCHA sits under the button on the form's left edge, like Bottle; a footer with nothing to say (no note, no
support link) is not drawn, so no lone shield icon floats under the card. */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .hs-recaptcha {
justify-content: flex-start;
margin: 0;
}
.quilt-demo-hero.is-std .quilt-demo-hero__card-footer:not(:has(.quilt-demo-hero__support)):has(.quilt-demo-hero__security > span:empty) {
display: none;
}
.quilt-demo-hero.is-std .quilt-demo-hero__security:has(> span:empty) {
display: none;
}
/* Rich-text blocks module.js promotes to step headers (POS Nation's SMS consent paragraph is one) also pick up the
error-summary box (pink fill, border) and tracked 11px caps. In the standard they read as plain consent copy. */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .cdh-section-header,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot .cdh-section-header > * {
background: none;
border: 0;
padding: 0;
font-size: 11px;
font-weight: 400;
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
color: #4a4f57;
}
/* XBU only. The SBU copy already has the floating labels (module.js toggles `.active`), hides empty hidden-field rows
and orders reCAPTCHA after the button; the XBU copy had none of it, which left labels above the fields, a ~100px
gap of empty hidden-field rows between Email and the SMS consent, and reCAPTCHA above the button. CSS only, so the
XBU module.js and the form itself are untouched: the label rests inside the field while it is empty and unfocused,
and lifts onto the top edge otherwise (a field with no placeholder text keeps its label lifted). */
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot :is(.hs-fieldtype-text, .hs-fieldtype-email, .hs-fieldtype-textarea) {
position: relative;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot :is(.hs-fieldtype-text, .hs-fieldtype-email, .hs-fieldtype-textarea) > label {
position: absolute;
z-index: 1;
top: 12px;
left: 8px;
padding: 2px 6px;
font-weight: 400;
pointer-events: none;
transform-origin: left top;
transition: top .2s ease, transform .2s ease, background-color .2s ease;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot :is(.hs-fieldtype-text, .hs-fieldtype-email, .hs-fieldtype-textarea):is(:focus-within, :has(.hs-input:not(:placeholder-shown))) > label {
top: -9px;
left: 6px;
transform: scale(.8);
background-color: var(--white, #fff);
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot :is(.hs-fieldtype-text, .hs-fieldtype-email, .hs-fieldtype-textarea) .hs-input::placeholder {
color: transparent;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot fieldset[class^="form-columns"]:has(.field[style*="display: none"]):not(:has(.field:not([style*="display: none"]))) {
display: none !important;
}
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot form > .hs_submit { order: 1; }
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot form > .hs_recaptcha { order: 2; margin-top: 12px; }
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot form > .hs_error_rollup,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot form > .hs-submit-errors { order: 3; }
@media (max-width: 767px) {
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot input.hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot select.hs-input,
.quilt-demo-hero.is-std .quilt-demo-hero__form-slot textarea.hs-input {
font-size: 16px;
}
}
/* Open display (unfolded phones, small tablets: 768-991px), Miles 10/27: the pitch stays on the left and the form card sits
on the right, the way Build & Price works at this width, instead of one long column with the form first. Phones (< 768)
keep the form-first column and desktop (>= 992) is unchanged; the desktop-only sticky/collapse script stays desktop-only. */
@media (min-width: 768px) and (max-width: 991.98px) {
.quilt-demo-hero .quilt-demo-hero__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
gap: 28px;
align-items: start;
}
.quilt-demo-hero .quilt-demo-hero__left { order: 1; max-width: none; }
.quilt-demo-hero .quilt-demo-hero__right { order: 2; }
.quilt-demo-hero .quilt-demo-hero__card { margin: 0; max-width: none; }
.quilt-demo-hero .quilt-demo-hero__form-sticky { position: sticky; top: 16px; }
.quilt-demo-hero h1.quilt-demo-hero__headline { font-size: clamp(32px, 4.6vw, 42px); line-height: 1.08; }
}
/* The "just got a FREE demo" social-proof toast sat over the pitch at this width; it stays off here, as on Build & Price
below 992px. This CSS only loads on pages with the Demo Hero. */
@media (min-width: 768px) and (max-width: 991.98px) {
.notification-wrapper { display: none !important; }
}