/* ==========================================================================
   TrackHawk MCP landing page
   Design direction: a navigation instrument. The hero is a dark map canvas
   (hairline coordinate grid + warm glow) carrying one readout - the connector
   URL. Everything below it is a quiet, hairline-ruled spec sheet so the hero
   stays the only loud moment on the page.

   Constraints honoured here: no external requests (system font stacks only),
   no inline styles, and `[hidden]` always wins so tab switching keeps working.
   ========================================================================== */

:root {
	/* Brand */
	--navy: #023047;
	--navy-deep: #01141f;
	--orange: #F6851F;
	/* Darkened orange for text/marks on light surfaces (>= 4.5:1 on both
	   --bg and white; the brand orange itself is far too light for text). */
	--orange-ink: #B4560A;

	/* Light surfaces */
	--ink: #12212c;
	--muted: #5b6b76;
	--bg: #f7f9fa;
	--card: #ffffff;
	--border: #dde5ea;

	/* Dark surfaces */
	--on-navy: #c8d6de;
	--on-navy-soft: #9fb4c1;
	--hairline-dark: rgba(255, 255, 255, 0.14);

	/* Type */
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter,
		"Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	/* Shape */
	--radius: 12px;
	--radius-sm: 8px;
	--shadow-card: 0 1px 2px rgba(2, 48, 71, 0.05),
		0 14px 30px -22px rgba(2, 48, 71, 0.35);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box }

/* MUST stay `!important`: panels are toggled with the `hidden` attribute, so
   any `display` rule on [role="tabpanel"] would otherwise defeat it. */
[hidden] { display: none !important }

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

body {
	margin: 0;
	font-family: var(--sans);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.65;
	/* Belt and braces: nothing on this page may push the page sideways. */
	overflow-x: hidden;
}

::selection {
	background: var(--orange);
	color: var(--navy);
}

/* One consistent, always-visible keyboard ring across the whole page. */
:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 3px;
	border-radius: 4px;
}
.hero :focus-visible { outline-color: #ffffff }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Hero - the map canvas
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% 0%, #063f5c 0%, transparent 55%),
		linear-gradient(168deg, var(--navy) 0%, var(--navy-deep) 100%);
	/* Echoes the orange slab under the wordmark in the TrackHawk logo. */
	border-bottom: 3px solid var(--orange);
	color: #fff;
	padding: clamp(3rem, 8vw, 5.5rem) 1.5rem clamp(3.25rem, 8vw, 5rem);
	text-align: center;
}

/* Coordinate grid: the signature. Masked to a soft ellipse so it reads as a
   chart surface fading out, not as wallpaper. */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.065) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.065) 1px, transparent 1px);
	background-size: 44px 44px;
	background-position: center top;
	-webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 34%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 78% 68% at 50% 34%, #000 25%, transparent 78%);
	pointer-events: none;
}

/* Warm signal glow behind the mark. */
.hero::after {
	content: "";
	position: absolute;
	inset: -30% 0 auto 0;
	height: 70%;
	z-index: -1;
	background: radial-gradient(ellipse 45% 55% at 50% 50%, rgba(246, 133, 31, 0.16), transparent 70%);
	pointer-events: none;
}

.hero > * { position: relative }

/* The logo is left exactly as drawn: the white wordmark reads on navy, and the
   "SMARTER GPS TRACKING SOLUTIONS" line is navy on the logo's own orange slab,
   so it needs no recolouring here. Only the size is set. */
