/**
 * Shared components — classes used on more than one page, or by the header, footer and partials.
 *
 * Generated from the inline styles the templates used to carry. Values are
 * design tokens (site-tokens.css). Loaded after style.css.
 */

.addon-icon__glyph {
	font-size:30px;
	color:var(--site-teal);
}

.addon-icon__glyph--on-teal {
	color:var(--site-white);
}


.app-bar-title--active {
	color:var(--site-text-med);
}

.app-dots__close {
	background:var(--site-window-close);
}

.app-dots__minimize {
	background:var(--site-window-minimize);
}

.app-dots__minimize--bright {
	background:var(--site-window-minimize-alt);
}


.app-dots__zoom {
	background:var(--site-window-zoom);
}

.app-dots__zoom--bright {
	background:var(--site-window-zoom-alt);
}


.app-pill-sm-light--success {
	background:var(--site-success-bg);
	color:var(--site-success);
}

.badge--success-on-dark {
	background:var(--site-success-alpha-20);
	color:var(--site-mint-52);
}

.fc--on-dark {
	background:var(--site-white-alpha-4);
	border-color:var(--site-white-alpha-8);
}

.fi--on-dark {
	background:var(--site-teal-alpha-20);
}

.ft-brand__home-link {
	display:inline-block;
	line-height:0;
	text-decoration:none;
}

.ft-territory {
	text-align:center;
	padding:14px 24px;
	border-top:1px solid var(--site-white-alpha-6);
	margin-bottom:0;
}

.ft-territory__icon {
	color:var(--site-white-alpha-50);
	margin-right:6px;
}

.ft-territory__link {
	color:var(--site-teal);
	font-weight:700;
	margin-left:6px;
}

.ft-territory__label {
	color:var(--site-white-alpha-50);
}

.ft-territory__text {
	font-size:12px;
	color:var(--site-white-alpha-35);
	margin:0;
}

.ftag--on-dark {
	background:var(--site-teal-alpha-20);
	color:var(--site-sky-70);
	border:none;
}

.hch-dot--minimize {
	background:var(--site-amber-50);
}

.hch-dot--zoom {
	background:var(--site-green-45);
}

.hch-dot--close {
	background:var(--site-red-60);
}

.lr-av--soft {
	background:var(--site-teal-bg);
	color:var(--site-teal);
}

.lr-av--purple {
	background:var(--site-violet-39);
}

.mlsg-badge--on-dark {
	background:var(--site-teal-alpha-20);
	color:var(--site-sky-70);
}

.mlsg-badge--light {
	background:var(--site-teal-bg);
	color:var(--site-teal);
}

.mlsg-card-desc .mlsg-card-desc__link {
	color:var(--site-teal);
}

.mlsg-desc.mlsg-desc--on-dark {
	color:var(--site-slate-65);
}

.mlsg-logo-block__link {
	display:inline-block;
	line-height:0;
	text-decoration:none;
}



.error-page {
	min-height:70vh;
	display:flex;
	align-items:center;
}

.error-page__content {
	text-align:center;
	max-width:600px;
	margin:0 auto;
}

.error-page__code {
	font-size:120px;
	font-weight:900;
	color:var(--site-teal);
	line-height:1;
	margin-bottom:8px;
	letter-spacing:-.04em;
	opacity:.9;
}

.error-page__actions {
	display:flex;
	gap:16px;
	justify-content:center;
	flex-wrap:wrap;
}

.error-page__message {
	font-size:17px;
	color:var(--site-white-alpha-60);
	line-height:1.7;
	margin-bottom:40px;
}

.error-page__title {
	font-size:32px;
	font-weight:800;
	color:var(--site-white);
	margin-bottom:16px;
}

.mlsg-title--on-dark {
	color:var(--site-white);
}

.sec-sub--on-dark {
	color:var(--site-slate-65);
}

.sec-title--on-dark {
	color:var(--site-white);
}

/* Carried over from style.css rules that matched these elements by their old inline style text. */

/* Territory availability chips (partials/territory-chips.php) */
.territory-chips { display:flex; flex-wrap:wrap; gap:10px; }
.tc-chip {
	display:inline-flex; align-items:center; gap:8px;
	padding:8px 16px; border-radius:100px;
	font-size:13px; font-weight:600;
	border:1px solid; transition:transform .15s;
}
.tc-chip:hover { transform:translateY(-1px); }
.tc-claimed {
	background:var(--site-danger-bg); border-color:var(--site-red-82); color:var(--site-red-35);
}
.tc-available {
	background:var(--site-green-97); border-color:var(--site-success-border); color:var(--site-green-24);
}
.tc-dot {
	width:7px; height:7px; border-radius:50%; flex-shrink:0;
}
.tc-claimed .tc-dot { background:var(--site-red-60); box-shadow:0 0 6px var(--site-red-60); }
.tc-available .tc-dot { background:var(--site-green-45); box-shadow:0 0 6px var(--site-green-45); }
.tc-status { font-size:11px; font-weight:700; opacity:.75; }

/* Knowledge Base notice — "Coming soon" banner inside an article (partials/docs-content.php). */
.docs-notice {
	border-radius: 8px;
	padding: 12px 14px;
}
.docs-notice--coming-soon {
	background: var(--site-amber-89);
	border: 1px solid var(--site-amber-65);
}

/* "Why we built it this way" — the short three-item section
   (partials/section-why-built.php) on Pricing, every comparison page and the
   /why-we-built-it/ page itself. Flex only; cards wrap on narrow screens. */
.mlsg-why { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px }
.mlsg-why__item { flex: 1 1 280px; min-width: 260px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--site-border); border-radius: 14px; background: var(--site-white); padding: 24px 26px }
.mlsg-why__icon { font-size: 22px; color: var(--site-teal-deeper) }
.mlsg-why__title { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--site-navy) }
.mlsg-why__text { font-size: 16px; line-height: 1.65; color: var(--site-text-sec) }
.mlsg-why__link { margin-top: auto; font-size: 16px }
.mlsg-why__more { margin-top: 28px; font-size: 16px }

/* A /why-we-built-it/ band: several paragraphs, then "what we do instead". */
.mlsg-why__prose { display: flex; flex-direction: column; gap: 14px }
.mlsg-why__instead { margin-top: 8px; font-size: 17px; font-weight: 800; color: var(--site-navy) }