/* ==========================================================================
   Psychometric landing v2 — template-specific styles only.
   Loaded after v2-core.css by _layouts/psychometric-landing-v2.html.
   Everything reusable (header, hero, employer strip, try-one, sidebar, FAQ
   scaffolding, footer, buttons) comes from v2-core.css; this file holds the
   psyv2- classes this template adds.
   ========================================================================== */

/* Try-one passage (the design's two-paragraph verbal stimulus) */
.psyv2-tryone__passage { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #414B5E; text-wrap: pretty; }

/* Shared two-column shell: main copy + 300px aside */
.psyv2-cols { display: grid; grid-template-columns: minmax(0,716px) 300px; gap: 56px; align-items: start; }
.psyv2-cols--intro { padding: 48px 0 0; }
.psyv2-cols__main { min-width: 0; }
/* Tips section with no rail (Guy, 2026-09-04): one column at the main column's width. */
.psyv2-cols--single { grid-template-columns: minmax(0,716px); }

/* Body copy */
.psyv2-body { margin: 0 0 16px; font-size: 17px; line-height: 1.65; color: #414B5E; max-width: 68ch; text-wrap: pretty; }
.psyv2-body--end { margin-bottom: 42px; }
.psyv2-body--last { margin-bottom: 0; }
.psyv2-lede { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: #414B5E; max-width: 64ch; }
.psyv2-h2--tight { margin-bottom: 10px; }
.psyv2-h2--guide { margin-bottom: 14px; }

/* Guide anchors */
.psyv2-anchor { scroll-margin-top: 16px; }
.psyv2-anchor--rule { border-top: 1px solid #DFE3EA; padding-top: 34px; }

/* Section rhythm */
.psyv2-section { padding: 48px 0 52px; }
/* Full-bleed grey band (Guy, 2026-09-04): breaks the page up, and the three directory cards fill the row. */
.psyv2-section--who { padding: 56px 0 60px; background: #F6F8FC; border-top: 1px solid #EDEFF4; border-bottom: 1px solid #EDEFF4; }
.psyv2-section--who .psyv2-who__head { background: #FFF; }
.psyv2-types { padding: 48px 0 52px; scroll-margin-top: 16px; }

/* Generic aside card (credits, rail, checklist, free-practice) */
.psyv2-card { border: 1px solid #DFE3EA; border-radius: 10px; padding: 20px 22px; background: #fff; }
.psyv2-card--tinted { background: #F8FAFD; }
.psyv2-card__title { font: 500 16px/1.3 'Circular', sans-serif; color: #14203A; margin-bottom: 6px; }
.psyv2-card__note { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: #5A6478; }
.psyv2-card__kicker { font: 500 11px/1 'IBM Plex Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: #5A6478; margin-bottom: 12px; }
.psyv2-card__body { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #414B5E; }
.tv2 a.psyv2-btn--block { display: block; text-align: center; }

/* Credits table */

/* Test-type cards */
.psyv2-tcards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 14px; }
.tv2 a.psyv2-tcard {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start;
  background: #fff; border: 1px solid #DFE3EA; border-radius: 9px; padding: 13px 14px; text-decoration: none;
}
.tv2 a.psyv2-tcard:hover { border-color: #1257E8; box-shadow: 0 2px 10px rgba(20,32,58,.07); text-decoration: none; }
.psyv2-tcard__glyph { width: 34px; height: 34px; border-radius: 8px; background: #EEF4FF; color: #1257E8; display: flex; align-items: center; justify-content: center; }
.psyv2-tcard__glyph svg { display: block; }
.psyv2-tcard__text { min-width: 0; display: block; }
.psyv2-tcard__name { display: block; font: 500 16px/1.35 'Circular', sans-serif; color: #14203A; margin-bottom: 2px; }
.psyv2-tcard__note { display: block; font-size: 13.5px; line-height: 1.45; color: #5A6478; text-wrap: pretty; }

/* Publisher / employer cards */
.psyv2-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px,100%),1fr)); gap: 24px; align-items: start; }
.psyv2-who__card { border: 1px solid #DFE3EA; border-radius: 10px; min-width: 0; overflow: hidden; background: #fff; }
.psyv2-who__head { padding: 20px 22px 17px; border-bottom: 1px solid #DFE3EA; background: #F8FAFD; }
.psyv2-who__head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.psyv2-who__head h3 { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 500; color: #14203A; }
.psyv2-who__count { font: 500 11px/1.4 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #5A6478; white-space: nowrap; }
.psyv2-who__head p { margin: 0; font-size: 15px; line-height: 1.6; color: #5A6478; text-wrap: pretty; }
.psyv2-who__list { list-style: none; margin: 0; padding: 0; }
.psyv2-who__list li { border-top: 1px solid #EDEFF4; }
.psyv2-who__list li:first-child { border-top-color: transparent; }
.tv2 a.psyv2-who__row, .psyv2-who__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 22px; text-decoration: none; color: #14203A;
}
.psyv2-who__list a:hover { background: #F6F8FC; color: #14203A; text-decoration: none; }
.psyv2-who__name { font-size: 16px; line-height: 1.4; font-weight: 500; min-width: 0; }
.psyv2-who__meta { font: 400 13px/1.4 'IBM Plex Mono', monospace; color: #5A6478; text-align: right; flex: none; }
.tv2 a.psyv2-who__all {
  display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid #DFE3EA;
  background: #F8FAFD; font-size: 16px; font-weight: 500; color: #1257E8; text-decoration: none;
}
.tv2 a.psyv2-who__all:hover { background: #EEF4FF; color: #1257E8; text-decoration: none; }
.psyv2-who__arrow { font-family: 'IBM Plex Mono', monospace; }

/* Tips list */
.psyv2-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.psyv2-tips li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.65; color: #414B5E; max-width: 66ch; }
.psyv2-tips__n { position: absolute; left: 0; top: 1px; font: 600 14px 'IBM Plex Mono', monospace; color: #1257E8; }
.psyv2-tips b { font-weight: 500; color: #14203A; }

/* Format rail + checklist */
.psyv2-rail { display: flex; flex-direction: column; }
.tv2 .psyv2-rail a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 15px; color: #414B5E; text-decoration: none; padding: 10px 0; border-bottom: 1px solid #EDEFF4;
}
.tv2 .psyv2-rail a:last-child { border-bottom: 0; }
.tv2 .psyv2-rail a:hover { color: #1257E8; text-decoration: none; }
.psyv2-rail__count { font: 400 13px/1.4 'IBM Plex Mono', monospace; color: #5A6478; flex: none; }
.psyv2-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.psyv2-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: #414B5E; padding: 10px 0; border-bottom: 1px solid #EDEFF4; }
.psyv2-checklist li:last-child { border-bottom: 0; }
.psyv2-checklist li span { color: #0E7A50; font-weight: 700; flex: none; }

/* Pricing */
  border: none; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  font: 500 15px 'Circular', sans-serif; background: transparent; color: #5A6478;
}

  font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .05em; text-transform: uppercase;
  color: #0E7A50; background: #E6F6EE; border: 1px solid #BFE5D3; padding: 6px 9px; border-radius: 999px;
}
.psyv2-tick { color: #0E7A50; font-weight: 700; flex: none; }
.psyv2-cross { color: #98A1B2; font-weight: 700; flex: none; }

/* FAQs: white variant of the core FAQ section */
.psyv2-faqs { background: #fff; border-top: 1px solid #DFE3EA; padding: 72px 0; scroll-margin-top: 16px; }
.psyv2-faq__answer p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #414B5E; text-wrap: pretty; }
.psyv2-faq__answer p:last-child { margin-bottom: 0; }
.psyv2-faq__answer a { color: #1257E8; }

/* Closing navy CTA */

/* ==========================================================================
   Responsive — per the design's breakpoint set
   ========================================================================== */
@media (max-width: 980px) {
  .psyv2-tcards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .psyv2-cols { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .psyv2-cols > aside, .psyv2-cols > .tv2-sidebar { max-width: 460px; }
}
@media (max-width: 620px) {
  .psyv2-tcards { grid-template-columns: minmax(0,1fr); }
}
