/* =========================================================================
   netex · pages/performance.css · /marketing/performance/ (bible §7.15, copy 08 performance)
   s1 Paper · s2 Ink (leak finder, engines/leak-finder.css) · s3 Paper · s4 Paper-2 · s5 Ink ·
   s6 Paper (the page's one dot-matrix readout) · s7 Paper-2 · s8 Paper · s9 Indigo.
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- s1 hero: the ad lands, the page cracks, a thin Molten line runs out ------------------------ */
.pf-hero__grid { row-gap: var(--s-7); align-items: center; }
.pf-hero__text { display: grid; gap: var(--s-4); align-content: start; }
.pf-hero__text .nx-crumbs, .pf-hero__text .nx-eyebrow { margin-bottom: 0; }
.pf-title { font-size: clamp(2.125rem, 1rem + 3.6vw, 4.5rem); max-width: 17ch; }
.pf-title .nx-h1-sub { margin-top: var(--s-3); }
.pf-hero__art { margin: 0; max-width: 34rem; justify-self: center; width: 100%; }
@media (min-width: 1024px) {
	.pf-hero__text { grid-column: 1 / span 7; }
	.pf-hero__art { grid-column: 8 / -1; }
}
.mk-art--perf .ph-ad { transform-box: view-box; animation: pf-land var(--dur-ink) var(--ease-ink) 200ms both; }
.mk-art--perf .ph-crack path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pf-draw 520ms var(--ease-mech) 760ms forwards; }
.mk-art--perf .ph-leak path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pf-draw 900ms var(--ease-ink) 1180ms forwards; }
@keyframes pf-land { from { transform: translate(-120px, -26px); opacity: 0; } 70% { transform: translate(6px, 0); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes pf-draw { to { stroke-dashoffset: 0; } }
html.rm .mk-art--perf :is(.ph-ad, .ph-crack path, .ph-leak path), html:not(.js) .mk-art--perf :is(.ph-ad, .ph-crack path, .ph-leak path) { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }

/* ---- s3 system: exploded assembly + the six parts; hovering a part lights its plate ------------------- */
.pf-sys { display: grid; gap: var(--s-7) var(--gutter); align-items: start; }
.pf-sys__fig { margin: 0; max-width: 34rem; width: 100%; }
.mk-art--system .ps-axis, .mk-art--system .ps-ticks { stroke: var(--fg-2); }
.mk-art--system .ps-ticks { stroke-width: 1; }
@media (max-width: 639px) { .mk-art--system .mk-art__txt { font-size: 17px; } }
.mk-art--system .ps-plate { fill: var(--bg); transition: fill var(--dur-ui) var(--ease-mech), stroke var(--dur-ui) var(--ease-mech); }
.pf-sys__list { display: grid; margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
/* Each row carries the same mark as its plate in the drawing (no 01–06 numbering). */
.pf-part { position: relative; display: grid; gap: var(--s-1); padding: var(--s-4) 0 var(--s-4) 3.75rem; border-top: var(--bw) solid var(--rule); outline-offset: 2px; }
.pf-part__mark { position: absolute; left: 0; top: calc(var(--s-4) + 1px); width: 2.5rem; height: 1.95rem; color: var(--fg); }
.pf-part__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pf-part__mark .mk-sig { stroke: var(--sig); }
.pf-part__title { font-size: var(--t-h4); font-weight: var(--w-h3); line-height: 1.25; }
.pf-part p { max-width: 56ch; }
.pf-part__m { font: 500 .75rem/1.45 var(--f-mono); color: var(--sig); }
.pf-part::after { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--fg); transition: width var(--dur-ui) var(--ease-mech); }
.pf-part:is(:hover, :focus-visible)::after { width: 100%; }
.pf-sys:has(.pf-part[data-part="0"]:is(:hover, :focus-visible)) .ps-0 .ps-plate,
.pf-sys:has(.pf-part[data-part="1"]:is(:hover, :focus-visible)) .ps-1 .ps-plate,
.pf-sys:has(.pf-part[data-part="2"]:is(:hover, :focus-visible)) .ps-2 .ps-plate,
.pf-sys:has(.pf-part[data-part="3"]:is(:hover, :focus-visible)) .ps-3 .ps-plate,
.pf-sys:has(.pf-part[data-part="4"]:is(:hover, :focus-visible)) .ps-4 .ps-plate,
.pf-sys:has(.pf-part[data-part="5"]:is(:hover, :focus-visible)) .ps-5 .ps-plate { fill: var(--bg-2); stroke: var(--sig); }
@media (min-width: 1024px) {
	.pf-sys { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.pf-sys__fig { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.pf-sys__list { grid-column: 7 / -1; }
}

/* ---- s4 messaging: two phone outlines, generic bubbles, the 72-hour clock ------------------------------- */
.pf-msg__grid { row-gap: var(--s-7); align-items: start; }
.pf-msg__p { margin-top: var(--s-5); max-width: 56ch; }
.pf-msg__bridge { margin-top: var(--s-6); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); max-width: 56ch; }
.pf-msg__bridge .nx-link { display: inline-block; margin-top: var(--s-1); }
.pf-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.pf-phones__label { grid-column: 1 / -1; margin: 0; }
.pf-phone { display: grid; gap: var(--s-3); align-content: start; min-height: 22rem; padding: var(--s-6) var(--s-3) var(--s-5); border: var(--bw-2) solid var(--fg); border-radius: 22px; background: var(--paper); position: relative; }
.pf-phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 44px; height: 4px; margin-left: -22px; background: var(--fg); border-radius: 2px; }
.pf-phone__tag { margin: 0 0 var(--s-2); font: 600 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.pf-bubble { margin: 0; max-width: 88%; padding: var(--s-2) var(--s-3); font: 400 .875rem/1.45 var(--f-sans); border: var(--bw) solid var(--rule); }
.pf-bubble--in { justify-self: start; background: var(--paper-2); }
.pf-bubble--out { justify-self: end; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pf-clock { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-2) 0 0; font: 600 .75rem/1.3 var(--f-mono); color: var(--fg); }
.pf-clock__dial { position: relative; width: 22px; height: 22px; flex: none; border: var(--bw-2) solid var(--sig); border-radius: 50%; }
/* The hand rests at «a few hours in»; where scroll-driven animation exists, scrolling the phones into view
   winds it there (user-driven, no autonomous loop). */
.pf-clock__dial::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 8px; margin-left: -1px; background: var(--sig); transform-origin: 50% 100%; transform: rotate(140deg); }
@supports (animation-timeline: view()) {
	.pf-clock__dial::after { animation: pf-tick steps(12) both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
}
@keyframes pf-tick { from { transform: rotate(0deg); } to { transform: rotate(140deg); } }
html.rm .pf-clock__dial::after { animation: none; transform: rotate(140deg); }
@media (max-width: 479px) { .pf-phones { grid-template-columns: minmax(0, 1fr); } .pf-phone { min-height: 0; } }
@media (min-width: 1024px) {
	.pf-msg__text { grid-column: 1 / span 6; }
	.pf-phones { grid-column: 8 / -1; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
}

/* ---- s5 tests: the lab notebook (Literata on ruled lines) --------------------------------------------- */
.pf-tests__grid { row-gap: var(--s-7); align-items: start; }
.pf-log { --line: 2.1rem; }
.pf-log__lines { margin: 0; padding: 0; list-style: none; counter-reset: pl; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line)); }
.pf-log__lines li { position: relative; font: 400 1.0625rem/var(--line) var(--f-serif); color: var(--fg); }
/* The field of each entry, as a notebook's printed column label. Line-height 1: a mono inline box with the
   full --line would sit on a different baseline and stretch the first line of every entry off the rules. */
.pf-log__k { margin-right: .35em; font: 600 .6875rem/1 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
@media (min-width: 1024px) {
	.pf-tests__text { grid-column: 1 / span 5; }
	.pf-log { grid-column: 7 / -1; }
}

/* ---- s6 reporting: five numbers in dot-matrix (the page's one readout) ---------------------------------- */
.pf-report__grid { row-gap: var(--s-7); align-items: start; }
.pf-report__items { margin-top: var(--s-6); }
.pf-sheet__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin: 0; }
.pf-sheet__nums > div { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: var(--bw) solid var(--rule); }
.pf-sheet__nums > div:last-child { grid-column: 1 / -1; }
.pf-sheet__nums dt { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.pf-sheet__nums dd { margin: 0; font-family: var(--f-dot); font-weight: 500; font-variation-settings: "ELSH" 2; font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); line-height: .95; letter-spacing: .02em; color: var(--fg); }
/* «Three decisions»: what changed, what we learned, what's next, written on the sheet's ruled lines. */
.pf-sheet__decisions { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.pf-sheet__decisions li { display: grid; gap: 2px; }
.pf-sheet__decisions span { font: 600 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg); }
.pf-sheet__decisions p { --line: 1.6rem; margin: 0; font: 400 .9375rem/var(--line) var(--f-serif); color: var(--fg); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px), var(--rule) var(--line)); }
@media (min-width: 640px) { .pf-sheet__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pf-sheet__nums > div:last-child { grid-column: auto; } }
@media (min-width: 1024px) {
	.pf-report__text { grid-column: 1 / span 6; }
	.pf-sheet { grid-column: 8 / -1; }
}

