/* =========================================================================
   Anywhere Support — design system
   Reproduces the approved customer landing and staff console designs.
   ========================================================================= */

:root {
	--ink: #0f1a2b;
	/* near-black navy: headings, dark sections, nav */
	--ink-2: #1b2740;
	--bg: #f1f4f8;
	/* page background */
	--card: #ffffff;
	--border: #e6eaf1;
	--border-2: #eef1f6;
	--blue: #2f6bff;
	/* primary accent */
	--blue-ink: #2256e0;
	--blue-soft: #e8eefc;
	--muted: #6b7686;
	--muted-2: #8a94a4;
	--green: #1f9d57;
	--green-soft: #e7f6ee;
	--amber: #b5791b;
	--amber-soft: #fbf0db;
	--red: #d64545;
	--red-soft: #fdecec;

	--radius: 16px;
	--radius-lg: 22px;
	--shadow: 0 1px 2px rgba(15, 26, 43, .04), 0 8px 24px rgba(15, 26, 43, .05);

	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Plus Jakarta Sans", var(--font-body);
}

/* ---- reset-ish ---------------------------------------------------------- */
* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.asd {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	article.asd-article {
		padding: 1.5rem 1.75rem;
		background: var(--card);
		margin-top: 1rem;
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
	}
}

.asd a {
	color: inherit;
	text-decoration: none;
}

.asd h1,
.asd h2,
.asd h3,
.asd h4 {
	font-family: var(--font-display);
	color: var(--ink);
	margin: 0;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.asd p {
	margin: 0;
}

.asd img {
	max-width: 100%;
	display: block;
}

.asd button {
	font-family: inherit;
	cursor: pointer;
}

.asd-container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
}

/* ---- shared bits -------------------------------------------------------- */
.asd-eyebrow {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: .6rem;
}

.asd-eyebrow--light {
	color: rgba(255, 255, 255, .75);
}

.asd-link {
	color: var(--blue);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
}

.asd-link:hover {
	color: var(--blue-ink);
}

.asd-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: 0;
	border-radius: 10px;
	padding: .72rem 1.1rem;
	font-size: .95rem;
	font-weight: 600;
	transition: transform .08s ease, background .15s ease;
}

.asd-btn:active {
	transform: translateY(1px);
}

.asd-btn--primary {
	background: var(--blue);
	color: #fff;
}

.asd-btn--primary:hover {
	background: var(--blue-ink);
}

.asd-btn--dark {
	background: var(--ink);
	color: #fff;
}

.asd-btn--dark:hover {
	background: #060c16;
}

.asd-btn--light {
	background: #fff;
	color: var(--blue);
	font-weight: 700;
}

.asd-btn--light:hover {
	background: #f3f6ff;
}

.asd-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

/* =========================================================================
   CUSTOMER PORTAL  (front-page)
   ========================================================================= */
.asd-portal {
	padding: 56px 0 40px;
}

.asd-status {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--blue-ink);
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: 1.6rem;
}

.asd-status .asd-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--green);
}

.asd-status .asd-dot--warn {
	background: #d79a2b;
}

.asd-empty {
	text-align: center;
	color: var(--muted);
	padding: 2.4rem 1rem;
	font-size: .95rem;
}

/* Honeypot — hidden from real users, off-screen (not display:none, which some bots skip). */
.asd-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.asd-hero {
	margin-bottom: 2.6rem;
}

.asd-hero h1 {
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.025em;
	margin-bottom: 1.1rem;
}

.asd-hero__sub {
	color: var(--muted);
	font-size: 1.12rem;
}

/* CTA row */
.asd-cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-bottom: 3.4rem;
}

.asd-cta__card {
	padding: 30px;
}

.asd-cta__card h2 {
	font-size: 1.7rem;
	font-weight: 800;
	margin-bottom: .55rem;
}

.asd-cta__card p {
	font-size: .98rem;
}

