/* ============================================================================
   landing.css — the wide, centred layout: front pages and the two section
   overviews. Loaded after docs.css, never together with guide.css.
   Ported from the old inline stylesheets of index.html, partner/api/index.html
   and user/modules/aml/index.html, which were three drifting copies of it.
   ========================================================================= */

.hero{position:relative; padding:56px 0 8px; text-align:center; background:var(--hero-grad); overflow:hidden}
.hero-mark{position:absolute; top:-46px; right:-70px; width:330px; opacity:.05; pointer-events:none}
.eyebrow-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
	font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--brand-ink);
	border:1px solid var(--brand-line); background:var(--brand-soft); border-radius:999px;
	padding:6px 16px; margin:0 0 22px}
.hero h1{font-size:clamp(38px,6.4vw,66px); line-height:1.04; margin:0 auto 18px; max-width:16ch; font-weight:800}
.hero h1 .accent{color:var(--brand)}
.hero .lede{font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:60ch; margin:0 auto 28px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.published{margin:20px 0 0; font-size:13px; color:var(--muted); font-family:var(--font-mono)}
.published strong{color:var(--ink); font-weight:600}

/* --------------------------------------------------------- the two lanes */
.lanes{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:0; margin:52px 0 0; border-top:1px solid var(--line-soft)}
.lane{padding:44px 46px 40px}
.lane-lead{padding-left:0}
.lane-second{padding-right:0}
.kicker{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
	color:var(--brand); margin:0 0 10px; display:flex; align-items:center; gap:9px}
.kicker::before{content:""; width:22px; height:3px; border-radius:2px; background:var(--brand)}
.lane h2{font-size:clamp(21px,2.6vw,26px); line-height:1.2; margin:0 0 12px; font-weight:700}
.lane p{color:var(--muted); font-size:15px; margin:0 0 20px; max-width:44ch}

/* The rule between the lanes carries the Visena four-stroke mark. */
.rule{position:absolute; top:0; bottom:0; left:50%; width:1px; transform:translateX(-.5px);
	background:linear-gradient(180deg, var(--line-soft), var(--brand-line) 22%,
		var(--brand-line) 78%, var(--line-soft))}
.rule svg{position:absolute; top:50%; left:50%; width:46px; height:42px; transform:translate(-50%,-50%);
	background:var(--paper); padding:11px 9px}
@media (max-width:980px){
	.lanes{grid-template-columns:minmax(0,1fr)}
	.lane{padding:34px 0 30px}
	.lane-lead{border-bottom:1px solid var(--line-soft)}
	.rule{display:none}
}

.points{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px}
.points li{display:flex; gap:12px; font-size:14.5px; line-height:1.55}
.points .tick{flex:none; width:22px; height:22px; border-radius:50%; background:var(--brand-soft);
	border:1px solid var(--brand-line); color:var(--brand-ink); font-size:11px; font-weight:700;
	display:flex; align-items:center; justify-content:center; margin-top:2px}
.points strong{color:var(--ink)}
.points span.t{color:var(--muted)}

.golink{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600}
.golink + .golink{margin-left:20px}
.golink .arr{font-family:var(--font-mono); color:var(--brand)}

.standards{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.standard{border:1px solid var(--line); background:var(--panel); border-radius:999px;
	padding:6px 14px; font-size:12.5px; font-weight:600; color:var(--ink)}

/* ------------------------------------------------------- the page index */
.index{background:var(--tint); border-top:1px solid var(--line-soft);
	border-bottom:1px solid var(--line-soft); margin-top:56px; padding:52px 0 56px}
.index h2{font-size:clamp(20px,2.4vw,24px); margin:0 0 4px}
.index .sub{color:var(--muted); font-size:15px; margin:0 0 28px}
.index .kicker{margin:0 0 15px}
.index .cards + .kicker{margin-top:34px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.cards .card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px;
	padding:22px 22px 20px; box-shadow:var(--shadow); color:inherit;
	transition:transform .18s ease, border-color .18s ease}
.cards .card:hover{text-decoration:none; transform:translateY(-3px); border-color:var(--brand-line)}
.cards .card .tag{font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em;
	text-transform:uppercase; color:var(--brand-ink); background:var(--brand-soft);
	border:1px solid var(--brand-line); border-radius:999px; padding:3px 10px;
	display:inline-block; margin:0 0 13px}
.cards .card h3{font-size:16.5px; margin:0 0 7px}
.cards .card p{font-size:13.8px; color:var(--muted); margin:0 0 14px; line-height:1.55}
.cards .card .go{font-size:13px; font-weight:600; color:var(--brand-ink); font-family:var(--font-mono)}
@media (prefers-reduced-motion: reduce){
	.cards .card{transition:none}
	.cards .card:hover{transform:none}
}

.section-block{padding:52px 0 10px}
.section-block h2{font-size:clamp(20px,2.6vw,26px); margin:0 0 12px}
.section-block p{color:var(--muted); max-width:66ch; margin:0 0 16px}