/* ==========================================================================
   PolarLabs — Support page (/support)
   Route-scoped: every selector is under .pl-supp so the global stylesheet and
   every other route are untouched. Reuses the authoritative design tokens from
   main.css (:root) and the global .pl-field / .pl-btn / .pl-container primitives;
   this file only adds the Support-specific composition (hero, routing cards,
   message + resources workspace, assurance strip).

   Sections: 1) Shell  2) Hero  3) Channel cards  4) Workspace shell
   5) Message form  6) Resources  7) Assurance strip  8) Responsive
   9) Reduced motion
   ========================================================================== */

/* 1. SHELL ---------------------------------------------------------------- */
.pl-supp {
	background: var(--pl-surface);
	color: var(--pl-ink);
}
/* Attribute [hidden] must beat any display we set on flex/grid children
   (error rows, the "prepared" note). */
.pl-supp [hidden] { display: none !important; }

.pl-supp__eyebrow {
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pl-font);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pl-blue);
}
.pl-supp__eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--pl-blue);
}

.pl-supp__arrow { flex: none; transition: transform var(--pl-dur) var(--pl-ease); }

/* 2. HERO ----------------------------------------------------------------- */
.pl-supp__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--pl-surface-2);
	border-bottom: 1px solid var(--pl-line);
}
.pl-supp__hero-media { position: absolute; inset: 0; z-index: 0; }
.pl-supp__hero-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}
/* Left-weighted scrim guarantees WCAG-AA contrast for the navy headline over the
   near-white left of the artwork, regardless of the image. */
.pl-supp__hero-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		var(--pl-surface-2) 0%,
		rgba(246, 249, 253, .92) 34%,
		rgba(246, 249, 253, .55) 54%,
		rgba(246, 249, 253, 0) 76%);
}
.pl-supp__hero-inner {
	position: relative;
	z-index: 1;
	/* DR-SUPPORT-HERO-MOBILE-001: use padding-BLOCK only. The previous `padding: … 0 …`
	   shorthand zeroed the horizontal padding, overriding the .pl-container gutter this
	   element also carries — so the headline sat flush at the viewport edge on mobile (no
	   gutter). padding-block keeps the vertical rhythm while the container's padding-inline
	   (clamp(24px,4vw,40px)) restores the normal PolarLabs gutter at every width. */
	padding-block: clamp(44px, 6vw, 84px) clamp(76px, 7vw, 108px);
}
.pl-supp__title {
	margin: 0 0 18px;
	font-family: var(--pl-font-heading);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: var(--pl-ink);
	font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.25rem);
}
.pl-supp__dot { color: var(--pl-blue); }
.pl-supp__lede {
	margin: 0 0 20px;
	max-width: 30ch;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--pl-muted);
}
.pl-supp__ruo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 9px 15px 9px 12px;
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-pill);
	background: rgba(255, 255, 255, .7);
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--pl-muted);
}
.pl-supp__ruo-ic { flex: none; color: var(--pl-blue); }

/* 3. CHANNEL CARDS -------------------------------------------------------- */
.pl-supp__channels {
	position: relative;
	z-index: 2;
	margin-top: 26px;
}
.pl-supp__channelgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.pl-supp__channel {
	display: flex;
	gap: 16px;
	padding: 22px;
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius-lg);
	box-shadow: var(--pl-shadow-sm);
	transition: border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease);
}
.pl-supp__channel-ic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--pl-radius);
	background: var(--pl-blue-050);
	color: var(--pl-blue);
}
.pl-supp__channel-body { min-width: 0; }
.pl-supp__channel-title {
	margin: 2px 0 6px;
	font-family: var(--pl-font-heading);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--pl-ink);
}
.pl-supp__channel-desc {
	margin: 0 0 12px;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--pl-muted);
}
.pl-supp__channel-mail {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--pl-blue);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.pl-supp__channel-mail:hover { color: var(--pl-blue-600); }
.pl-supp__channel-mail:hover .pl-supp__arrow { transform: translateX(3px); }

/* 4. WORKSPACE SHELL ------------------------------------------------------ */
.pl-supp__work { padding: clamp(40px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); }
.pl-supp__workgrid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 32px);
	align-items: start;
}
.pl-supp__panel {
	border-radius: var(--pl-radius-lg);
	padding: clamp(22px, 2.6vw, 34px);
}
.pl-supp__panel--form {
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	box-shadow: var(--pl-shadow-sm);
}
.pl-supp__panel--res {
	background: var(--pl-surface-2);
	border: 1px solid var(--pl-line);
	position: sticky;
	top: calc(var(--pl-header-h) + 16px);
}
.pl-supp__panel-title {
	margin: 0 0 8px;
	font-family: var(--pl-font-heading);
	font-size: clamp(1.375rem, 1.2rem + .6vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--pl-ink);
}
.pl-supp__panel-sub {
	margin: 0 0 22px;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--pl-muted);
}

/* 5. MESSAGE FORM --------------------------------------------------------- */
.pl-supp__row2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
/* The Support form leans on the global .pl-field / label / input primitives;
   these only tune spacing + the select chevron for this layout. */