.hero .logo {
	height: 46px;
	width: auto;
	max-width: 100%;
	margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.hero h1 {
	font-size: clamp(2.1rem, 6.4vw, 3.4rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
	font-weight: 700;
	margin: 0 0 1.1rem;
	text-wrap: balance;
}

.subhead {
	max-width: 40rem;
	margin: 0 auto clamp(2rem, 5vw, 2.75rem);
	color: var(--on-navy);
	font-size: clamp(1.02rem, 2.2vw, 1.14rem);
	text-wrap: pretty;
}

/* The readout. One elevated plate on the canvas - the page's whole call to
   action, so nothing else competes with it. */
.url-box {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 100%;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	padding: 0.45rem 0.45rem 0.45rem 1.15rem;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 20px 44px -26px rgba(0, 0, 0, 0.85);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.url-box:hover {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.1);
}
.url-box code {
	font-family: var(--mono);
	font-variant-ligatures: none;
	font-size: clamp(0.85rem, 2.6vw, 1rem);
	letter-spacing: -0.01em;
	color: #eaf3f8;
	overflow-wrap: anywhere;
	text-align: left;
}

.copy-btn {
	flex: none;
	background: var(--orange);
	/* Navy on orange clears AA; white on orange is only 2.5:1. */
	color: var(--navy);
	border: none;
	border-radius: 10px;
	padding: 0.6rem 1.15rem;
	min-height: 44px;
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.copy-btn:hover { filter: brightness(1.07) }
.copy-btn:active { transform: translateY(1px) }

/* --------------------------------------------------------------------------
   Main column and section rhythm
   -------------------------------------------------------------------------- */

main {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 1.5rem 3.5rem;
}

main h2 {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: clamp(1.35rem, 3.4vw, 1.8rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: clamp(2.75rem, 7vw, 3.75rem) 0 1.4rem;
}
/* Hairline that runs from the heading to the column edge: marks where each
   section starts without adding decoration that means nothing. */
main h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}

/* --------------------------------------------------------------------------
   Example prompts
   -------------------------------------------------------------------------- */

.prompt-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.prompt-chips li {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.5rem 1.15rem;
	font-size: 0.95rem;
	line-height: 1.45;
	box-shadow: 0 1px 2px rgba(2, 48, 71, 0.04);
}
.prompt-chips li::before,
.prompt-chips li::after {
	color: var(--orange-ink);
	font-weight: 700;
}
.prompt-chips li::before { content: "\201C"; margin-right: 0.1rem }
.prompt-chips li::after { content: "\201D"; margin-left: 0.1rem }

/* --------------------------------------------------------------------------
   Setup tabs
   -------------------------------------------------------------------------- */

.tabs {
	display: flex;
	gap: 0.15rem;
	border-bottom: 2px solid var(--border);
	overflow-x: auto;
	/* Hide the horizontal bar: the clipped last tab is the scroll affordance. */
	scrollbar-width: none;
}
.tabs::-webkit-scrollbar { height: 0 }

.tabs [role="tab"] {
	flex: none;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 0.75rem 1rem;
	min-height: 44px;
	font-family: var(--sans);
	font-size: 0.97rem;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.tabs [role="tab"]:hover { color: var(--ink) }
/* The tab strip scrolls, which clips anything drawn outside a tab - so the
   keyboard ring is drawn inside the tab instead of around it. */
.tabs [role="tab"]:focus-visible {
	outline-offset: -4px;
	border-radius: 8px;
}
.tabs [role="tab"][aria-selected="true"] {
	color: var(--navy);
	border-bottom-color: var(--orange);
}

[role="tabpanel"] {
	background: var(--card);
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: clamp(1.25rem, 4vw, 1.85rem);
	box-shadow: var(--shadow-card);
}

/* The panel heading repeats the tab label, so it is set as a small instrument
   label rather than a second title competing with the h2 above. */
[role="tabpanel"] h3 {
	margin: 0 0 1.1rem;
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

[role="tabpanel"] p { max-width: 68ch }
[role="tabpanel"] p:first-of-type { margin-top: 0 }

[role="tabpanel"] ol {
	max-width: 68ch;
	margin: 0;
	padding-left: 1.6rem;
}
[role="tabpanel"] ol li { margin: 0.55rem 0; padding-left: 0.15rem }
/* Styling ::marker keeps native list semantics intact (unlike list-style:none
   plus a ::before counter, which strips the list role in Safari). */
[role="tabpanel"] ol li::marker {
	font-family: var(--mono);
	font-weight: 700;
	color: var(--orange-ink);
}
[role="tabpanel"] strong { color: var(--navy) }

[role="tabpanel"] code {
	font-family: var(--mono);
	/* Never let a coding font fuse `--transport` into a single dash: these are
	   commands people retype. */
	font-variant-ligatures: none;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.1rem 0.4rem;
	font-size: 0.88em;
	overflow-wrap: anywhere;
}
[role="tabpanel"] pre {
	background: var(--navy-deep);
	color: #d7e5ee;
	border-radius: var(--radius-sm);
	padding: 1rem 1.15rem;
	margin: 1rem 0;
	font-size: 0.88rem;
	line-height: 1.6;
	/* The snippet is tab-indented in the markup; 8 columns per level reads as
	   a formatting error at this width. */
	-moz-tab-size: 2;
	tab-size: 2;
	/* Wide snippets scroll inside the block, never the page. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
[role="tabpanel"] pre code {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}

.plan-note {
	max-width: 68ch;
	margin: 1.5rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Security - the spec sheet
   -------------------------------------------------------------------------- */

#security {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(110% 140% at 100% 0%, #05405e 0%, transparent 60%),
		var(--navy);
	color: #fff;
	border-radius: var(--radius);
	padding: clamp(1.5rem, 5vw, 2.25rem);
	margin-top: clamp(2.75rem, 7vw, 3.75rem);
}
#security h2 {
	margin: 0 0 1.5rem;
	color: #fff;
}
#security h2::after { background: var(--hairline-dark) }

#security ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
}
#security li {
	color: var(--on-navy);
	font-size: 0.95rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--hairline-dark);
}
#security strong {
	display: block;
	color: #fff;
	font-size: 1rem;
	margin-bottom: 0.15rem;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq-item {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.15rem 1.25rem;
	margin-bottom: 0.6rem;
	box-shadow: 0 1px 2px rgba(2, 48, 71, 0.04);
}
.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none }
/* Plus sign drawn from two gradients (no glyph, no icon font) that rotates
   into a close mark when the item opens. */
