/* ============================================================
   /how-a-home-is-sold — the illustrated selling journey.

   A lesson path, not an article: numbered stations on a rail, a
   progress bar that fills as the reader marks steps done, and a
   knowledge check per station. Loaded only by journey.py's page.

   Everything rides on site.css's tokens. The two colours added
   here are the only ones the brand doesn't already own, and both
   exist because the page has to signal two states the slate/sand
   palette has no word for: "this is the part that costs you" and
   "you got that right". Text shades are darkened versions of each,
   because the display shades don't clear 4.5:1 on cream.
   ============================================================ */

:root {
  --j-flag:      #c26a45;
  --j-flag-ink:  #8f4327;
  --j-flag-bg:   #fbf0ea;
  --j-good:      #6f8f7a;
  --j-good-ink:  #3f6350;
  --j-good-bg:   #eef3ef;
  --j-headh:     74px;   /* the sticky site header the progress bar sits under */
}

/* ---------- hero ---------- */
.j-hero { background: var(--ps-slate-deep); color: var(--ps-white); padding: 66px 0 0; }
.j-hero .wrap { position: relative; }
.j-hero h1 { font-size: clamp(34px, 5vw, 58px); margin-bottom: 20px; max-width: 15ch; }
.j-hero .lead { color: rgba(255,255,255,.84); max-width: 60ch; }
.j-hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  margin-top: 30px; font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ps-sand);
}
.j-hero-meta span { display: flex; align-items: center; gap: 8px; }
.j-hero-meta span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ps-sand); flex: none;
}
.j-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.j-map { display: block; width: 100%; height: auto; margin: 22px 0 0; max-width: 980px; }

/* ---------- sticky progress ---------- */
.j-progress {
  position: sticky; top: var(--j-headh); z-index: 50;
  background: rgba(247,245,240,.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--ps-line);
}
.j-progress-inner {
  max-width: 1160px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 18px;
}
.j-progress-label {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ps-slate-ink);
  white-space: nowrap;
}
.j-progress-track {
  flex: 1; height: 8px; border-radius: 4px; background: var(--ps-line); overflow: hidden;
}
.j-progress-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--ps-sand-deep), var(--ps-sand));
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.j-reset {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ps-gray);
  background: none; border: 0; cursor: pointer; padding: 4px; white-space: nowrap;
}
.j-reset:hover { color: var(--ps-slate-ink); text-decoration: underline; }
.j-reset[hidden] { display: none; }

/* ---------- the cast ---------- */
.j-cast-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2px; background: var(--ps-line); border: 1px solid var(--ps-line);
}
.j-cast {
  background: var(--ps-white); padding: 22px 24px 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.j-cast .j-av { width: 46px; height: 46px; flex: none; margin-top: 2px; }
.j-cast h3 {
  font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: var(--ps-slate-ink); margin-bottom: 6px; line-height: 1.3;
}
.j-cast p { font-size: 15px; line-height: 1.55; color: var(--ps-slate); }

/* ---------- units + rail ---------- */
.j-path { position: relative; }
.j-unit { position: relative; padding-left: 92px; }
.j-unit + .j-unit { margin-top: 8px; }

/* the dotted route, and the solid line that fills in behind you */
.j-path::before,
.j-path .j-rail-fill {
  content: ''; position: absolute; left: 27px; top: 10px; width: 3px;
  border-radius: 2px;
}
.j-path::before { bottom: 10px; background: var(--ps-line); }
.j-path .j-rail-fill {
  height: 0; background: var(--ps-sand);
  transition: height .5s cubic-bezier(.2,.7,.3,1);
}

.j-unit-head { position: relative; padding: 46px 0 26px; }
.j-unit:first-child .j-unit-head { padding-top: 4px; }
.j-unit-badge {
  position: absolute; left: -92px; top: 44px;
  width: 57px; height: 57px; border-radius: 50%;
  background: var(--ps-slate); color: var(--ps-sand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; line-height: 1;
  border: 3px solid var(--ps-cream); box-shadow: var(--shadow-sm);
}
.j-unit:first-child .j-unit-badge { top: 2px; }
.j-unit-badge b { font-size: 17px; font-weight: 700; }
.j-unit-badge span { font-size: 8px; letter-spacing: .14em; margin-top: 3px; opacity: .8; }
.j-unit-head h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 12px; }
.j-unit-head p { color: var(--ps-slate); max-width: 62ch; font-size: 17px; }

/* ---------- a station ---------- */
.j-station {
  position: relative; background: var(--ps-white);
  border: 1px solid var(--ps-line); box-shadow: var(--shadow-sm);
  margin-bottom: 26px; scroll-margin-top: 140px;
}
.j-node {
  position: absolute; left: -92px; top: 26px;
  width: 57px; height: 57px; border-radius: 50%;
  background: var(--ps-white); border: 3px solid var(--ps-line);
  color: var(--ps-gray);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 700;
  transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.j-station.is-done .j-node {
  background: var(--ps-sand); border-color: var(--ps-sand); color: var(--ps-slate-ink);
  transform: scale(1.06);
}
.j-station.is-done .j-node::after {
  content: '\2713'; font-size: 24px; line-height: 1;
}
.j-station.is-done .j-node span { display: none; }

/* The panels are 320x200. Left to scale freely they become a 1000x630 slab
   at desktop width and swamp the text they're supposed to introduce, so the
   height is capped and the SVG letterboxes inside a wrapper painted the same
   slate as the panel itself — invisible seam, cinematic proportion. Below
   ~480px of card width the natural height is under the cap and it simply
   fills, so phones need no special case. */
.j-art-wrap { background: #2a3538; display: flex; justify-content: center; }
.j-art { display: block; width: 100%; height: auto; max-height: 300px; }
.j-station-body { padding: 30px 36px 34px; }
.j-kicker {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ps-sand-deep);
  margin-bottom: 10px;
}
.j-station h3 {
  font-family: 'Abril Fatface', Georgia, serif; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.2;
  color: var(--ps-slate-ink); margin-bottom: 18px;
}
.j-station-body > p { margin-bottom: 16px; }
.j-station-body > p:last-of-type { margin-bottom: 0; }
.j-station-body strong { color: var(--ps-slate-ink); }

/* who's in the room */
.j-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.j-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ps-cream); border: 1px solid var(--ps-line); border-radius: 20px;
  padding: 5px 13px 5px 6px;
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 600;
  color: var(--ps-slate-ink);
}
.j-chip .j-av { width: 22px; height: 22px; flex: none; }

