/* Peeps landing — page-specific styling on top of css/toasty-site.css.
   Also restyles the markup that peeps/peeps.js renders (cards, verdicts, dialogs) so the interactive sample works
   inside the shared design system without loading the legacy peeps.css. */
.peeps-landing .ts-hero h1 { max-width: 16ch; }
.peeps-landing .peeps-beta { font-size: .9rem; margin-top: var(--s-4); }
.peeps-landing .ts-hero::before { background: radial-gradient(55% 60% at 80% 15%, rgba(231, 178, 122, 0.2), transparent 70%), radial-gradient(50% 60% at 15% 10%, rgba(255, 122, 41, 0.2), transparent 70%); }

.peeps-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); counter-reset: s; }
@media (max-width: 1040px) { .peeps-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .peeps-steps { grid-template-columns: 1fr; } }
.peeps-steps li { position: relative; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.peeps-steps li::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.2rem; height: 2px; background: var(--toast); }
.peeps-steps__n { display: block; font-size: .78rem; letter-spacing: .12em; color: var(--orange); font-weight: 600; margin-bottom: .6rem; }
.peeps-steps h3 { font-size: 1.1rem; margin-bottom: .5rem; letter-spacing: -.01em; }
.peeps-steps p { margin: 0; color: var(--text-2); font-size: .95rem; }
.peeps-promises li::before { border-color: var(--orange); background: radial-gradient(circle, var(--orange) 0 35%, transparent 38%); }
.peeps-final { text-align: center; }
.peeps-final .ts-lede { margin-inline: auto; }
.peeps-final .ts-actions { justify-content: center; }

/* ---- sample finder ---- */
.peeps-landing .chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--s-4); }
.peeps-landing .chip { min-height: 42px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font: inherit; font-size: .92rem; font-weight: 500; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.peeps-landing .chip:hover { border-color: var(--toast); color: var(--text); }
.peeps-landing .chip.on { background: var(--toast-soft); border-color: var(--toast); color: var(--toast); }
.peeps-landing .search { display: grid; grid-template-columns: 2fr 1fr 1.3fr auto; gap: var(--s-3); align-items: end; padding: var(--s-4); }
@media (max-width: 980px) { .peeps-landing .search { grid-template-columns: 1fr; } }
.peeps-landing .search label { display: grid; gap: .4rem; }
.peeps-landing .search label > span { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.peeps-landing .search textarea, .peeps-landing .search input, .peeps-landing .search select { width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: var(--r-1); border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--text); font: inherit; font-size: 16px; }
.peeps-landing .search textarea { height: 76px; resize: none; }
.peeps-landing .search :focus-visible { outline: 2px solid var(--toast); outline-offset: 1px; }
.peeps-landing #resultsWrap { margin-top: var(--s-5); }
.peeps-landing .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
@media (max-width: 700px) { .peeps-landing .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.peeps-landing .stats div { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); background: var(--ink-1); }
.peeps-landing .stats small { display: block; color: var(--muted); font-size: .8rem; }
.peeps-landing .stats b { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; }
.peeps-landing .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 980px) { .peeps-landing .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .peeps-landing .grid { grid-template-columns: 1fr; } }
.peeps-landing .card.peep { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); background: var(--ink-1); display: flex; flex-direction: column; gap: var(--s-3); }
.peeps-landing .peep .top { display: flex; justify-content: space-between; gap: var(--s-3); align-items: start; }
.peeps-landing .peep h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.peeps-landing .peep small { color: var(--muted); }
.peeps-landing .peep p { margin: 0; color: var(--text-2); font-size: .94rem; }
.peeps-landing .verdict { font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; background: var(--ink-3); color: var(--text-2); white-space: nowrap; }
.peeps-landing .verdict.v-yes { background: var(--toast-soft); color: var(--toast); }
.peeps-landing .verdict.v-close { background: var(--orange-soft); color: var(--orange); }
.peeps-landing .crumbs { display: flex; flex-wrap: wrap; gap: .4rem; }
.peeps-landing .crumbs span { font-size: .76rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; }
.peeps-landing .peep footer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: var(--s-2); }
.peeps-landing .peep footer button, .peeps-landing #dub button:not(#close) { min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.peeps-landing .peep footer button:first-child, .peeps-landing #dub button:not(#close) { background: linear-gradient(135deg, var(--burnt), var(--orange)); border-color: transparent; color: #1c0c06; }
.peeps-landing .peep footer button:hover { border-color: var(--toast); }