/* ---- s7 what we don't do: three single-stroke strike-throughs ------------------------------------------- */
.pf-not { row-gap: var(--s-5); align-items: start; }
.pf-not__title { margin: 0; max-width: none; }
.pf-not__list { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.pf-not__list s { position: relative; display: inline; text-decoration: none; font: var(--w-h3) var(--t-h4)/1.35 var(--f-sans); color: var(--fg-2); background: linear-gradient(var(--fg), var(--fg)) no-repeat 0 58% / 100% 2px; }
.pf-not__closer { max-width: 52ch; color: var(--fg); }
@media (min-width: 1024px) {
	.pf-not__title { grid-column: 1 / span 3; }
	.pf-not__list { grid-column: 4 / span 9; }
	.pf-not__closer { grid-column: 4 / span 8; }
}

/* ---- s8 FAQ ------------------------------------------------------------------------------------------------ */
.pf-faq { row-gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) {
	.pf-faq__title { grid-column: 1 / span 4; }
	.pf-faq__list { grid-column: 5 / -1; }
}

/* ---- s9 teardown booking ---------------------------------------------------------------------------------- */
.pf-cta__grid { row-gap: var(--s-7); align-items: start; }
.pf-cta__cross { margin-top: var(--s-6); }
.pf-chip { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border: var(--bw) solid var(--fg); font: 500 .8125rem/1.35 var(--f-mono); color: var(--fg); }
.pf-chip::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--molten); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.pf-chip[hidden] { display: none; }
.pf-form__grid { display: grid; gap: var(--s-4) var(--gutter); }
@media (min-width: 768px) { .pf-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.pf-cta__text { grid-column: 1 / span 5; }
	.pf-cta__form { grid-column: 7 / -1; }
}

} /* end @layer pages */