/* Testing & Inspection: the approved Supreme People Progress system. */
.ti-page main{font-size:var(--pp-type-body)}
.ti-page main h1{font:800 var(--pp-type-hero)/1.04 Manrope,sans-serif;letter-spacing:-.04em;text-wrap:balance;max-width:14ch}
.ti-page main h2{font-size:var(--pp-type-section);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.ti-page main h3{font-size:var(--pp-type-row);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.ti-page main p{line-height:1.6;max-width:68ch;color:var(--pp-muted)}
.ti-page main section[id]{scroll-margin-top:32px}
.ti-hero{padding:40px 0 0;background:var(--pp-surface)}
.ti-hero-media{margin-top:clamp(40px,5vw,72px)}
.ti-hero-media>img{width:100%;height:clamp(320px,38vw,600px);object-fit:cover;object-position:50% 55%}
.ti-hero .pp-breadcrumb{margin-bottom:48px}
.ti-hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(48px,8vw,144px);align-items:start}
.ti-hero-copy{padding-top:6px}
.ti-hero-copy p{font-size:var(--pp-type-intro);max-width:42ch}
.ti-shortcuts{display:flex;gap:24px 32px;flex-wrap:wrap;margin-top:32px}
.ti-shortcuts .pp-text-link{font-size:var(--pp-type-ui);min-height:44px}
.ti-section{padding-block:var(--pp-section-space)}
.ti-tests{border-top:1px solid var(--pp-line)}
.ti-section-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,8vw,144px);align-items:end;margin-bottom:52px}
.ti-section-heading h2{max-width:16ch}
.ti-section-heading>p{font-size:var(--pp-type-intro);max-width:42ch}
.ti-test-list{border-bottom:1px solid var(--pp-line)}
.ti-test{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,8vw,144px);padding-block:36px;border-top:1px solid var(--pp-line);align-items:start}
.ti-test h3{color:var(--pp-ink)}
.ti-markings{background:var(--pp-surface-product)}
.ti-marking-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.ti-marking-gallery figure{min-width:0}
.ti-marking-image{display:flex;align-items:center;justify-content:center;min-height:223px;background:var(--pp-surface);padding:24px}
.ti-marking-image img{width:auto;max-width:100%;height:auto;object-fit:contain}
.ti-marking-gallery figcaption{padding-top:20px;font:700 var(--pp-type-body)/1.3 Manrope,sans-serif;letter-spacing:-.02em}
.ti-help{background:var(--pp-red);color:white}
.ti-help .pp-shell{display:flex;justify-content:space-between;align-items:center;gap:48px}
.ti-help h2{max-width:22ch}
.ti-page .ti-help p{color:#fff;margin-top:24px;font-size:var(--pp-type-intro)}
.ti-help .ti-contact{flex:none;background:#fff;color:var(--pp-red);font-size:var(--pp-type-ui)}
.ti-help .ti-contact:hover{background:var(--pp-ink);color:#fff}
.ti-help a:focus-visible{outline-color:#fff}
@media(min-width:1600px){.ti-test p{max-width:60ch}.ti-marking-image{min-height:255px}}
@media(max-width:900px){
  .ti-hero-grid,.ti-section-heading{grid-template-columns:1fr;gap:28px}
  .ti-page main h1{max-width:17ch}
  .ti-hero-copy p,.ti-section-heading>p{max-width:58ch}
  .ti-test{grid-template-columns:.8fr 1.2fr;gap:32px}
  .ti-marking-gallery{gap:20px}
  .ti-marking-image{padding:12px;min-height:180px}
  .ti-help .pp-shell{align-items:flex-start;flex-direction:column;gap:32px}
}
@media(max-width:600px){
  .ti-hero-media>img{height:300px;object-position:65% 55%}
  .ti-hero{padding-top:24px}
  .ti-hero .pp-breadcrumb{margin-bottom:32px}
  .ti-page main h1{font-size:var(--pp-type-hero-mobile);max-width:16ch}
  .ti-page main h2{font-size:clamp(36px,9vw,48px)}
  .ti-shortcuts{gap:18px;margin-top:22px;align-items:flex-start;flex-direction:column}
  .ti-section-heading{margin-bottom:32px;gap:22px}
  .ti-test{grid-template-columns:1fr;gap:16px;padding-block:28px}
  .ti-marking-gallery{grid-template-columns:1fr;gap:36px}
  .ti-marking-image{min-height:223px;padding:24px}
  .ti-marking-gallery figcaption{padding-top:16px}
}
@media(max-width:360px){
  .ti-page .pp-header-row{gap:12px}
  .ti-page .pp-header .pp-logo{width:160px}
}

/* User-selected complete marking guide. */
.ti-marking-guide{margin:0;min-width:0}
.ti-marking-guide>a{display:block;border-radius:12px;overflow:hidden}
.ti-marking-guide img{display:block;width:100%;height:auto}
.ti-marking-guide figcaption{display:flex;justify-content:flex-start;padding-top:20px}
.ti-marking-guide>a:focus-visible{outline:3px solid var(--pp-red);outline-offset:4px}
