/* ============================================================
   ScaleIQ — form styles (child theme)
   Rescues the Contact page, whose styles previously lived only in a
   preview bundle that the theme never enqueued. Scoped under .intake so
   nothing leaks onto other pages. Start Here is self-styled and only
   borrows the shared honeypot + submit-state rules at the bottom.
   Tokens (--surface-border, --ghost-text, --status-*, --radius-*, …) are
   already defined in the parent tokens.css.
   ============================================================ */

/* ---- Contact layout ---------------------------------------------------- */
.intake { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .intake { grid-template-columns: 1fr; } }
.intake-aside h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); margin-bottom: 1rem; }
.intake-aside p { color: var(--text-secondary); margin-bottom: 1.5rem; }
.intake .routelist { list-style: none; display: flex; flex-direction: column; gap: .75rem; margin: 0; padding: 0; }
.intake .routelist li { display: flex; gap: .6rem; font-size: .9rem; color: var(--text-secondary); }
.intake .routelist .k { color: var(--brand-cyan-glow); font-weight: 600; }
:root[data-theme="light"] .intake .routelist .k { color: var(--brand-electric-azure); }

/* ---- Card + fields ----------------------------------------------------- */
.intake .form-card { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-xl); }
.intake .field { margin-bottom: 1.1rem; }
.intake .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .intake .row2 { grid-template-columns: 1fr; } }

.intake label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; color: var(--text-primary); }
.intake .req { font-size: .68rem; font-weight: 600; color: var(--text-muted); text-transform: lowercase; margin-left: .4rem; letter-spacing: .04em; }
.intake .hint { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }

.intake input[type=text],
.intake input[type=email],
.intake select,
.intake textarea {
	width: 100%; height: 44px; border-radius: 8px;
	border: 1px solid var(--surface-border); background: var(--surface-panel-2);
	color: var(--text-primary); padding: 0 .85rem;
	font-family: var(--font-body); font-size: .95rem; transition: border-color var(--t-fast, .15s);
}
.intake textarea { height: auto; min-height: 96px; padding: .7rem .85rem; resize: vertical; line-height: 1.5; }
.intake input:focus, .intake select:focus, .intake textarea:focus {
	border-color: var(--ghost-border-hover); outline: none; box-shadow: var(--focus-ring);
}
.intake select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239DB2CE' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.2rem;
}
:root[data-theme="light"] .intake input::placeholder,
:root[data-theme="light"] .intake textarea::placeholder { color: #94A3B8; }

/* ---- Checkboxes -------------------------------------------------------- */
.intake .checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
@media (max-width: 560px) { .intake .checks { grid-template-columns: 1fr; } }
.intake .check { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: var(--text-secondary); cursor: pointer; }
.intake .check input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--brand-electric-azure); flex: none; }

/* ---- Validation -------------------------------------------------------- */
.intake .err { color: var(--status-risk); font-size: .78rem; margin-top: .3rem; display: none; }
.intake .field.invalid input, .intake .field.invalid select { border-color: var(--status-risk); }
.intake .field.invalid .err { display: block; }
.intake .field.hidden { display: none; }

/* ---- Consent ----------------------------------------------------------- */
.intake .consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; color: var(--text-secondary);
	margin: 1.25rem 0; padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--surface-border); background: var(--surface-panel-2); }
.intake .consent input { width: 18px; height: 18px; margin-top: .1rem; accent-color: var(--brand-electric-azure); flex: none; }
.intake .consent a { color: var(--ghost-text); font-weight: 600; }

/* ---- Success state ----------------------------------------------------- */
.intake .success { display: none; text-align: center; padding: 2rem 1rem; }
.intake .success.show { display: block; }
.intake .success .check-ic { width: 64px; height: 64px; margin: 0 auto 1.25rem; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid var(--glass-border); background: rgba(34,197,94,.08); color: var(--status-success); }
.intake .success h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.intake .success .route-box { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--radius-md); text-align: left;
	border: 1px solid var(--glass-border); background: var(--surface-panel-2); }