/* what it costs when it goes wrong */
.j-cost {
  margin: 24px 0 0; padding: 20px 22px;
  background: var(--j-flag-bg); border-left: 3px solid var(--j-flag);
}
.j-cost-top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px;
}
.j-cost-amt {
  font-family: 'Abril Fatface', Georgia, serif; font-size: 25px; line-height: 1;
  color: var(--j-flag-ink);
}
.j-cost-label {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--j-flag-ink);
}
.j-cost p { font-size: 15.5px; line-height: 1.6; color: var(--ps-slate); margin: 0; }

/* where the agent earns it */
.j-mine {
  margin-top: 18px; padding: 20px 22px;
  background: var(--ps-slate); color: rgba(255,255,255,.88);
}
.j-mine h4 {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--ps-sand); margin-bottom: 9px;
}
.j-mine p { font-size: 15.5px; line-height: 1.62; margin: 0; }
.j-mine em { color: var(--ps-sand-light); font-style: normal; }

.j-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--ps-slate-ink);
  border-bottom: 2px solid var(--ps-sand); padding-bottom: 3px;
}
.j-link:hover { border-color: var(--ps-slate-ink); }

/* ---------- knowledge check ---------- */
.j-quiz { border-top: 1px solid var(--ps-line); padding: 26px 36px 30px; background: var(--ps-cream); }
.j-quiz fieldset { border: 0; padding: 0; margin: 0; }
.j-quiz legend {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ps-sand-deep);
  margin-bottom: 12px; padding: 0;
}
.j-q { font-size: 17px; font-weight: 600; color: var(--ps-slate-ink); margin-bottom: 16px; }
.j-opts { display: grid; gap: 9px; }
.j-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  background: var(--ps-white); border: 1px solid var(--ps-line); border-radius: 3px;
  padding: 13px 16px; cursor: pointer; font: inherit; font-size: 16px;
  color: var(--ps-slate); transition: border-color .2s, background .2s, box-shadow .2s;
}
.j-opt:hover:not(:disabled) { border-color: var(--ps-sand); box-shadow: var(--shadow-sm); }
.j-opt .j-optk {
  flex: none; width: 23px; height: 23px; border-radius: 50%;
  border: 1.5px solid var(--ps-line); background: var(--ps-cream);
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  color: var(--ps-gray);
  display: flex; align-items: center; justify-content: center;
}
.j-opt.is-right { border-color: var(--j-good); background: var(--j-good-bg); color: var(--ps-slate-ink); }
.j-opt.is-right .j-optk { background: var(--j-good); border-color: var(--j-good); color: var(--ps-white); }
.j-opt.is-wrong { border-color: var(--j-flag); background: var(--j-flag-bg); color: var(--j-flag-ink); }
.j-opt.is-wrong .j-optk { background: var(--j-flag); border-color: var(--j-flag); color: var(--ps-white); }
.j-opt:disabled { cursor: default; }
.j-opt:disabled:not(.is-right):not(.is-wrong) { opacity: .55; }