.faq-item summary::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background:
		linear-gradient(var(--orange-ink), var(--orange-ink)) center / 12px 2px no-repeat,
		linear-gradient(var(--orange-ink), var(--orange-ink)) center / 2px 12px no-repeat;
	transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg) }
.faq-item[open] summary { color: var(--ink) }
.faq-item p {
	max-width: 72ch;
	margin: 0 0 1rem;
	color: var(--muted);
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
	border-top: 1px solid var(--border);
	padding: 1.75rem 1.5rem 2.25rem;
	display: flex;
	gap: 0.75rem 2rem;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 0.92rem;
}
footer a {
	color: var(--navy);
	font-weight: 600;
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}
footer a:hover {
	color: var(--orange-ink);
	border-bottom-color: var(--orange);
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	#security ul { grid-template-columns: minmax(0, 1fr); gap: 1.25rem }
}

@media (max-width: 640px) {
	body { line-height: 1.6 }
	.hero { padding-left: 1.15rem; padding-right: 1.15rem }
	.hero .logo { height: 38px }
	main { padding-left: 1.15rem; padding-right: 1.15rem }

	/* Stack the readout so a long URL never squeezes the button. */
	.url-box {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		width: 100%;
		padding: 0.9rem;
		text-align: center;
	}
	.url-box code { text-align: center }
	.copy-btn { width: 100% }

	.tabs [role="tab"] { padding: 0.75rem 0.7rem; font-size: 0.92rem }

	/* Keeps the connector URL on one line inside a step instead of breaking
	   a character or two onto a line of their own. */
	[role="tabpanel"] code { font-size: 0.8em }

	footer { gap: 0.4rem 1.5rem; flex-direction: column }
}

/* Wide desktop: give the mark room to match the display type. */
@media (min-width: 1100px) {
	.hero .logo { height: 54px }
}