/* Security (S18) and its quote form (S31): hero note, three path cards, the light "What you receive" scene with a
   drawn report, the limits plate, and the path cards and authorisation box of the form.
   Builds on ui-services-page.css (kinds, fsteps, fq, others) and ui-request.css (the form plate). */

.shero-note {
	margin: 0;
	color: var(--fg2);
}

/* three ways to work: each card is one link (the title link covers the card) */
.spaths-s,
.srec,
.slim {
	padding-block: var(--sec);
}

.spaths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-16);
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
}

.spaths li {
	display: grid;
}

.spath {
	block-size: 100%;
}

.spath-b {
	display: grid;
	flex: 1;
	align-content: start;
	gap: var(--sp-16);
	padding: clamp(var(--sp-16), 2.2vw, var(--sp-32));
}

.spath h3 {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.spath h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.spath dl {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
}

.spath dt {
	margin-block-start: var(--sp-8);
	color: var(--gold-300);
	font-size: var(--fs-s);
}

.spath dd {
	margin: 0;
	color: var(--gray-100);
	font-size: 15px;
}

.spath-go {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	margin-block-start: var(--sp-8);
	color: var(--gold-300);
}

.spath-go .arr {
	inline-size: 18px;
	block-size: 18px;
	transition: transform var(--d-base) var(--ease);
}

.spath:hover .spath-go .arr,
.spath:focus-within .spath-go .arr {
	transform: translateX(4px);
}

html[dir="rtl"] .spath-go .arr {
	transform: scaleX(-1);
}

html[dir="rtl"] .spath:hover .spath-go .arr,
html[dir="rtl"] .spath:focus-within .spath-go .arr {
	transform: scaleX(-1) translateX(4px);
}

/* what you receive: light scene, list on one side and a drawn report on the other */
.srec-g {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--margin);
	align-items: center;
}

.srec-l {
	display: grid;
	margin: clamp(32px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--hairline) solid var(--ln-s);
}

.srec-l li {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: var(--sp-12);
	row-gap: var(--sp-4);
	padding-block: clamp(16px, 1.8vw, 26px);
	border-block-end: var(--hairline) solid var(--ln-s);
}

.srec-l i {
	grid-row: span 2;
	color: var(--hi);
	font-style: normal;
}

.srec-l h3 {
	font-size: clamp(20px, 1.9vw, 30px);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.srec-l h3 strong {
	font-weight: 800;
}

.srec-l p {
	max-inline-size: 44ch;
	color: var(--fg2);
	font-size: 15px;
}

.srec-art {
	display: grid;
	gap: var(--sp-12);
	justify-items: center;
	margin: 0;
}

.srec-art figcaption {
	color: var(--fg2);
	font-size: var(--fs-s);
	text-align: center;
}

.rsheet {
	inline-size: min(100%, 300px);
	block-size: auto;
	direction: ltr;
	fill: none;
	stroke: var(--fg2);
	stroke-width: 1.4;
}

.rsheet .rs-page {
	fill: var(--bg);
	stroke: var(--fg);
}

.rsheet .rs-bar {
	fill: var(--hi);
	stroke: none;
}

.rsheet .rs-ln,
.rsheet .rs-box,
.rsheet .rs-fold {
	stroke: var(--ln-ctl);
}

.rsheet .rs-ck {
	stroke: var(--hi);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.rsheet text {
	fill: var(--fg2);
	stroke: none;
	font: 500 11px var(--font-mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* trust and limits: one plate with three statements */
.slim-p {
	margin-block-start: clamp(32px, 5vw, 64px);
}

.slim-l {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.slim-l li {
	display: grid;
	align-content: start;
	gap: var(--sp-12);
	padding: clamp(var(--sp-16), 2.2vw, var(--sp-32));
	border-inline-start: var(--hairline) solid var(--ln);
}

.slim-l li:first-child {
	border-inline-start: 0;
}

.slim-l h3 {
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 1.15;
}

.slim-l h3 strong {
	font-weight: 800;
}

.slim-l p {
	color: var(--gray-100);
	font-size: 15px;
}

/* quote form: the three path cards show who each is for, a note follows the choice */
.rq-paths {
	grid-template-columns: 1fr;
}

.rq-paths .ck-card small {
	display: block;
	margin-block-start: var(--sp-4);
	color: var(--fg2);
	font-size: var(--fs-s);
}

.rq-note {
	min-block-size: 1.5em;
	margin: var(--sp-12) 0 0;
	padding-inline-start: var(--sp-12);
	border-inline-start: var(--hairline) solid var(--hi);
	color: var(--fg2);
	font-size: var(--fs-s);
}

.rq-note:empty {
	display: none;
}

.rq-authz {
	display: grid;
	gap: var(--sp-8);
}

.rq-authz-h {
	margin: 0;
	color: var(--gold-300);
}

@media (min-width: 700px) {
	.rq-paths {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1000px) {
	.spaths {
		grid-template-columns: 1fr;
	}

	.srec-g {
		grid-template-columns: 1fr;
	}

	.slim-l {
		grid-template-columns: 1fr;
	}

	.slim-l li {
		border-inline-start: 0;
		border-block-start: var(--hairline) solid var(--ln);
	}

	.slim-l li:first-child {
		border-block-start: 0;
	}
}

html.rm .spath-go .arr {
	transition: none;
}