.asd-cta__card--accent {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.asd-cta__card--accent h2 {
	color: #fff;
}

.asd-cta__card--accent p {
	color: rgba(255, 255, 255, .85);
	max-width: 24em;
}

.asd-cta__card--accent .asd-btn {
	margin-top: 1.6rem;
}

.asd-cta__card--track p {
	color: var(--muted);
	max-width: 26em;
}

.asd-track__form {
	display: flex;
	gap: 10px;
	margin-top: 1.6rem;
}

.asd-track__form input {
	flex: 1;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .72rem .9rem;
	font-size: .95rem;
	font-family: inherit;
	color: var(--ink);
	background: #fff;
}

.asd-track__form input:focus {
	outline: none;
	border-color: var(--blue);
}

/* track result / submit banner */
.asd-result {
	margin: -1.4rem 0 3.4rem;
}

.asd-banner {
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	font-size: .96rem;
	border: 1px solid transparent;
}

.asd-banner--ok {
	background: var(--green-soft);
	border-color: #c9ead7;
	color: #0f7a44;
}

.asd-banner--err {
	background: var(--red-soft);
	border-color: #f4cccc;
	color: #b3322f;
}

.asd-banner strong {
	font-weight: 700;
}

.asd-ticket {
	padding: 26px 28px;
	margin-top: 1rem;
}

.asd-ticket__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.1rem;
}

.asd-ticket__top h3 {
	font-size: 1.2rem;
	font-weight: 700;
}

.asd-ticket__ref {
	color: var(--muted);
	font-size: .9rem;
	font-weight: 600;
}

.asd-ticket__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-bottom: 1.1rem;
}

.asd-ticket__meta div span {
	display: block;
	font-size: .78rem;
	color: var(--muted-2);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 700;
	margin-bottom: .15rem;
}

.asd-ticket__meta div strong {
	font-weight: 600;
	font-size: .98rem;
}

.asd-ticket__body {
	color: var(--ink-2);
	border-top: 1px solid var(--border-2);
	padding-top: 1rem;
	white-space: pre-wrap;
}

/* section heads */
.asd-section {
	margin-bottom: 3.4rem;
}

.asd-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	margin-bottom: 1.4rem;
}

.asd-section__head h2 {
	min-width: 0;
}

.asd-section__head h2 {
	font-size: 1.6rem;
	font-weight: 800;
}

/* category grid */
.asd-cat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.asd-cat {
	display: block;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 22px 22px 26px;
	transition: transform .12s ease, border-color .12s ease;

	@media (max-width: 760px) {
		padding: 15px;
	}
}

.asd-cat:hover {
	transform: translateY(-2px);
	border-color: #d8e0ee;
}

.asd-cat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--blue-soft);
	color: var(--blue);
	font-weight: 700;
	font-size: .95rem;
	margin-bottom: 1.1rem;
}

.asd-cat h3 {
	font-size: 1.08rem;
	font-weight: 700;
	margin-bottom: .4rem;
}

.asd-cat p {
	color: var(--muted);
	font-size: .92rem;
}

/* how it works (dark) */
.asd-how {
	background: var(--ink);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 44px 44px 48px;
	margin-bottom: 3.4rem;
}

.asd-how h2 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 2rem;
}

.asd-how__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.asd-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: rgba(47, 107, 255, .22);
	color: #7da4ff;
	font-weight: 700;
	font-size: .9rem;
	margin-bottom: 1.1rem;
}

.asd-step h3 {
	color: #fff;
	font-size: 1.08rem;
	font-weight: 700;
	margin-bottom: .5rem;
}

.asd-step p {
	color: rgba(255, 255, 255, .62);
	font-size: .92rem;
}

/* bottom: articles + contact */
.asd-bottom {
	display: grid;
	grid-template-columns: 1.32fr 1fr;
	gap: 22px;
	margin-bottom: 3rem;
}

/* Grid items default to min-width:auto, which lets a card grow past the
   viewport on mobile. Allow them to shrink so their content wraps instead. */
.asd-bottom>*,
.asd-cta>*,
.asd-how__grid>* {
	min-width: 0;
}

.asd-articles {
	padding: 28px 30px;
}

.asd-art-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.asd-art-list li {
	border-top: 1px solid var(--border-2);
}

.asd-art-list li:first-child {
	border-top: 0;
}

.asd-art-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0;
	min-width: 0;
}

/* The text column must be allowed to shrink, or a long title/meta line pushes
   the row wider than its card. */
.asd-art-list a>div {
	min-width: 0;
}

.asd-art-list h3 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .4rem;
	overflow-wrap: anywhere;
}

.asd-art-list .asd-art-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .3rem .7rem;
}

.asd-art-read {
	overflow-wrap: anywhere;
}

.asd-chev {
	flex: none;
}

.asd-tag {
	color: var(--blue);
	font-weight: 700;
	font-size: .8rem;
}

.asd-art-read {
	color: var(--muted-2);
	font-size: .85rem;
}

