/* =========================================================================
   netex · pages/trust.css · /ai/trust/ (design bible §7.6)
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 · hero --------------------------------------------------------------- */
.tr-hero { --hero-pad: var(--s-6); }
.tr-hero__grid { row-gap: var(--s-7); align-items: start; }
.tr-hero__display {
	margin: 0;
	font-size: var(--t-display);
	font-weight: var(--w-display);
	line-height: var(--lh-display);
	letter-spacing: var(--tr-display);
	color: var(--fg);
	max-width: 7.8em; /* ≈ 11.5ch of Commissioner 820, in em so the measure doesn't move while fonts load */
	text-wrap: balance;
}
.tr-hero__h1 { margin: var(--s-5) 0; max-width: 26.4em; font-size: var(--t-h4); font-weight: var(--w-ui); line-height: 1.3; letter-spacing: 0; color: var(--fg-2); }
@media (min-width: 1024px) {
	.tr-hero__text { grid-column: 1 / span 5; }
	.tr-five { grid-column: 7 / -1; }
}
.tr-hero__foot { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
.tr-hero__disclaimer { max-width: 64ch; font-size: var(--t-small); line-height: 1.5; color: var(--fg-2); }

/* ---- s2 · spec sheet ----------------------------------------------------------- */
.tr-spec { max-width: 1100px; }
.tr-spec__list { margin: 0; padding: 0; list-style: none; counter-reset: spec; }
.tr-spec__row { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-4) 0; border-top: var(--bw) solid var(--rule); counter-increment: spec; }
.tr-spec__row:first-child { border-top: 0; }
.tr-spec__text { position: relative; padding-left: 2.6em; font-size: 1.0625rem; line-height: 1.5; }
.tr-spec__text::before { content: counter(spec); position: absolute; left: 0; top: .15em; font: 500 .75rem/1.3 var(--f-mono); color: var(--fg-2); } /* clause numbers, never «01–06» (ban list) */
.tr-spec__basis { justify-self: start; padding: 2px 6px; border: var(--bw) solid var(--fg-3); font-size: .6875rem; letter-spacing: .04em; color: var(--fg-2); margin-left: 2.6rem; }
.tr-spec__row.is-law .tr-spec__basis { border-color: var(--fg); color: var(--fg); }
@media (min-width: 768px) {
	.tr-spec__row { grid-template-columns: minmax(0, 1fr) minmax(200px, 30%); align-items: baseline; }
	.tr-spec__basis { justify-self: end; margin-left: 0; }
}
.tr-users__own { margin-top: var(--s-7); max-width: 48ch; font-size: var(--t-lead); line-height: var(--lh-lead); }

/* ---- s3 · what we sign ------------------------------------------------------------ */
.tr-clients__grid { row-gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
	.tr-clients__main { grid-column: 1 / span 7; }
	.tr-clients__fig { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}
.tr-clients__fig { margin: 0; }
.tr-clients__media { clip-path: var(--clip-sheet); }
.tr-sign { margin: var(--s-6) 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
@media (min-width: 768px) { .tr-sign { columns: 2; column-gap: var(--gutter); } }
.tr-sign__row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); break-inside: avoid; font-size: .9375rem; line-height: 1.5; }
.tr-sign__tick { font: 700 1rem/1.4 var(--f-mono); color: var(--sig); }
.tr-clients__addon { padding: var(--s-4); background: var(--bg-2); font-size: .9375rem; line-height: 1.55; max-width: 72ch; }

/* ---- s4 · red lines ------------------------------------------------------------------ */
.tr-red__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
@media (min-width: 768px) { .tr-red__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
.tr-red__item { padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
.tr-red__item span { position: relative; display: inline-block; font: var(--w-h3) var(--t-h4)/1.35 var(--f-sans); }
.tr-red__item span::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.5px;
	height: calc((100% + 22px) / .731);
	background: var(--paper);
	transform: translate(-50%, -50%) rotate(43deg);
	pointer-events: none;
}
html.js:not(.rm) .tr-red__item span::after { transform: translate(-50%, -50%) rotate(43deg) scaleY(0); transition: transform 640ms var(--ease-cut); }
html.js:not(.rm) .tr-red__list.is-struck .tr-red__item span::after { transform: translate(-50%, -50%) rotate(43deg) scaleY(1); }
html.js:not(.rm) .tr-red__list.is-struck .tr-red__item:nth-child(2) span::after { transition-delay: 80ms; }
html.js:not(.rm) .tr-red__list.is-struck .tr-red__item:nth-child(3) span::after { transition-delay: 160ms; }
html.js:not(.rm) .tr-red__list.is-struck .tr-red__item:nth-child(4) span::after { transition-delay: 240ms; }
html.js:not(.rm) .tr-red__list.is-struck .tr-red__item:nth-child(5) span::after { transition-delay: 320ms; }
html.js:not(.rm) .tr-red__list.is-struck .tr-red__item:nth-child(6) span::after { transition-delay: 400ms; }
.tr-red__note { font-size: var(--t-small); line-height: 1.55; color: var(--fg-2); max-width: 46ch; }

/* ---- s5 · Greek law ---------------------------------------------------------------------- */
.tr-law__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.tr-law__item { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); font-size: 1rem; line-height: 1.55; }
.tr-law__item p { max-width: 70ch; }
.tr-law__item.is-key p:first-child { font: var(--w-h3) var(--t-h4)/1.35 var(--f-sans); max-width: 56ch; }
.tr-law__src { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: .75rem; }
@media (min-width: 1024px) {
	.tr-law__item { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
	.tr-law__item p:first-child { grid-column: 1 / span 9; }
	.tr-law__src { grid-column: 10 / -1; justify-content: flex-end; }
}

/* ---- s6 · timeline: one axis, a 47° tick per date ---------------------------------------- */
.tr-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.tr-date { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4) 0 var(--s-5) var(--s-7); border-top: var(--bw) solid var(--rule); }
.tr-date::before { content: ""; position: absolute; left: 14px; top: 18px; width: 1.5px; height: 30px; background: var(--paper); transform: rotate(43deg); }
.tr-date.is-coming::before { background: repeating-linear-gradient(180deg, var(--steel) 0 4px, transparent 4px 7px); }
.tr-date__when { font: 600 .9375rem/1.3 var(--f-mono); }
.tr-date__status { justify-self: start; padding: .25em .6em; font-size: .6875rem; border-color: var(--fg-3); color: var(--fg-2); }
.tr-date.is-live .tr-date__status { border-color: var(--cyan); color: var(--cyan); }
.tr-date.is-coming .tr-date__status { border-style: dashed; }
.tr-date__what { font-size: .9375rem; line-height: 1.5; color: var(--fg); max-width: 44ch; }
.tr-date.is-coming .tr-date__what { color: var(--fg-2); }
@media (min-width: 1024px) {
	.tr-timeline { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gutter); padding-top: 44px; }
	.tr-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 2px; background: var(--n-grad); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
	.tr-date { padding: var(--s-3) 0 0; border-top: 0; }
	.tr-date::before { left: 10px; top: -36px; height: 30px; }
	.tr-date__what { font-size: .875rem; }
}
.tr-dates__reviewed { margin-top: var(--s-7); }