.pl-supp__form .pl-field { margin-bottom: 18px; }
.pl-supp__row2 .pl-field { margin-bottom: 0; }
.pl-supp__select-wrap { position: relative; }
.pl-supp__select-wrap select { width: 100%; padding-right: 44px; appearance: none; -webkit-appearance: none; }
.pl-supp__select-icon {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--pl-muted);
}
.pl-supp__submit {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 4px;
}
.pl-supp__submit[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.pl-supp__nojs {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--pl-info-border);
	border-radius: var(--pl-radius);
	background: var(--pl-info-bg);
	font-size: .875rem;
	line-height: 1.5;
	color: var(--pl-ink);
}
.pl-supp__nojs a { color: var(--pl-link); font-weight: 600; }
.pl-supp__prepared {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid var(--pl-success-border);
	border-radius: var(--pl-radius);
	background: var(--pl-success-bg);
	color: var(--pl-success);
}
.pl-supp__prepared p { margin: 0; font-size: .9375rem; line-height: 1.45; }
.pl-supp__fine {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 16px 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--pl-muted);
}
.pl-supp__fine-ic { flex: none; margin-top: 2px; color: var(--pl-muted-soft); }
.pl-supp__fine a { color: var(--pl-link); font-weight: 600; }

/* 6. RESOURCES ------------------------------------------------------------ */
.pl-supp__reslist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pl-supp__res {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--pl-surface);
	border: 1px solid var(--pl-line);
	border-radius: var(--pl-radius);
	text-decoration: none;
	color: var(--pl-ink);
	transition: border-color var(--pl-dur) var(--pl-ease), box-shadow var(--pl-dur) var(--pl-ease), transform var(--pl-dur) var(--pl-ease);
}
.pl-supp__res:hover {
	border-color: var(--pl-line-strong);
	box-shadow: var(--pl-shadow-sm);
}
.pl-supp__res:hover .pl-supp__arrow { transform: translateX(3px); }
.pl-supp__res-ic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--pl-radius-sm);
	background: var(--pl-blue-050);
	color: var(--pl-blue);
}
.pl-supp__res-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-supp__res-title { font-size: .9375rem; font-weight: 700; color: var(--pl-ink); }
.pl-supp__res-desc { font-size: .8125rem; line-height: 1.4; color: var(--pl-muted); }
.pl-supp__res .pl-supp__arrow { color: var(--pl-muted-soft); }
.pl-supp__res-foot {
	margin: 18px 0 0;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--pl-muted);
}

/* 7. ASSURANCE STRIP ------------------------------------------------------ */
.pl-supp__trust { padding: clamp(28px, 4vw, 52px) 0 clamp(44px, 6vw, 76px); }
.pl-supp__trust-inner {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: center;
	background: var(--pl-navy);
	background: linear-gradient(135deg, var(--pl-navy-800) 0%, var(--pl-navy) 60%);
	border-radius: var(--pl-radius-lg);
	padding: clamp(26px, 3.4vw, 40px);
	color: var(--pl-icy);
}
.pl-supp__trust-lead { display: flex; align-items: flex-start; gap: 15px; }
.pl-supp__trust-lead-ic {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: var(--pl-radius);
	background: rgba(61, 116, 255, .16);
	color: var(--pl-electric);
}
.pl-supp__trust-title {
	margin: 2px 0 8px;
	font-family: var(--pl-font-heading);
	font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--pl-icy);
}
.pl-supp__trust-copy { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--pl-icy-200); max-width: 42ch; }
.pl-supp__trust-items {
	list-style: none;
	margin: 0;
	padding: 0 0 0 clamp(24px, 3vw, 44px);
	border-left: 1px solid rgba(203, 221, 255, .18);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.pl-supp__trust-item { display: flex; flex-direction: column; gap: 4px; }
.pl-supp__trust-item-ic { color: var(--pl-electric); margin-bottom: 4px; }
.pl-supp__trust-item-h { font-size: .9375rem; font-weight: 700; color: var(--pl-icy); }
.pl-supp__trust-item-d { font-size: .8125rem; line-height: 1.45; color: var(--pl-icy-200); }

/* Focus visibility — reuse the global focus ring on the page's custom links. */
.pl-supp__channel-mail:focus-visible,
.pl-supp__res:focus-visible {
	outline: none;
	box-shadow: var(--pl-ring);
	border-radius: var(--pl-radius-sm);
}

/* 8. RESPONSIVE ----------------------------------------------------------- */
/* Desktop: float the routing cards up so they overlap the hero base. */
@media (min-width: 981px) {
	.pl-supp__channels { margin-top: clamp(-72px, -5vw, -44px); }
}

/* Tablet: workspace stays two-column until it gets tight; cards go 3→ flexible. */
@media (max-width: 980px) {
	.pl-supp__workgrid { grid-template-columns: 1fr; }
	.pl-supp__panel--res { position: static; }
	.pl-supp__trust-inner { grid-template-columns: 1fr; }
	.pl-supp__trust-items {
		border-left: 0;
		padding-left: 0;
		padding-top: 22px;
		border-top: 1px solid rgba(203, 221, 255, .18);
	}
}

@media (max-width: 760px) {
	.pl-supp__channelgrid { grid-template-columns: 1fr; }
	.pl-supp__hero-media img { object-position: 78% center; }
	/* Keep the headline clear of the mountains on narrow screens. */
	.pl-supp__hero-scrim {
		background: linear-gradient(90deg,
			var(--pl-surface-2) 0%,
			rgba(246, 249, 253, .92) 52%,
			rgba(246, 249, 253, .6) 74%,
			rgba(246, 249, 253, .2) 100%);
	}
}

@media (max-width: 560px) {
	.pl-supp__row2 { grid-template-columns: 1fr; gap: 0; }
	.pl-supp__row2 .pl-field { margin-bottom: 18px; }
	.pl-supp__trust-items { grid-template-columns: 1fr; gap: 16px; }
	.pl-supp__trust-lead { align-items: center; }
}

@media (max-width: 380px) {
	.pl-supp__channel { flex-direction: column; gap: 12px; }
	.pl-supp__panel { padding-left: 18px; padding-right: 18px; }
}

/* 9. REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pl-supp__arrow,
	.pl-supp__channel,
	.pl-supp__res { transition: none; }
}