.asd-chev {
	color: #c2cad6;
	font-size: 1.3rem;
	line-height: 1;
}

.asd-art-list a:hover h3 {
	color: var(--blue);
}

.asd-contact {
	background: #eef3fc;
	border-color: #dde7f8;
	padding: 28px 30px;
}

.asd-contact h2 {
	font-size: 1.25rem;
	font-weight: 800;
	margin-bottom: .5rem;
}

.asd-contact>p {
	color: var(--muted);
	font-size: .95rem;
	margin-bottom: 1.6rem;
}

.asd-channels {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

.asd-channels li {
	display: flex;
	align-items: center;
	gap: .9rem;
}

.asd-channel__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--blue);
	color: #fff;
}

.asd-channel__icon svg {
	width: 18px;
	height: 18px;
}

.asd-channel__icon--soft {
	background: var(--blue-soft);
	color: var(--blue);
	font-weight: 700;
	font-size: 1.1rem;
}

/* Let the text column shrink so a long email/URL can wrap instead of pushing
   the card off-screen. */
.asd-channel__text {
	min-width: 0;
}

.asd-channel__text strong {
	display: block;
	font-weight: 700;
	font-size: .98rem;
}

.asd-channel__text span {
	display: block;
	color: var(--muted);
	font-size: .9rem;
	overflow-wrap: anywhere;
}

.asd-contact hr {
	border: 0;
	border-top: 1px solid #d9e3f5;
	margin: 1.4rem 0;
}

.asd-hours {
	font-size: .92rem;
	color: var(--ink-2);
	margin-bottom: .5rem;
}

.asd-hours strong {
	font-weight: 700;
}

.asd-priority-line {
	color: var(--red);
	font-weight: 700;
	font-size: .92rem;
}

/* footer */
.asd-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--border);
	padding: 1.6rem 0 .5rem;
	color: var(--muted-2);
	font-size: .9rem;
}

.asd-foot nav {
	display: flex;
	gap: 1.6rem;
}

.asd-foot a:hover {
	color: var(--ink);
}

/* request modal */
.asd-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}

.asd-modal.is-open {
	display: block;
}

.asd-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 26, 43, .45);
	backdrop-filter: blur(2px);
}

.asd-modal__panel {
	position: relative;
	max-width: 560px;
	margin: 6vh auto;
	background: #fff;
	border-radius: var(--radius-lg);
	padding: 30px 32px 34px;
	max-height: 88vh;
	overflow: auto;
}

.asd-modal__panel h2 {
	font-size: 1.5rem;
	font-weight: 800;
}

.asd-modal__panel>p {
	color: var(--muted);
	margin-bottom: 1.4rem;
}

.asd-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--muted);
	font-size: 1.1rem;
	line-height: 1;
}

.asd-modal__close:hover {
	background: var(--bg);
}

.asd-form {
	display: grid;
	gap: 1rem;
}

.asd-form label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: .35rem;
}

.asd-form input,
.asd-form select,
.asd-form textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .7rem .85rem;
	font-family: inherit;
	font-size: .95rem;
	color: var(--ink);
	background: #fff;
}

.asd-form textarea {
	min-height: 120px;
	resize: vertical;
}

.asd-form input:focus,
.asd-form select:focus,
.asd-form textarea:focus {
	outline: none;
	border-color: var(--blue);
}

.asd-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.asd-form__actions {
	margin-top: .4rem;
}

/* =========================================================================
   STAFF CONSOLE  (template-console)
   ========================================================================= */
.asd-nav {
	background: var(--ink);
	color: #fff;
}

.asd-nav__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 28px;
	height: 62px;
	display: flex;
	align-items: center;
	gap: 2.2rem;
}

.asd-nav__brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-weight: 700;
	font-family: var(--font-display);
}

.asd-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--blue);
	color: #fff;
	font-weight: 800;
	font-size: .85rem;
}

.asd-nav__links {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	align-items: center;
}

.asd-nav__links a {
	color: rgba(255, 255, 255, .62);
	font-size: .92rem;
	font-weight: 500;
	height: 100%;
	display: flex;
	align-items: center;
	border-bottom: 2px solid transparent;
}

.asd-nav__links a:hover {
	color: #fff;
}

.asd-nav__links .is-active a {
	color: #fff;
	border-bottom-color: var(--blue);
}

.asd-nav__tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.asd-nav__search {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 9px;
	padding: .5rem .85rem;
	color: #fff;
	font-size: .88rem;
	width: 210px;
}

