/* Profile guides (build/appGuidePages.ts), on top of profile-review.css and
   profile-examples.css: the hero as on the examples pages, links to the
   sections, four big figures on the review pages' paper band, then each
   section in its own band (alternating navies, the key idea on a teal one),
   text beside a picture or diagram, then the questions and a card for each
   of the app's pages. Compact by design (Chris: less vertical space, more
   to look at). Traits wear their app colors (--trait, set inline). */

/* Links to the sections, under the headline. */
.guide-jump { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 28px; }
.guide-jump a { padding: 6px 12px; border: 1px solid #ffffff26; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.guide-jump a:hover { border-color: var(--cyan); color: var(--cyan); }

/* A trait named in the text, as a chip in its app color. */
.trait-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--trait) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--trait) 22%, transparent); color: #fff; font-size: .92em; font-weight: 600; line-height: 1.5; white-space: nowrap; }

/* How the app works: four big figures. */
.guide-stats .wrap { padding-block: 36px; }
.guide-stats .eyebrow { margin-bottom: 6px; }
.guide-stats h2 { font-size: clamp(26px, 2.8vw, 34px); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 22px; }
.stat-grid > div { padding-top: 14px; border-top: 3px solid #157280; }
.stat-value { font-family: Poppins, Inter, sans-serif; font-size: clamp(30px, 3vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: #157280; }
.stat-label { margin-top: 4px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.stat-grid p:not(.stat-value):not(.stat-label) { margin-top: 8px; color: #52666e; font-size: 14px; line-height: 1.55; }
.stat-grid p strong { color: var(--ink); font-weight: 600; }

/* Each section: text beside its visual, in alternating bands. */
.guide-section { padding-block: 48px; }
.guide-sections > .guide-section:nth-child(even), .guide-faq { background: var(--section-dark); }
.guide-section.is-feature { background: linear-gradient(120deg, #0d3a44, #15233b 70%); box-shadow: inset 0 1px 0 #37dced33, inset 0 -1px 0 #37dced33; }
.guide-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.guide-row.is-stacked { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.guide-row.is-stacked .guide-text { max-width: 760px; }
.guide-text h2 { font-size: clamp(28px, 3vw, 40px); }
.is-feature .guide-text h2 { font-size: clamp(34px, 4vw, 52px); color: var(--cyan); }
.guide-text p, .guide-list { margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.guide-text p strong, .guide-list strong { color: #fff; font-weight: 600; }
.guide-text a, .guide-visual figcaption a, .guide-faq a { color: var(--cyan); text-underline-offset: 3px; }
.guide-list { padding-left: 20px; }
.visual-kicker { display: block; margin-bottom: 12px; color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.guide-visual figure { margin: 0; }

/* Real scored photos. */
.guide-photos figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.guide-photos figcaption strong { color: #fff; }

/* A lineup of photo jobs, one slot per photo. */
.guide-lineup ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-lineup li { display: flex; flex-direction: column; gap: 4px; min-height: 128px; padding: 12px 14px; border-top: 3px solid var(--trait); background: color-mix(in srgb, var(--trait) 14%, #0a1120); }
.slot-head { display: flex; justify-content: space-between; align-items: center; font-size: 20px; line-height: 1; }
.slot-number { color: var(--trait); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.guide-lineup strong { margin-top: 6px; color: #fff; font-size: 16px; line-height: 1.25; }
.slot-detail { color: var(--muted); font-size: 13px; line-height: 1.45; }
.slot-trait { margin-top: auto; padding-top: 6px; color: var(--trait); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* The nine traits in the app's three groups, the app's key ones lit up. */
.trait-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trait-group h3 { margin-bottom: 8px; color: var(--muted); font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.trait-group ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.trait-group li { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #ffffff14; background: linear-gradient(90deg, color-mix(in srgb, var(--trait) 16%, transparent), transparent 80%); }
.trait-group li.is-key { border-color: var(--trait); background: color-mix(in srgb, var(--trait) 26%, #0a1120); box-shadow: 0 0 14px color-mix(in srgb, var(--trait) 35%, transparent); }
.guide-traits .trait-emoji { width: auto; font-size: 20px; }
.trait-group li > span:nth-child(2) { display: grid; min-width: 0; }
.trait-group strong { color: #fff; font-size: 14px; line-height: 1.3; }
.trait-group small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.trait-group em { position: absolute; top: -8px; right: 6px; padding: 1px 6px; background: var(--trait); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .03em; line-height: 1.5; white-space: nowrap; }

/* The match model as bars, 8 and up in cyan. --h is each bar's height out
   of 100. */
.guide-chart ol { display: flex; align-items: flex-end; gap: 10px; height: 230px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #ffffff33; }
.guide-chart li { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.bar { width: 100%; height: calc(var(--h) * 1.6px); background: linear-gradient(#ffffff40, #ffffff1a); }
.guide-chart li.is-high .bar { background: linear-gradient(#37dced, #157280); box-shadow: 0 0 18px #37dced40; }
.bar-value { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.is-high .bar-value { color: #fff; }
.bar-score { order: 3; margin-bottom: -26px; color: #fff; font-size: 14px; font-weight: 700; }
.bar-score small { color: var(--muted); font-size: 10px; font-weight: 500; }
.chart-note { margin-top: 34px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* The five types, each with a photo from its profile. */
.guide-types { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.guide-types a { display: flex; flex-direction: column; height: 100%; border-top: 3px solid var(--trait); background: #ffffff0a; color: #fff; text-decoration: none; transition: transform .2s, background .2s; }
.guide-types a:hover { transform: translateY(-2px); background: #ffffff14; }
.guide-types img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.type-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 14px; }
.type-trait { display: flex; gap: 4px; color: var(--trait); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.type-name { font-family: Poppins, Inter, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.type-line { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* How much the words weigh next to the photos, then what to write and skip. */
.weight { display: grid; gap: 10px; }
.weight-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 2px; }
.weight-label { color: #fff; font-size: 14px; font-weight: 700; }
.weight-bar { height: 22px; background: linear-gradient(90deg, #37dced, #157280); box-shadow: 0 0 16px #37dced33; }
.weight-row:not(.is-photos) .weight-bar { width: 14%; background: #ffffff40; box-shadow: none; }
.weight-note { grid-column: 2; color: var(--muted); font-size: 12px; }
.write-skip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.write-skip > div { padding: 14px 16px; background: #ffffff0a; border-top: 3px solid #4ade80; }
.write-skip > .is-skip { border-top-color: #f87171; }
.write-skip h3 { color: #4ade80; font-family: Inter, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.is-skip h3 { color: #f87171; }
.write-skip ul { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.write-skip li { position: relative; padding-left: 20px; color: #fff; font-size: 14px; line-height: 1.45; }
.write-skip li::before { content: '✓'; position: absolute; left: 0; color: #4ade80; font-weight: 800; }
.is-skip li::before { content: '✕'; color: #f87171; }

/* Questions in two columns. */
.guide-faq h2 { font-size: clamp(28px, 3vw, 40px); }
.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; margin-top: 12px; }
.guide-faq summary { padding-block: 16px; font-size: 16px; }
.guide-faq details p { padding-bottom: 16px; font-size: 15px; }

/* The app's three pages. */
.guide-paths { padding-block: 48px; background: var(--section-light); }
.guide-paths .eyebrow { margin-bottom: 6px; }
.guide-paths h2 { font-size: clamp(28px, 3vw, 40px); }
.guide-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; padding: 0; list-style: none; }
.guide-card { display: flex; flex-direction: column; height: 100%; background: var(--section-dark); color: #fff; text-decoration: none; box-shadow: 0 0 0 1px #ffffff1a; transition: box-shadow .2s, transform .2s; }
.guide-card:hover { box-shadow: 0 0 0 1px var(--cyan); transform: translateY(-2px); }
.guide-card-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card-photos img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.guide-card-body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.guide-card .step-number { margin-bottom: 8px; padding-top: 0; border-top: 0; color: var(--cyan); }
.guide-card-title { font-family: Poppins, Inter, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; }
.guide-card-text { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.guide-card-cta { margin-top: auto; padding-top: 14px; color: var(--cyan); font-size: 14px; font-weight: 700; }

@media (max-width: 1000px) {
  .guide-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .guide-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .guide-cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 760px) {
  .guide-section, .guide-paths { padding-block: 36px; }
  .guide-stats .wrap { padding-block: 28px; }
  .guide-text p, .guide-list { font-size: 15px; }
  .guide-lineup ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-lineup li { min-height: 0; }
  .trait-groups { grid-template-columns: minmax(0, 1fr); }
  .guide-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-chart ol { height: 200px; gap: 6px; }
  .bar { height: calc(var(--h) * 1.3px); }
  .bar-value { font-size: 10px; }
  .write-skip { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}