/* ---- dialogs ---- */
.peeps-landing dialog { border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--ink-1); color: var(--text); padding: var(--s-5); max-width: min(34rem, calc(100vw - 24px)); width: 100%; max-height: calc(100dvh - 24px); overflow: auto; box-shadow: var(--shadow-1); }
.peeps-landing dialog::backdrop { background: rgba(4, 4, 10, 0.72); backdrop-filter: blur(4px); }
.peeps-landing dialog h2 { font-size: 1.6rem; margin: .2rem 0 var(--s-3); }
.peeps-landing dialog small { color: var(--toast); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
.peeps-landing dialog p { color: var(--text-2); }
.peeps-landing #close, .peeps-landing #peepsAuthClose { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.peeps-landing #dub .answer { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0; }
.peeps-landing #dub .answer b { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--toast); }
.peeps-landing #dub .answer.unknown b { color: var(--orange); }
.peeps-landing #peepsAuth { padding: 0; background: transparent; border: 0; box-shadow: none; }
.peeps-landing #peepsAuth .ts-card { position: relative; }
.peeps-landing .auth-message { min-height: 1.3em; margin: var(--s-2) 0 0; font-size: .92rem; font-weight: 500; }
.peeps-landing .auth-message[data-state="error"] { color: var(--danger); }
.peeps-landing .auth-footnote { font-size: .9rem; margin: var(--s-3) 0 0; }

/* ---- reworked page: problem, statistics, aptitude example, agent payments, Colosseum ---- */
.peeps-landing .peeps-beta { margin-top: var(--s-4); }
.peeps-signals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.peeps-signals li { border: 1px solid var(--line-strong); border-radius: 999px; padding: .5rem 1rem; font-weight: 500; background: var(--ink-1); }
.peeps-signals__note { color: var(--text-2); margin: var(--s-4) 0 0; font-size: var(--fs-2); }
.peeps-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 1000px) { .peeps-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .peeps-stats { grid-template-columns: 1fr; } }
.peeps-stat { margin: 0; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: linear-gradient(180deg, var(--ink-2), var(--ink-1)); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.peeps-stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.8rem, 2rem + 3vw, 4rem); line-height: 1; color: var(--orange); letter-spacing: -0.02em; }
.peeps-stat figcaption { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.peeps-stat span { color: var(--text); font-size: .98rem; }
.peeps-stat cite { margin-top: auto; font-style: normal; font-size: .76rem; color: var(--muted); }
.peeps-stat cite a { color: var(--muted); text-decoration-color: var(--line-strong); }
.peeps-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
@media (max-width: 780px) { .peeps-compare { grid-template-columns: 1fr; } .peeps-compare__mid { justify-self: center; } }
.peeps-compare__mid { align-self: center; color: var(--muted); font-family: var(--font-display); font-style: italic; font-size: 1.6rem; }
.peeps-person { border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); background: var(--ink-1); display: flex; flex-direction: column; gap: var(--s-2); }
.peeps-person--found { border-color: rgba(255, 122, 41, 0.55); background: linear-gradient(180deg, rgba(255, 122, 41, 0.1), var(--ink-1)); box-shadow: 0 0 60px -30px rgba(255, 122, 41, 0.6); }
.peeps-person__tag { margin: 0; font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--toast); }
.peeps-person--title .peeps-person__tag { color: var(--muted); }
.peeps-person h3 { font-size: var(--fs-4); }
.peeps-person__role { margin: 0; color: var(--text-2); font-weight: 500; }
.peeps-person p:last-child { margin: 0; color: var(--text-2); }
.peeps-compare__caption { max-width: 46rem; margin: var(--s-5) 0 0; color: var(--text-2); }
.peeps-402 { border: 1px solid var(--line-strong); border-radius: var(--r-3); padding: var(--s-5); background: radial-gradient(80% 90% at 100% 0%, var(--orange-soft), transparent 70%), var(--ink-1); }
.peeps-402__label { margin: 0 0 var(--s-2); font-size: var(--fs-0); letter-spacing: .14em; text-transform: uppercase; color: var(--toast); font-weight: 600; }
.peeps-402__price { margin: 0; font-size: var(--fs-3); }
.peeps-402__price b { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 2rem + 3.5vw, 4.5rem); color: var(--orange); letter-spacing: -0.02em; margin-right: .2em; }
.peeps-402__text { color: var(--muted); margin: var(--s-1) 0 var(--s-4); }
.peeps-402__calc { border-top: 1px solid var(--line); padding-top: var(--s-4); display: grid; gap: .2rem; }
.peeps-402__calc b { font-size: var(--fs-4); font-weight: 600; }
.peeps-402__calc span, .peeps-402__calc small { color: var(--text-2); }
.peeps-402__note { margin: var(--s-4) 0 0; font-size: .85rem; color: var(--muted); }
.peeps-colosseum { display: grid; gap: var(--s-3); justify-items: center; text-align: center; border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); background: var(--ink-1); max-width: 46rem; }
.peeps-colosseum img { width: min(100%, 22rem); height: auto; opacity: .92; }
.peeps-colosseum p { margin: 0; color: var(--text-2); }
.peeps-colosseum__links { display: flex; gap: var(--s-5); flex-wrap: wrap; justify-content: center; }