/* =========================================================================
   Vindonissa docs — homepage-specific styles
   Layered on top of /assets/styles.css. Uses the same tokens.
   ========================================================================= */

/* --- Home hero ----------------------------------------------------------- */

.home {
	max-width: 80rem;
	margin: 0 auto;
	padding: 0 1rem;
}
@media (min-width: 640px) { .home { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .home { padding: 0 2rem; } }

.home-hero {
	padding: 4rem 0 5rem;
	border-bottom: 1px solid var(--gray-200);
	position: relative;
}
@media (min-width: 768px) { .home-hero { padding: 6rem 0 7rem; } }
@media (min-width: 1024px) { .home-hero { padding: 7rem 0 8rem; } }

.home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: start;
}
@media (min-width: 1024px) {
	.home-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
		gap: 4rem;
	}
}

.home-hero__copy { position: relative; }

.home-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand-gray);
	margin-bottom: 2rem;
}
.home-meta__dot {
	width: 6px;
	height: 6px;
	background: var(--brand-red);
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: 0 0 0 3px rgba(255, 87, 90, 0.15);
}
.home-meta__sep {
	width: 1rem;
	height: 1px;
	background: var(--gray-300);
}

.home-hero__title {
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 0.98;
	color: var(--brand-black);
	margin-bottom: 1.75rem;
}
.home-hero__title .accent { color: var(--brand-red); }
.home-hero__title .em { font-style: italic; font-weight: 500; letter-spacing: -0.04em; }

.home-hero__lede {
	font-size: 1.125rem;
	color: var(--brand-gray);
	line-height: 1.6;
	max-width: 32rem;
	margin-bottom: 2.5rem;
}
@media (min-width: 768px) { .home-hero__lede { font-size: 1.25rem; } }
.home-hero__lede strong { color: var(--brand-black); font-weight: 600; }

.home-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.125rem;
	border-radius: 0.5rem;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
	border: 1px solid transparent;
	white-space: nowrap;
}
.btn--primary {
	background: var(--brand-black);
	color: white;
}
.btn--primary:hover { background: var(--brand-red); }
.btn--ghost {
	color: var(--brand-black);
	border-color: var(--gray-200);
	background: white;
}
.btn--ghost:hover { border-color: var(--brand-black); }
.btn__arrow { transition: transform 0.2s; }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* --- Hero visual: document → JSON transformation ------------------------- */

.home-visual {
	position: relative;
	min-height: 26rem;
}
@media (min-width: 1024px) { .home-visual { min-height: 32rem; } }

.home-visual__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-width: 40rem;
	margin-left: auto;
	background: var(--brand-light);
	border: 1px solid var(--gray-200);
	border-radius: 1rem;
	overflow: hidden;
}
@media (min-width: 1024px) { .home-visual__frame { aspect-ratio: 1 / 1; } }

/* Subtle grid in the frame */
.home-visual__grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(12,12,12,0.035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(12,12,12,0.035) 1px, transparent 1px);
	background-size: 2rem 2rem;
	background-position: -1px -1px;
	pointer-events: none;
}

