/* Practice PPE Exams case study: values from the approved reference, scoped under .cs-pp (the article's class). */

/* hero */
.cs-pp .pp-client > span { display: block; }

/* results, read next */
.cs-pp .cs-tile__num--word { font-size: clamp(26px, 3vw, 34px) !important; }
.cs-pp .cs-tile__ctx { color: rgba(0, 0, 0, .78); }
.cs-pp .cs-tile--accent .cs-tile__ctx { color: rgba(255, 255, 255, .92); }

/* before / after routes */
.cs-pp .pp-flow .cs-chain__key { border-radius: 3px; box-shadow: inset 0 3px 0 #D04643; }
.cs-pp .pp-flow .cs-chain__step:not(.cs-chain__step--pain) .cs-chain__num { background: #F3F4F6; }
.cs-pp .cs-chain__step.pp-step--ok { border-color: rgba(0, 178, 107, .6); background: #E6F7EF; }
.cs-pp .cs-chain__step.pp-step--ok .cs-chain__num { background: #00B26B; color: #04150D; }
@media (min-width: 1024px) { .cs-pp .cs-chain__step.pp-step--ok { box-shadow: inset 0 4px 0 #00B26B; } }
.cs-pp .pp-after-label { display: block; }

/* the redesign */
.cs-pp .pp-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cs-pp [data-zoom] { cursor: zoom-in; transition: transform .2s; }
.cs-pp [data-zoom]:hover { transform: translateY(-2px); }
.cs-pp [data-zoom]:focus-visible { outline: 3px solid #00B26B; outline-offset: 3px; }

.cs-pp .pp-feat { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .cs-pp .pp-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .cs-pp .pp-feat__item--wide { grid-column: 1 / -1; } }
.cs-pp .pp-feat__item { display: grid; gap: 16px; align-items: center; padding: 20px; border-radius: 20px; background: #F6F9F7; border: 1px solid rgba(0, 0, 0, .08); }
@media (min-width: 768px) { .cs-pp .pp-feat__item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: 24px; } .cs-pp .pp-feat__item--wide { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.cs-pp .pp-feat__text h4 { margin: 10px 0 0; font-size: 20px; font-weight: 600; color: #111; }
.cs-pp .pp-feat__text p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: rgba(0, 0, 0, .78); }
.cs-pp .pp-feat__num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #00B26B; color: #04150D; font-weight: 600; font-size: 14px; }
.cs-pp .pp-feat__shot { margin: 0; display: grid; gap: 6px; }
.cs-pp .pp-feat__shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 16px 32px -26px rgba(0, 0, 0, .45); }
.cs-pp .pp-feat__shot figcaption { text-align: center; }
.cs-pp .pp-feat__pair { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: center; }
.cs-pp .pp-feat__arrow { justify-self: center; width: 14px; height: 14px; border-top: 3px solid #007A4A; border-right: 3px solid #007A4A; transform: rotate(45deg); }
@media (max-width: 639px) { .cs-pp .pp-feat__pair { grid-template-columns: 1fr; } .cs-pp .pp-feat__arrow { transform: rotate(135deg); margin: 4px 0 10px; } }

.cs-pp .pp-ba { display: grid; gap: 24px; }
@media (min-width: 1024px) { .cs-pp .pp-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; } }
.cs-pp .pp-ba__item { margin: 0; display: grid; gap: 10px; }
.cs-pp .pp-ba__frame { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .45); aspect-ratio: auto; background: #E9EEF0; }
.cs-pp .pp-ba__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.cs-pp .pp-notes { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cs-pp .pp-notes li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: rgba(0, 0, 0, .78); }
.cs-pp .pp-notes li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #00B26B; }
.cs-pp .pp-notes b { color: #111; font-weight: 600; }

.cs-pp .pp-gal { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639px) { .cs-pp .pp-gal { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .cs-pp .pp-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.cs-pp .pp-gal__item { margin: 0; display: grid; gap: 8px; }
.cs-pp .pp-gal__frame { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .1); box-shadow: 0 16px 32px -26px rgba(0, 0, 0, .45); background: #E9EEF0; }
.cs-pp .pp-gal__frame .cs-browser__bar { padding: 7px 10px; }
.cs-pp .pp-gal__frame .cs-browser__bar i { width: 7px; height: 7px; }
.cs-pp .pp-gal__frame .cs-browser__bar span { font-size: 10px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }

.cs-pp .pp-ph { display: grid; margin: 0; padding: 0; list-style: none; gap: 40px; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: start; }
@media (min-width: 640px) { .cs-pp .pp-ph { justify-content: center; margin-left: auto; margin-right: auto; grid-template-columns: repeat(2, minmax(0, 240px)); } .cs-pp .pp-ph-label { text-align: center; } }
@media (max-width: 639px) {   /* one phone per row, no scroller */
  .cs-pp .pp-ph { grid-template-columns: minmax(0, 240px); justify-content: center; gap: 24px; margin: 16px 0 0; }
}
.cs-pp .pp-ph__item { margin: 0; display: grid; gap: 8px; }
.cs-pp .pp-ph__frame { padding: 6px; border-radius: 20px; background: #E9EEF0; }
.cs-pp .pp-ph__frame img { border-radius: 15px; }

/* where it is today */
.cs-pp .tw13-after__how > p.cs-small { margin-bottom: 10px; color: rgba(0, 0, 0, .78); }

/* closing card: the second carry paragraph (routes) */
.cs-pp .tw2-carry + .tw2-carry { margin-top: 12px; }
.cs-pp .tw2-carry + .tw2-carry a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .cs-pp .tw2-carry + .tw2-carry a { display: inline-block; padding: 10px 0; margin: -10px 0; } }
.cs-pp .tw2-carry + .tw2-carry a { display: inline-block; padding: 10px 0; margin: -10px 0; }