.asd-nav__search::placeholder {
	color: rgba(255, 255, 255, .5);
}

.asd-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: rgba(255, 255, 255, .8);
	font-size: 1rem;
}

.asd-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
}

.asd-console {
	padding: 34px 0 60px;
}

.asd-console__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.8rem;
}

.asd-console__head h1 {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: .35rem;
}

.asd-console__head .asd-sub {
	color: var(--muted);
	font-size: .98rem;
}

.asd-console__tools {
	display: flex;
	gap: .7rem;
	align-items: center;
}

.asd-select {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .62rem .9rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ink);
}

/* metric cards */
.asd-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin-bottom: 22px;
}

.asd-metric {
	padding: 22px 24px;
}

.asd-metric__label {
	color: var(--muted);
	font-size: .92rem;
	margin-bottom: .6rem;
}

.asd-metric__value {
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 800;
	letter-spacing: -.02em;
	margin-bottom: .8rem;
}

.asd-pill {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: .25rem .6rem;
	font-size: .8rem;
	font-weight: 700;
}

.asd-pill--green {
	background: var(--green-soft);
	color: var(--green);
}

.asd-pill--amber {
	background: var(--amber-soft);
	color: var(--amber);
}

.asd-pill--blue {
	background: var(--blue-soft);
	color: var(--blue);
}

.asd-pill--red {
	background: var(--red-soft);
	color: var(--red);
}

/* console main grid */
.asd-console__grid {
	display: grid;
	grid-template-columns: 1.62fr 1fr;
	gap: 22px;
}

.asd-panel {
	padding: 24px 26px;
}

.asd-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.asd-panel__title {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.asd-panel__title h2 {
	font-size: 1.15rem;
	font-weight: 800;
}

/* triage table */
.asd-triage {
	width: 100%;
	border-collapse: collapse;
}

.asd-triage th {
	text-align: left;
	color: var(--muted-2);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 0 .6rem .8rem;
	border-bottom: 1px solid var(--border-2);
}

.asd-triage th:last-child,
.asd-triage td:last-child {
	text-align: right;
}

.asd-triage td {
	padding: .95rem .6rem;
	border-bottom: 1px solid var(--border-2);
	vertical-align: middle;
}

.asd-triage tr:last-child td {
	border-bottom: 0;
}

.asd-triage__title {
	font-weight: 700;
	font-size: .96rem;
	color: var(--ink);
	margin-bottom: .2rem;
}

.asd-triage__sub {
	color: var(--muted);
	font-size: .82rem;
}

.asd-age {
	color: var(--ink-2);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
}

.asd-prio {
	display: inline-flex;
	align-items: center;
	border-radius: 7px;
	padding: .25rem .55rem;
	font-size: .8rem;
	font-weight: 600;
}

.asd-prio--urgent {
	background: var(--red-soft);
	color: #c5453d;
}

.asd-prio--high {
	background: var(--amber-soft);
	color: var(--amber);
}

.asd-prio--normal {
	background: var(--blue-soft);
	color: var(--blue);
}

.asd-prio--low {
	background: #eef1f6;
	color: var(--muted);
}

.asd-assign {
	background: var(--blue);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: .45rem .9rem;
	font-size: .85rem;
	font-weight: 600;
}

.asd-assign:hover {
	background: var(--blue-ink);
}

.asd-assignee {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue-ink);
	font-size: .72rem;
	font-weight: 700;
}

/* right column stack */
.asd-stack {
	display: grid;
	gap: 22px;
	align-content: start;
}

/* SLA bars */
.asd-sla {
	display: grid;
	gap: 1.2rem;
}

.asd-sla__row .asd-sla__top {
	display: flex;
	justify-content: space-between;
	margin-bottom: .5rem;
}

.asd-sla__label {
	font-size: .92rem;
	font-weight: 600;
}

.asd-sla__pct {
	font-weight: 700;
	font-size: .92rem;
}

.asd-sla__pct--green {
	color: var(--green);
}

.asd-sla__pct--amber {
	color: var(--amber);
}

.asd-bar {
	height: 8px;
	border-radius: 999px;
	background: #eef1f6;
	overflow: hidden;
}

.asd-bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
}

.asd-bar span.green {
	background: var(--green);
}

.asd-bar span.amber {
	background: #d79a2b;
}

/* agent performance */
.asd-agents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.05rem;
}