/* Corner marks */
.home-visual__corner {
	position: absolute;
	width: 14px; height: 14px;
	border-color: var(--brand-red);
	border-style: solid;
	border-width: 0;
}
.home-visual__corner--tl { top: 14px; left: 14px; border-top-width: 1.5px; border-left-width: 1.5px; }
.home-visual__corner--tr { top: 14px; right: 14px; border-top-width: 1.5px; border-right-width: 1.5px; }
.home-visual__corner--bl { bottom: 14px; left: 14px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.home-visual__corner--br { bottom: 14px; right: 14px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

.home-visual__label {
	position: absolute;
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-gray);
}
.home-visual__label--tl { top: 18px; left: 36px; }
.home-visual__label--br { bottom: 18px; right: 36px; }

/* Stage: doc card (left) → arrow → json card (right) */
.home-visual__stage {
	position: absolute;
	inset: 3.5rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
}
@media (min-width: 640px) {
	.home-visual__stage { inset: 3.5rem 2rem; gap: 1rem; }
}

.doc-card {
	background: white;
	border: 1px solid var(--gray-200);
	border-radius: 0.625rem;
	padding: 0.875rem 0.875rem 0.875rem;
	box-shadow: 0 20px 40px -20px rgba(12,12,12,0.15), 0 2px 6px rgba(12,12,12,0.04);
	position: relative;
	transform: rotate(-1.25deg);
	aspect-ratio: 0.77 / 1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	overflow: hidden;
}
.doc-card::before {
	content: "";
	position: absolute;
	top: 0; right: 0;
	width: 22px; height: 22px;
	background: linear-gradient(225deg, var(--gray-100) 50%, transparent 50%);
	border-bottom-left-radius: 4px;
}
.doc-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--gray-100);
}
.doc-card__title {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--brand-black);
	text-transform: uppercase;
}
.doc-card__num {
	font-family: var(--font-mono);
	font-size: 8px;
	color: var(--brand-gray);
}
.doc-card__row {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 8px;
}
.doc-card__row-label {
	flex-shrink: 0;
	color: var(--brand-gray);
	font-family: var(--font-mono);
	font-size: 7px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	width: 3rem;
}
.doc-card__row-line {
	flex: 1;
	height: 4px;
	background: var(--gray-100);
	border-radius: 2px;
}
.doc-card__row-line--strong { background: var(--gray-200); }
.doc-card__row-line--short { width: 60%; flex: none; }
.doc-card__row-line--shorter { width: 40%; flex: none; }
.doc-card__row--highlight .doc-card__row-line { background: rgba(255,87,90,0.25); }
.doc-card__row--highlight .doc-card__row-label { color: var(--brand-red); }

.doc-card__grid {
	margin-top: auto;
	padding-top: 0.4rem;
	border-top: 1px dashed var(--gray-200);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4px;
}
.doc-card__cell {
	height: 12px;
	background: var(--gray-100);
	border-radius: 2px;
}
.doc-card__cell--accent { background: rgba(255,87,90,0.2); }
.doc-card__total {
	margin-top: 0.4rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-mono);
	font-size: 9px;
}
.doc-card__total-label { color: var(--brand-gray); }
.doc-card__total-val { font-weight: 700; color: var(--brand-black); }

/* Arrow column */
.home-visual__arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: var(--brand-red);
}
.home-visual__arrow-line {
	width: 1.5rem;
	height: 1px;
	background: var(--brand-red);
	position: relative;
}
.home-visual__arrow-line::after {
	content: "";
	position: absolute;
	right: -1px; top: 50%;
	width: 6px; height: 6px;
	border-top: 1px solid var(--brand-red);
	border-right: 1px solid var(--brand-red);
	transform: translateY(-50%) rotate(45deg);
}
.home-visual__arrow-label {
	font-family: var(--font-mono);
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-red);
	text-align: center;
	line-height: 1.4;
	white-space: nowrap;
}