/* ---- s7 · the 100-call grid (C-24) ---------------------------------------------------- */
.tr-test__grid { row-gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
	.tr-test__text { grid-column: 1 / span 6; }
	.tr-calls { grid-column: 8 / -1; }
}
.tr-test__text .nx-lead { margin-top: var(--s-5); }
.tr-test__metrics, .tr-test__rule, .tr-test__docs { margin-top: var(--s-4); max-width: 58ch; font-size: 1rem; line-height: 1.55; }
.tr-test__rule { font-weight: 600; }
.tr-test__docs { color: var(--fg-2); }
.tr-calls { margin: 0; display: grid; gap: var(--s-4); }
.tr-calls__svg { display: block; width: 100%; max-width: 440px; height: auto; }
/* six categories as alternating runs (paper-3 / paper), each run opened by its key number */
.tr-cell rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.tr-cell[data-cat="0"] rect, .tr-cell[data-cat="2"] rect, .tr-cell[data-cat="4"] rect { fill: var(--paper-3); }
.tr-cell path { fill: none; stroke: var(--steel-dark); stroke-width: 1.5; stroke-linejoin: round; }
.tr-cell text { fill: var(--ink); font: 600 15px/1 var(--f-mono); text-anchor: middle; dominant-baseline: central; }
/* focus: dim the children, not the group (the group's stamp-in animation holds its opacity) */
.tr-cell > * { transition: opacity var(--dur-ui) var(--ease-mech); }
.tr-calls.is-focus .tr-cell:not(.is-on) > * { opacity: .25; }
.tr-calls.is-focus .tr-cell.is-on rect { fill: var(--indigo); stroke: var(--indigo); }
.tr-calls.is-focus .tr-cell.is-on path { stroke: var(--paper); }
.tr-calls.is-focus .tr-cell.is-on text { fill: var(--paper); }
html.js:not(.rm) .tr-calls[data-callgrid]:not(.is-in) .tr-cell { opacity: 0; }
html.js:not(.rm) .tr-calls.is-in .tr-cell { animation: tr-cell-in var(--dur-stamp) var(--ease-stamp) both; animation-delay: calc(var(--r) * 70ms); }
@keyframes tr-cell-in { from { opacity: 0; } to { opacity: 1; } }
.tr-calls__legend { display: grid; gap: 0; margin: var(--s-2) 0 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.tr-calls__cat { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: center; width: 100%; min-height: 44px; padding: var(--s-2) 0; border-top: var(--bw) solid var(--rule); background: none; color: var(--fg); text-align: left; font-size: .9375rem; line-height: 1.4; cursor: pointer; }
/* the key: the same cell as in the figure, with its number */
.tr-calls__cat i { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 .75rem/1 var(--f-mono); font-style: normal; }
.tr-calls__cat[data-cat="0"] i, .tr-calls__cat[data-cat="2"] i, .tr-calls__cat[data-cat="4"] i { background: var(--paper-3); }
.tr-calls__cat[aria-pressed="true"] { font-weight: 600; }
.tr-calls__cat[aria-pressed="true"] i, .tr-calls__cat.is-lit i { background: var(--indigo); border-color: var(--indigo); color: var(--paper); }
@media (hover: hover) { .tr-calls__cat:hover span { text-decoration: underline; text-underline-offset: .2em; } }

/* ---- s9 · FAQ · s10 · CTA ----------------------------------------------------------------- */
.tr-faq .nx-grid { row-gap: var(--s-6); }
@media (min-width: 1024px) {
	.tr-faq__head { grid-column: 1 / span 5; }
	.tr-faq__list { grid-column: 7 / -1; }
}
.tr-cta__back { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font: 500 .8125rem/1.3 var(--f-mono); }
.tr-cta__back .nx-icon { width: 16px; height: 16px; }

} /* end @layer pages */