.asd-agent {
	display: flex;
	align-items: center;
	gap: .85rem;
}

.asd-agent__id {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--blue-soft);
	color: var(--blue-ink);
	font-weight: 700;
	font-size: .8rem;
	flex: none;
}

.asd-agent__name {
	font-weight: 700;
	font-size: .95rem;
}

.asd-agent__team {
	color: var(--muted);
	font-size: .82rem;
}

.asd-agent__stats {
	margin-left: auto;
	display: flex;
	gap: 1.4rem;
	text-align: right;
}

.asd-agent__num {
	font-weight: 700;
	font-size: .98rem;
}

.asd-agent__num span {
	display: block;
	color: var(--muted);
	font-size: .76rem;
	font-weight: 500;
}

.asd-agent__csat {
	color: var(--green);
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
	.asd-metrics {
		grid-template-columns: repeat(2, 1fr);
	}

	.asd-cat-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.asd-console__grid {
		grid-template-columns: 1fr;
	}

	.asd-bottom {
		grid-template-columns: 1fr;
	}

	.asd-nav__links,
	.asd-nav__search {
		display: none;
	}
}

@media (max-width: 760px) {
	.asd-cta {
		grid-template-columns: 1fr;
	}

	.asd-cat-grid {
		grid-template-columns: 1fr;
	}

	.asd-how__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.asd-metrics {
		grid-template-columns: 1fr;
	}

	.asd-console__head {
		flex-direction: column;
	}

	.asd-form__row {
		grid-template-columns: 1fr;
	}

	.asd-hero h1 {
		font-size: 2.4rem;
	}

	/* Tighter spacing so content fits smaller viewports */
	.asd-portal {
		padding: 32px 0 32px;
	}

	.asd-hero {
		margin-bottom: 2rem;
	}

	.asd-section {
		margin-bottom: 2.4rem;
	}

	.asd-section__head h2,
	.asd-cta__card h2 {
		font-size: 1.4rem;
	}

	.asd-cta__card {
		padding: 15px;
	}

	.asd-how {
		padding: 15px;
	}

	.asd-how h2 {
		margin-bottom: 1.4rem;
	}

	.asd-ticket,
	.asd-articles,
	.asd-contact {
		padding: 15px;
	}

	/* The "Browse the knowledge base" link drops under the heading */
	.asd-section__head .asd-link {
		flex-basis: 100%;
	}

	.asd-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: .8rem;
	}
}

@media (max-width: 480px) {
	.asd-container {
		padding: 0 16px;
	}

	.asd-hero h1 {
		font-size: 2.1rem;
	}

	.asd-hero__sub {
		font-size: 1.02rem;
	}

	.asd-ticket__top {
		flex-direction: column;
	}

	.asd-track__form {
		flex-wrap: wrap;
	}

	.asd-track__form .asd-btn {
		width: 100%;
		justify-content: center;
	}

	.asd-modal__panel {
		margin: 0;
		max-width: none;
		width: 100%;
		min-height: 100vh;
		max-height: 100vh;
		border-radius: 0;
		padding: 24px 18px 28px;
	}

	.asd-foot nav {
		flex-wrap: wrap;
		gap: .5rem 1.2rem;
	}
}

/* =========================================================================
   KB articles, ratings, and clickable triage (added)
   ========================================================================= */
a.asd-triage__title {
	color: inherit;
	text-decoration: none;
}

a.asd-triage__title:hover {
	color: var(--blue);
}

/* Customer CSAT rating on a resolved tracked ticket */
.asd-rate {
	border-top: 1px solid var(--border-2);
	margin-top: 1.3rem;
	padding-top: 1.3rem;
}

.asd-rate h4 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .7rem;
}

.asd-rate__done {
	color: var(--green);
	font-weight: 600;
}

.asd-stars-input {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	margin-bottom: .9rem;
}

.asd-stars-input input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.asd-stars-input label {
	color: #d6dce6;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: color .1s ease;
}

.asd-stars-input label:hover,
.asd-stars-input label:hover~label,
.asd-stars-input input:checked~label {
	color: #f5b50a;
}

.asd-rate__form .asd-btn {
	display: inline-block;
}

/* Single article page */
.asd-container--narrow {
	max-width: 760px;
}

.asd-article-page {
	padding-top: 44px;
}

.asd-article-back {
	margin-bottom: 1.4rem;
}