/* JSON card */
.json-card {
	background: var(--brand-black);
	color: #E1E4E8;
	border-radius: 0.625rem;
	padding: 0.875rem 1rem;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.65;
	box-shadow: 0 24px 50px -20px rgba(12,12,12,0.4), 0 2px 6px rgba(12,12,12,0.1);
	transform: rotate(1.5deg);
	aspect-ratio: 0.77 / 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	overflow: hidden;
	position: relative;
}
.json-card__bar {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding-bottom: 0.4rem;
	margin-bottom: 0.125rem;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(225,228,232,0.45);
}
.json-card__bar-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--brand-red);
	box-shadow: 0 0 0 2px rgba(255,87,90,0.2);
}
.json-card__line { white-space: nowrap; }
.json-card__line .k { color: #79B8FF; }
.json-card__line .s { color: #9ECBFF; }
.json-card__line .n { color: #F97583; }
.json-card__line .p { color: #E1E4E8; }
.json-card__line .b { color: #B392F0; }

/* Pulse ring on the JSON card (success marker) */
.json-card__stamp {
	position: absolute;
	bottom: 10px; right: 10px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border: 1px solid rgba(255,87,90,0.5);
	border-radius: 50%;
	font-size: 8px;
	font-weight: 600;
	color: var(--brand-red);
	letter-spacing: 0;
	background: rgba(12,12,12,0.6);
}

/* Under-the-frame micro callout strip */
.home-visual__callout {
	position: absolute;
	left: 0; right: 0;
	bottom: -3rem;
	display: none;
	justify-content: space-between;
	align-items: center;
	padding: 0 1.5rem;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brand-gray);
}
@media (min-width: 1024px) { .home-visual__callout { display: flex; } }
.home-visual__callout span { white-space: nowrap; }

/* --- Hairline precision bar --------------------------------------------- */

.home-measure {
	max-width: 80rem;
	margin: 0 auto;
	padding: 2rem 1rem;
	border-bottom: 1px solid var(--gray-200);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem 1rem;
}
@media (min-width: 640px) { .home-measure { padding: 2.5rem 1.5rem; } }
@media (min-width: 768px) { .home-measure { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .home-measure { padding: 2.5rem 2rem; } }

.measure {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	position: relative;
	padding-left: 1rem;
	border-left: 1px solid var(--gray-200);
}
.measure::before {
	content: "";
	position: absolute;
	left: -1px; top: 0;
	height: 12px;
	width: 2px;
	background: var(--brand-red);
}
.measure__label {
	font-family: var(--font-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-gray);
}
.measure__value {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--brand-black);
	line-height: 1.1;
}
@media (min-width: 768px) { .measure__value { font-size: 1.75rem; } }
.measure__value em {
	font-style: normal;
	color: var(--brand-red);
}
.measure__note {
	font-size: 12px;
	color: var(--brand-gray);
	line-height: 1.5;
}

/* --- Section header pattern ---------------------------------------------- */

.home-section {
	max-width: 80rem;
	margin: 0 auto;
	padding: 5rem 1rem;
}
@media (min-width: 640px) { .home-section { padding: 6rem 1.5rem; } }
@media (min-width: 1024px) { .home-section { padding: 7rem 2rem; } }

.home-section + .home-section { border-top: 1px solid var(--gray-200); }

.home-section__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.home-section__head {
		grid-template-columns: 11rem 1fr;
		gap: 3rem;
		margin-bottom: 4rem;
	}
}

.home-section__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-red);
	padding-top: 0.5rem;
	white-space: nowrap;
}
.home-section__title {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--brand-black);
	max-width: 32rem;
}
.home-section__title .accent { color: var(--brand-red); }

/* --- Three pillars ------------------------------------------------------- */

.pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--gray-200);
}
@media (min-width: 900px) {
	.pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar {
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--gray-200);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
}
@media (min-width: 900px) {
	.pillar {
		padding: 2.5rem 2rem;
		border-bottom: 0;
		border-right: 1px solid var(--gray-200);
	}
	.pillar:first-child { padding-left: 0; }
	.pillar:last-child { padding-right: 0; border-right: 0; }
}

.pillar__num {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--brand-red);
	letter-spacing: 0.1em;
}

.pillar__title {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--brand-black);
}
@media (min-width: 1024px) { .pillar__title { font-size: 1.75rem; } }

.pillar__body {
	font-size: 15px;
	color: var(--brand-gray);
	line-height: 1.65;
}
.pillar__body strong { color: var(--brand-black); font-weight: 600; }

.pillar__demo {
	margin-top: 0.75rem;
	padding: 0.875rem 1rem;
	background: var(--brand-light);
	border: 1px solid var(--gray-200);
	border-radius: 0.5rem;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--brand-gray);
	line-height: 1.65;
}
.pillar__demo em { font-style: normal; color: var(--brand-red); }
.pillar__demo strong { color: var(--brand-black); font-weight: 600; }

.pillar__demo-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}
.pillar__demo-row + .pillar__demo-row {
	margin-top: 0.375rem;
	padding-top: 0.375rem;
	border-top: 1px dashed var(--gray-200);
}

.pillar__demo-bar {
	flex: 1;
	height: 4px;
	background: var(--gray-200);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	max-width: 8rem;
}
.pillar__demo-bar > i {
	display: block; height: 100%;
	background: var(--brand-red);
}