.j-why {
  margin-top: 14px; padding: 15px 18px; background: var(--ps-white);
  border-left: 3px solid var(--j-good); font-size: 15.5px; line-height: 1.6;
}
.j-why[hidden] { display: none; }
.j-why b { color: var(--j-good-ink); }
.j-why.is-wrong { border-left-color: var(--j-flag); }
.j-why.is-wrong b { color: var(--j-flag-ink); }

/* ---------- mark-complete ---------- */
/* Shares the quiz's cream ground so the bottom of a card is one footer band
   rather than a stripe of orphaned white under the last question.

   The top padding is NOT optional. .j-mark carries margin-top:18px (it used to
   live in the white body above), and with no top padding or border here that
   margin COLLAPSES THROUGH .j-foot — pushing the whole cream band down 18px
   and painting an 18px white seam across every card. Padding establishes the
   boundary; the margin is zeroed below so spacing stays where it was. */
.j-foot { background: var(--ps-cream); padding: 18px 36px 26px; }
.j-foot .j-mark { margin-top: 0; }
.j-mark {
  display: flex; align-items: center; gap: 11px; margin-top: 18px;
  background: none; border: 1.5px solid var(--ps-slate); border-radius: 30px;
  padding: 9px 20px 9px 12px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ps-slate);
  transition: background .2s, color .2s, border-color .2s;
}
.j-mark .box {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--ps-slate); display: flex; align-items: center;
  justify-content: center; font-size: 12px; line-height: 1;
}
.j-mark:hover { background: var(--ps-slate); color: var(--ps-white); }
.j-mark:hover .box { border-color: var(--ps-white); }
.j-station.is-done .j-mark {
  background: var(--j-good); border-color: var(--j-good); color: var(--ps-white);
}
.j-station.is-done .j-mark .box { border-color: var(--ps-white); }
.j-station.is-done .j-mark .box::after { content: '\2713'; }

/* ---------- the FSBO detour ---------- */
.j-detour {
  position: relative; margin: 6px 0 30px;
  background: var(--ps-slate-deep); color: rgba(255,255,255,.86);
  border: 1px solid var(--ps-slate); box-shadow: var(--shadow-md);
}
.j-detour .j-node {
  background: var(--ps-slate-deep); border-color: var(--j-flag); color: var(--j-flag);
  font-size: 24px;
}
.j-detour-body { padding: 30px 36px 34px; }
.j-detour h3 { color: var(--ps-white); }
.j-detour .j-kicker { color: var(--j-flag); }
.j-detour p { margin-bottom: 16px; }
.j-detour dl { margin: 20px 0 0; display: grid; gap: 2px; }
.j-detour dt {
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--ps-sand); margin-top: 16px;
}
.j-detour dd { margin: 5px 0 0; font-size: 16px; line-height: 1.62; }
.j-detour .j-mine { background: rgba(193,180,151,.12); }

/* ---------- the ledger ---------- */
.j-ledger { width: 100%; border-collapse: collapse; background: var(--ps-white); box-shadow: var(--shadow-sm); }
.j-ledger caption {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ps-sand-deep);
  text-align: left; padding: 20px 24px 14px;
}
.j-ledger th, .j-ledger td {
  text-align: left; vertical-align: top; padding: 12px 24px;
  border-top: 1px solid var(--ps-line); font-size: 15.5px; line-height: 1.45;
}
.j-ledger thead th {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ps-gray);
  border-top: 0;
}
.j-ledger tbody th { font-weight: 600; color: var(--ps-slate-ink); font-size: 15.5px;
  text-transform: none; letter-spacing: 0; font-family: 'Source Sans 3', sans-serif; }
.j-ledger .n { color: var(--ps-gray); width: 1%; white-space: nowrap;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; }
.j-ledger .amt { white-space: nowrap; text-align: right; color: var(--j-flag-ink); font-weight: 600; }
.j-ledger tfoot th, .j-ledger tfoot td {
  border-top: 2px solid var(--ps-slate); padding-top: 16px; padding-bottom: 20px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--ps-slate-ink);
}
.j-ledger tfoot .amt { font-family: 'Abril Fatface', Georgia, serif; font-size: 24px; font-weight: 400; }