.asd-article h1 {
	font-size: clamp(1.9rem, 3.5vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: .3rem 0 .6rem;
}

.asd-article__meta {
	color: var(--muted);
	font-size: .9rem;
	margin-bottom: 1.9rem;
}

.asd-article__body {
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--ink-2);
}

.asd-article__body>*:first-child {
	margin-top: 0;
}

.asd-article__body p {
	margin: 0 0 1.15rem;
}

.asd-article__body h2 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	margin: 1.9rem 0 .6rem;
	color: var(--ink);
}

.asd-article__body h3 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	margin: 1.5rem 0 .5rem;
	color: var(--ink);
}

.asd-article__body ul,
.asd-article__body ol {
	margin: 0 0 1.15rem 1.3rem;
}

.asd-article__body li {
	margin-bottom: .4rem;
}

.asd-article__body a {
	color: var(--blue);
	text-decoration: underline;
}

/* Helpful vote */
.asd-helpful-vote {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	border-top: 1px solid var(--border-2);
	margin-top: 2.2rem;
	padding-top: 1.5rem;
}

.asd-helpful-vote__q {
	font-weight: 600;
}

.asd-vote-form {
	display: inline-flex;
	gap: .5rem;
}

.asd-vote-btn {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .45rem 1.2rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	color: var(--ink-2);
}

.asd-vote-btn:hover {
	border-color: var(--blue);
	color: var(--blue);
	background: var(--blue-soft);
}

/* KB archive grid */
.asd-kb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 2.4rem;
}

.asd-kb-card {
	display: block;
	padding: 24px;
	transition: transform .12s ease;
}

.asd-kb-card:hover {
	transform: translateY(-2px);
}

.asd-kb-card h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: .7rem 0 .5rem;
}

.asd-kb-card__excerpt {
	color: var(--muted);
	font-size: .92rem;
	margin-bottom: 1rem;
}

@media (max-width: 880px) {
	.asd-kb-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Conversation, attachments, reply, KB search (added)
   ========================================================================= */
.asd-form__hint {
	color: var(--muted);
	font-weight: 400;
	font-size: .85rem;
}

.asd-ticket__attach {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.asd-ticket__attach-label {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted-2);
	font-weight: 700;
	margin-right: .3rem;
}

.asd-attach-chip {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	background: var(--blue-soft);
	color: var(--blue-ink);
	border-radius: 8px;
	padding: .3rem .65rem;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}

.asd-attach-chip:hover {
	background: #dbe6ff;
}

.asd-thread {
	border-top: 1px solid var(--border-2);
	margin-top: 1.3rem;
	padding-top: 1.2rem;
}

.asd-thread h4 {
	font-size: 1rem;
	margin: 0 0 .9rem;
}

.asd-msg {
	border-radius: 12px;
	padding: .8rem 1rem;
	margin-bottom: .7rem;
	max-width: 88%;
}

.asd-msg--staff {
	background: var(--blue-soft);
	margin-right: auto;
}

.asd-msg--customer {
	background: var(--bg);
	border: 1px solid var(--border);
	margin-left: auto;
}

.asd-msg__head {
	font-size: .8rem;
	color: var(--muted);
	margin-bottom: .25rem;
}

.asd-msg__head strong {
	color: var(--ink);
}

.asd-msg__body {
	font-size: .95rem;
	color: var(--ink-2);
}

.asd-msg__body p {
	margin: 0 0 .4rem;
}

.asd-msg__body p:last-child {
	margin-bottom: 0;
}

.asd-reply {
	border-top: 1px solid var(--border-2);
	margin-top: 1.2rem;
	padding-top: 1.2rem;
}

.asd-reply h4 {
	font-size: 1rem;
	margin: 0 0 .6rem;
}

.asd-reply__form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .7rem .85rem;
	font-family: inherit;
	font-size: .95rem;
	margin-bottom: .7rem;
	resize: vertical;
}

.asd-reply__form textarea:focus {
	outline: none;
	border-color: var(--blue);
}

.asd-kb-searchbar {
	display: flex;
	gap: 10px;
	margin-bottom: 1.2rem;
}

.asd-kb-searchbar input {
	flex: 1;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: .7rem .9rem;
	font-size: .95rem;
	font-family: inherit;
}

.asd-kb-searchbar input:focus {
	outline: none;
	border-color: var(--blue);
}

.asd-kb-results {
	color: var(--muted);
	margin-bottom: 1.6rem;
}

.grecaptcha-badge {
	visibility: hidden !important;
}