.intake .success .route-box .eyebrow { margin-bottom: .5rem; }
.intake .link-arrow { color: var(--ghost-text); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.intake .link-arrow .a { transition: transform var(--t-base, .2s); }
.intake .link-arrow:hover .a { transform: translateX(4px); }

/* ============================================================
   Shared — used by BOTH forms (Start Here + Contact)
   ============================================================ */

/* Honeypot: visually + semantically hidden, still submitted by bots. */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Submit "Working…" / disabled state. */
form[data-siq-form] button[type="submit"][disabled],
form[data-siq-form] button[type="submit"][aria-busy="true"] {
	opacity: .65; cursor: progress;
}

/* Async error banner injected by forms.js. */
.form-error {
	display: none; margin-top: .85rem; padding: .7rem .9rem;
	font-size: .85rem; font-weight: 500; color: #fff;
	background: var(--status-risk); border-radius: 8px;
}

/* Multi-select listbox (Contact → Interests) */
.intake select[multiple] {
	height: auto; min-height: 150px; padding: 6px; background-image: none; line-height: 1.4;
}
.intake select[multiple] option { padding: 7px 9px; border-radius: 6px; }
.intake select[multiple] option:checked {
	background: linear-gradient(0deg, rgba(45,125,255,.18), rgba(45,125,255,.18)); color: var(--text-primary);
}

/* ---- Multi-select checkbox dropdown (Contact → Interests) ---- */
.msdd { position: relative; }
.msdd__toggle {
	width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
	border: 1px solid var(--surface-border); background: var(--surface-panel-2); color: var(--text-primary);
	border-radius: 8px; padding: 0 .85rem; font-family: var(--font-body); font-size: .95rem; cursor: pointer; text-align: left;
}
.msdd__toggle:focus-visible { outline: none; border-color: var(--ghost-border-hover); box-shadow: var(--focus-ring); }
.msdd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msdd__value.is-placeholder { color: var(--text-muted); }
.msdd__chev { flex: none; color: var(--text-secondary); transition: transform .2s ease; }
.msdd.is-open .msdd__chev { transform: rotate(180deg); }
.msdd__panel {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
	max-height: 288px; overflow-y: auto; padding: 6px;
	background: var(--surface-panel); border: 1px solid var(--surface-border); border-radius: 10px;
	box-shadow: 0 22px 55px rgba(0,0,0,.38); display: none;
}
.msdd.is-open .msdd__panel { display: block; }
.msdd__opt {
	display: flex; align-items: center; gap: .6rem; padding: 9px 10px; border-radius: 6px;
	font-size: .9rem; color: var(--text-secondary); cursor: pointer;
}
.msdd__opt:hover { background: rgba(45,125,255,.08); color: var(--text-primary); }
.msdd__opt input { width: 17px; height: 17px; accent-color: var(--brand-electric-azure); flex: none; }


/* ============ v1.3.12 — Contact restyle: centered, sectioned (matches Start Here) ============ */
.intake.stacked{ display:block; max-width:760px; margin-inline:auto; }
.intake.stacked .intake-head{ text-align:center; max-width:60ch; margin:0 auto 26px; }
.intake.stacked .intake-head .eyebrow{ justify-content:center; }
.intake.stacked .intake-head h2{ font-size:clamp(1.7rem,4.5vw,2.4rem); letter-spacing:-.02em; margin:.5rem 0 .6rem; line-height:1.1; }
.intake.stacked .intake-head .grad{ background:linear-gradient(120deg,#2D7DFF,#20E3FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.intake.stacked .intake-head .sub{ color:var(--text-secondary); font-size:clamp(.98rem,2.2vw,1.08rem); margin:0 auto; }
.intake.stacked .trust-pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.intake.stacked .trust-pills span{ font-size:.74rem; font-weight:500; color:var(--text-secondary); }
.intake.stacked .trust-pills span.sep::before{ content:""; }
.intake.stacked .trust-pills span:not(.sep)::before{ content:"\2713"; color:var(--brand-electric-azure,#2D7DFF); font-weight:700; margin-right:6px; }
.intake.stacked .form-card{ max-width:760px; margin-inline:auto; }
.intake.stacked .step-label{ display:flex; align-items:center; gap:10px; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-electric-azure,#2D7DFF); margin:28px 0 14px; }
.intake.stacked .step-label:first-of-type{ margin-top:2px; }
.intake.stacked .step-label .num{ width:22px; height:22px; border-radius:50%; background:color-mix(in srgb, var(--brand-electric-azure,#2D7DFF) 16%, transparent); color:var(--brand-electric-azure,#2D7DFF); display:inline-grid; place-items:center; font-size:.72rem; }
.intake.stacked .step-label .rule{ flex:1; height:1px; background:var(--line,rgba(148,163,184,.25)); }
/* confirmation themes cleanly in both modes */
:root[data-theme="light"] .intake.stacked .success p{ color:var(--text-secondary); }
:root[data-theme="light"] .intake.stacked .route-box{ background:rgba(15,23,42,.03); border:1px solid rgba(15,23,42,.08); }