/* ---------- finish ---------- */
.j-finish { text-align: center; padding: 46px 36px; background: var(--ps-white); border: 1px solid var(--ps-line); }
.j-finish .j-seal {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--ps-line); color: var(--ps-white);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  transition: background .4s;
}
.j-finish.is-complete .j-seal { background: var(--j-good); }
.j-finish h3 { margin-bottom: 12px; }
.j-finish p { max-width: 54ch; margin: 0 auto 8px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  /* site.css drops .site-header to position:relative at exactly this width.
     The progress bar was still offsetting itself by the header's 74px, so on
     every phone it floated 74px down the viewport with the article scrolling
     past above it. Pin it to the top instead. */
  :root { --j-headh: 0px; }
}

@media (max-width: 720px) {
  /* The route map is 880 units wide. Squeezed into a phone its numbered stops
     are three pixels across and legible to no one, and a hero image you have
     to scroll sideways is worse than no hero image. The sticky progress bar
     already does the orientation job here, and step 1's panel is one scroll
     away. */
  .j-map { display: none; }
  .j-hero { padding-bottom: 46px; }
}

@media (max-width: 860px) {
  /* The rail costs 92px of an already narrow column. Below this width the
     numbers move inline above each card and the line goes away entirely —
     a 3px thread down the side of a phone communicates nothing. */
  .j-path::before, .j-path .j-rail-fill { display: none; }
  .j-unit { padding-left: 0; }
  .j-node, .j-unit-badge {
    position: static; width: 46px; height: 46px; margin-bottom: 14px;
    border-width: 2px; font-size: 16px;
  }
  .j-station .j-node { margin: 18px 0 -6px 20px; }
  .j-station.is-done .j-node::after { font-size: 20px; }
  .j-unit-badge b { font-size: 15px; }
  .j-unit-head { padding: 34px 0 20px; }
  .j-station-body, .j-detour-body { padding: 24px 22px 28px; }
  .j-quiz { padding: 22px 22px 26px; }
  .j-foot { padding: 16px 22px 22px; }
}
@media (max-width: 620px) {
  .j-progress-inner { padding: 10px 18px; gap: 12px; }
  .j-progress-label { font-size: 10.5px; letter-spacing: .08em; }
  .j-reset { font-size: 10px; }
  .j-hero { padding-top: 44px; }
  .j-cost, .j-mine { padding: 16px 18px; }
  .j-cost-amt { font-size: 21px; }
  .j-ledger th, .j-ledger td { padding: 10px 14px; font-size: 14.5px; }
  .j-ledger caption { padding: 16px 14px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .j-progress-fill, .j-path .j-rail-fill, .j-node, .j-finish .j-seal { transition: none; }
}

/* ---------- "where this goes next" cards ----------
   Deliberately NOT .tool-card. That class lives in tools.css, and this page
   has no reason to pull in 400 lines of calculator styling for three links. */
.j-next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.j-next {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.05); border: 1px solid rgba(193,180,151,.3);
  padding: 26px 26px 24px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.j-next:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: var(--ps-sand);
}
.j-next h3 { font-size: 15px; color: var(--ps-white); margin-bottom: 11px; }
.j-next p { color: rgba(255,255,255,.76); font-size: 15.5px; flex: 1; line-height: 1.6; }
.j-next .go {
  margin-top: 18px; font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ps-sand);
}

/* ---------- "where to check me" ----------
   Named outside references. These pages make a lot of factual claims, and
   pointing at the neutral primary sources is the cheapest credibility on the
   site — as well as the honest thing to do. */
.j-sources {
  background: var(--ps-white); border-left: 3px solid var(--ps-sand);
  padding: 28px 32px 30px; box-shadow: var(--shadow-sm);
}
.j-sources h2 {
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--ps-sand-deep); margin-bottom: 12px;
}
.j-sources > p { font-size: 16px; margin-bottom: 16px; }
.j-sources ul { margin: 0; padding-left: 20px; }
.j-sources li { margin-bottom: 10px; font-size: 15.5px; line-height: 1.55; }
.j-sources li::marker { color: var(--ps-sand-deep); }
.j-sources li a {
  color: var(--ps-slate-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: var(--ps-sand); text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.j-sources li a:hover { text-decoration-color: var(--ps-slate-ink); }
.j-fine {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ps-line);
  font-size: 14px; line-height: 1.6; color: var(--ps-gray);
}
@media (max-width: 620px) { .j-sources { padding: 22px 20px 24px; } }