/* --- Pillar 01 — abstract routing/evaluation diagram -------------------- */

.pillar__demo--flow {
	padding: 1rem;
}

.flow {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	height: 100%;
}

.flow__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}
.flow__col--candidates { gap: 4px; }

.flow__node {
	display: block;
	width: 28px;
	height: 10px;
	border: 1px solid var(--gray-300);
	border-radius: 2px;
	background: white;
}
.flow__node--in,
.flow__node--out {
	width: 34px;
	height: 14px;
	border-color: var(--brand-black);
}
.flow__node--active {
	border-color: var(--brand-red);
	background: rgba(255, 87, 90, 0.12);
	box-shadow: 0 0 0 2px rgba(255, 87, 90, 0.15);
}

.flow__rail {
	height: 1px;
	border-top: 1px dashed var(--gray-300);
	width: 100%;
	min-width: 1.25rem;
}

/* --- Pipeline (how it works) strip -------------------------------------- */

.pipeline {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-top: 1px solid var(--gray-200);
}
@media (min-width: 768px) {
	.pipeline { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
	.pipeline { grid-template-columns: repeat(6, 1fr); }
}

.pipeline__stage {
	padding: 1.75rem 0 1.75rem 0;
	border-bottom: 1px solid var(--gray-200);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}
@media (min-width: 768px) {
	.pipeline__stage {
		padding: 2rem 1.5rem;
		border-bottom: 1px solid var(--gray-200);
		border-right: 1px solid var(--gray-200);
	}
	.pipeline__stage:nth-child(3n) { border-right: 0; }
	.pipeline__stage:nth-last-child(-n+3) { border-bottom: 0; }
	.pipeline__stage:first-child { padding-left: 0; }
	.pipeline__stage:nth-child(3n+1) { padding-left: 0; }
	.pipeline__stage:nth-child(3n) { padding-right: 0; }
}
@media (min-width: 1100px) {
	.pipeline__stage {
		padding: 2rem 1.25rem;
		border-bottom: 0;
		border-right: 1px solid var(--gray-200);
	}
	.pipeline__stage:last-child { border-right: 0; padding-right: 0; }
	.pipeline__stage:first-child { padding-left: 0; }
	.pipeline__stage:nth-child(3n) { padding-right: 1.25rem; border-right: 1px solid var(--gray-200); }
	.pipeline__stage:nth-child(3n+1) { padding-left: 1.25rem; }
	.pipeline__stage:nth-last-child(-n+3) { border-bottom: 0; }
}

.pipeline__num {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--brand-red);
	letter-spacing: 0.1em;
}
.pipeline__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--brand-black);
	letter-spacing: -0.01em;
}
.pipeline__text {
	font-size: 13px;
	color: var(--brand-gray);
	line-height: 1.6;
}
.pipeline__tag {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(109,109,109,0.7);
}

/* --- Companion (Divico) ------------------------------------------------- */

.home-companion {
	max-width: 80rem;
	margin: 0 auto;
	padding: 5rem 1rem 6rem;
	border-top: 1px solid var(--gray-200);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: end;
}
@media (min-width: 768px) {
	.home-companion {
		grid-template-columns: 1fr 1fr;
		padding: 6rem 1.5rem 7rem;
		gap: 5rem;
	}
}
@media (min-width: 1024px) { .home-companion { padding: 7rem 2rem 8rem; } }

.home-companion__left h2 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.02;
	color: var(--brand-black);
	margin-top: 0.75rem;
}
.home-companion__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-red);
}
.home-companion__tagline {
	margin-top: 1.25rem;
	font-size: 1.0625rem;
	color: var(--brand-gray);
	line-height: 1.6;
	max-width: 26rem;
}
.home-companion__tagline strong { color: var(--brand-black); font-weight: 600; }

.home-companion__right {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.home-companion__body {
	font-size: 15px;
	color: var(--brand-gray);
	line-height: 1.7;
}
.home-companion__body strong { color: var(--brand-black); font-weight: 600; }
.home-companion__meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(109,109,109,0.7);
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}
.home-companion__meta::before {
	content: "";
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--amber-400);
	flex-shrink: 0;
}