/* ============================================================
   Programmatic SEO pages -- self-contained design system (.ps-*)
   Loaded only on /traffic/ URLs. Palette matches the .nl-* system
   used by Aiseolanding.php so the cluster does not look bolted on.
   ============================================================ */

.ps {
	--ps-ink:      #0b1220;
	--ps-ink-2:    #1e293b;
	--ps-body:     #475569;
	--ps-muted:    #64748b;
	--ps-line:     #e2e8f0;
	--ps-bg:       #ffffff;
	--ps-bg-soft:  #f6f9fc;
	--ps-accent:   #499DB9;
	--ps-accent-2: #3980C8;
	--ps-accent-3: #046BD2;
	--ps-radius:   16px;
	--ps-shadow:   0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
	--ps-maxw:     1040px;

	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	color: var(--ps-body);
	line-height: 1.65;
	max-width: var(--ps-maxw);
	margin: 0 auto;
	padding: 0 20px 72px;
}

.ps h1,
.ps h2 {
	color: var(--ps-ink);
	line-height: 1.2;
	margin: 0 0 .5em;
}

.ps h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); font-weight: 700; letter-spacing: -.02em; }
.ps h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 650; }
.ps p  { margin: 0 0 1.1em; }

/* Body links. Deliberately kept at low specificity (0,1,1) -- anything that
   needs its own colour (buttons, state pills) qualifies its own selector with
   `a` to outrank it. See .ps a.ps-btn-primary below. */
.ps a { color: var(--ps-accent-3); }

/* ---- breadcrumbs ---- */
.ps-crumbs {
	font-size: .875rem;
	color: var(--ps-muted);
	padding: 24px 0 8px;
}
.ps-crumbs a { color: var(--ps-muted); text-decoration: none; }
.ps-crumbs a:hover { color: var(--ps-accent-3); text-decoration: underline; }
.ps-crumbs span { margin: 0 .4em; }
.ps-crumbs [aria-current] { color: var(--ps-ink-2); margin-left: 0; }

/* ---- hero ---- */
.ps-hero { padding: 16px 0 32px; }

.ps-badge {
	display: inline-block;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .12em;
	color: #fff;
	background: linear-gradient(135deg, var(--ps-accent), var(--ps-accent-3));
	border-radius: 999px;
	padding: 5px 14px;
	margin-bottom: 14px;
}

.ps-flag {
	display: block;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ps-line);
	border-radius: 4px;
	margin-bottom: 14px;
}
.ps-flag-sm {
	width: 20px;
	height: 20px;
	border: 1px solid var(--ps-line);
	border-radius: 3px;
	vertical-align: -4px;
	margin-right: 8px;
}
.ps-none { color: var(--ps-muted); font-style: italic; }

/* Long values (a UTC range) need to shrink rather than overflow the tile. */
.ps-fact-value--sm { font-size: 1.15rem; }

.ps-lede {
	font-size: 1.125rem;
	color: var(--ps-body);
	max-width: 68ch;
}

/* ---- buttons ---- */
.ps-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.ps-btn {
	display: inline-block;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 15px 26px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.ps-btn:hover { transform: translateY(-1px); }

/* Qualified with `a` (0,2,1) so the button's own text colour wins over the
   generic `.ps a` link colour -- and over the parent theme's link styling. */
.ps a.ps-btn-primary,
.ps a.ps-btn-primary:link,
.ps a.ps-btn-primary:visited {
	color: #fff;
	background: linear-gradient(135deg, var(--ps-accent-2), var(--ps-accent-3));
	box-shadow: 0 6px 18px rgba(4,107,210,.28);
}
.ps a.ps-btn-primary:hover,
.ps a.ps-btn-primary:focus {
	color: #fff;
	box-shadow: 0 10px 26px rgba(4,107,210,.34);
}

.ps a.ps-btn-ghost,
.ps a.ps-btn-ghost:link,
.ps a.ps-btn-ghost:visited {
	color: var(--ps-ink-2);
	background: var(--ps-bg);
	border: 1px solid var(--ps-line);
}
.ps a.ps-btn-ghost:hover,
.ps a.ps-btn-ghost:focus {
	color: var(--ps-ink);
	border-color: var(--ps-accent);
}

/* ---- fact strip ---- */
.ps-facts {
	list-style: none;
	margin: 0 0 44px;
	padding: 22px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	background: var(--ps-bg-soft);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	box-shadow: var(--ps-shadow);
}
.ps-facts li { margin: 0; text-align: center; }

.ps-fact-value {
	display: block;
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--ps-ink);
	line-height: 1.1;
	letter-spacing: -.02em;
}
.ps-fact-label {
	display: block;
	font-size: .85rem;
	color: var(--ps-muted);
	margin-top: 6px;
}

/* ---- sections ---- */
.ps-section { margin: 0 0 48px; }

/* ---- metro chips ---- */
.ps-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.2em; padding: 0; }
.ps-chips li {
	margin: 0;
	font-size: .95rem;
	font-weight: 550;
	color: var(--ps-ink-2);
	background: var(--ps-bg-soft);
	border: 1px solid var(--ps-line);
	border-radius: 999px;
	padding: 8px 16px;
}

/* ---- steps ---- */
.ps-steps { margin: 0; padding-left: 1.3em; }
.ps-steps li { margin-bottom: 1em; }
.ps-steps strong { color: var(--ps-ink); display: block; }

/* ---- tables ---- */
.ps-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	overflow: hidden;
}
.ps-table caption {
	text-align: left;
	font-size: .85rem;
	color: var(--ps-muted);
	padding-bottom: 10px;
}
.ps-table th,
.ps-table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ps-line);
}
.ps-table thead th {
	background: var(--ps-bg-soft);
	color: var(--ps-ink);
	font-weight: 650;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ps-table tbody tr:last-child th,
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-table-states th[scope="row"] { font-weight: 600; }
.ps-table-states a { text-decoration: none; font-weight: 600; }
.ps-table-states a:hover { text-decoration: underline; }

/* Narrow screens: let the table scroll instead of breaking the page. */
@media (max-width: 640px) {
	.ps-section > .ps-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- FAQ ---- */
.ps-faq { margin: 0; }
.ps-faq dt {
	font-weight: 650;
	color: var(--ps-ink);
	margin-top: 1.4em;
}
.ps-faq dd { margin: .5em 0 0; }

/* ---- final CTA ---- */
.ps-final-cta {
	text-align: center;
	background: var(--ps-bg-soft);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	padding: 40px 24px;
}
.ps-final-cta h2 { margin-bottom: .3em; }

/* ---- related states ---- */
.ps-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 1.2em; padding: 0; }
.ps-links li { margin: 0; }
.ps .ps-links a,
.ps .ps-links a:link,
.ps .ps-links a:visited {
	display: inline-block;
	font-size: .92rem;
	text-decoration: none;
	color: var(--ps-ink-2);
	background: var(--ps-bg);
	border: 1px solid var(--ps-line);
	border-radius: 999px;
	padding: 7px 15px;
}
.ps .ps-links a:hover,
.ps .ps-links a:focus { border-color: var(--ps-accent); color: var(--ps-accent-3); }

/* ---- source note ---- */
.ps-source-note {
	font-size: .82rem;
	color: var(--ps-muted);
	border-top: 1px solid var(--ps-line);
	padding-top: 18px;
	max-width: 70ch;
}