/* One fixed Indie hacker comparison, with costs inside each route. */
.comparison-section { padding-top: 40px; }
.comparison-section .section-intro { text-align: left; }
.comparison-section .section-intro h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.15; }
.comparison-section .section-intro p { max-width: none; margin: 12px 0 0; font-size: var(--type-label); }
.hours-key { display: inline-block; padding: .02em .16em .06em; border-radius: .18em; color: white; background: var(--ink); }
.time-value-message { margin: 18px 0; font-size: var(--type-label); color: var(--muted); }
.time-value-message strong { color: var(--ink); }
.route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.route { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.route h3 { position: relative; font-size: var(--type-lead); letter-spacing: -.025em; line-height: 1.25; }
.route h3 img { position: absolute; right: -8px; top: -10px; width: 28px; height: 35px; }
.route-verdict { margin-top: 8px; font-size: var(--type-label); color: var(--muted); }
.route-assisted { background: var(--ink); color: white; border-color: var(--ink); }
.route-assisted .route-verdict, .route-assisted .route-steps span, .route-assisted .handoff-promise p { color: #c9cac3; }
.route-assisted h3 { padding-right: 18px; }
.route-steps { list-style: none; counter-reset: route-step; margin: 28px 0; padding: 0; }
.route-steps li { counter-increment: route-step; position: relative; padding: 0 0 19px 27px; font-size: var(--type-label); }
.route-steps li:last-child { padding-bottom: 0; }
.route-steps li:before { content: counter(route-step); position: absolute; left: 0; top: 2px; z-index: 1; width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #b7b5ac; border-radius: 4px; background: var(--paper); font-size: 10px; line-height: 1; font-weight: 600; }
.route-steps li:not(:last-child):after { content: ''; position: absolute; left: 8px; top: 19px; bottom: -2px; width: 1px; background: var(--line); }
.route-steps strong { display: block; font-weight: 600; line-height: 1.4; }
.route-steps span { display: block; color: var(--muted); font-size: var(--type-meta); margin-top: 4px; line-height: 1.5; }
.route-assisted .route-steps li:before { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.route-assisted .route-steps li:after { background: #6b4335; }
.handoff-promise { border-top: 1px solid #4c4d46; padding-top: 24px; margin-bottom: 28px; }
.handoff-promise > strong { font-size: var(--type-title); line-height: 1.12; letter-spacing: -.035em; display: block; }
.handoff-promise p { font-size: var(--type-label); margin-top: 12px; max-width: 31ch; }
.route-budget { margin-top: auto; border-top: 1px solid var(--line); padding-top: 20px; }
.route-time { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.route-time span, .route-total span { font-size: var(--type-meta); color: var(--muted); }
.route-time strong { font-size: var(--type-subheading); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.route-budget dl { margin: 18px 0; min-height: 112px; }
.route-budget dl > div { border: 0; padding: 3px 0; font-size: var(--type-meta); gap: 10px; }
.route-budget dt { color: var(--muted); }
.route-budget dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.route-total { padding-top: 16px; border-top: 1px solid var(--line); }
.route-total span { display: block; }
.route-total strong { display: block; margin-top: 5px; font-size: var(--type-title); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.route-assisted .route-budget, .route-assisted .route-total { border-color: #4c4d46; }
.route-assisted .route-time span, .route-assisted .route-total span, .route-assisted dt { color: #c9cac3; }
.launch-comparison { margin-top: 36px; }
.launch-comparison h3 { font-size: var(--type-subheading); letter-spacing: -.025em; }
.time-ruler { display: flex; justify-content: space-between; margin: 24px 0 16px; color: var(--muted); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.duration-row + .duration-row { margin-top: 18px; }
.duration-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--type-label); }
.duration-label small { color: var(--muted); font-size: var(--type-meta); margin-left: 6px; }
.duration-label > span { font-weight: 600; }
.duration-track { height: 9px; margin-top: 7px; background: #e4e1da; overflow: hidden; border-radius: 2px; }
.duration-bar { width: 100%; height: 100%; background: #89897d; transform: scaleX(var(--progress)); transform-origin: left; }
.duration-assisted .duration-bar { background: var(--orange); }
.comparison-basis, .source-line { font-size: var(--type-meta); color: var(--muted); line-height: 1.6; }
.comparison-basis { margin-top: 22px; }
.source-line { margin-top: 6px; }
.source-line a { text-decoration: underline; text-underline-offset: 3px; }
.source-line a:hover { color: var(--ink); }
@media (max-width: 1100px) { .route { padding: 20px; } .route h3 { font-size: var(--type-body); } }
@media (max-width: 760px) {
  .comparison-section { padding-top: 32px; }
  .route-grid { grid-template-columns: 1fr; gap: 16px; }
  .route-assisted { order: -1; }
  .route { padding: 24px; }
  .route h3 { font-size: var(--type-lead); }
  .route-budget dl { min-height: 0; }
  .route-steps { margin: 24px 0; }
  .time-value-message { margin: 20px 0; }
  .time-ruler span:nth-child(2n) { display: none; }
  .time-ruler span:last-child { display: block; }
  .duration-label small { display: block; margin: 0; }
  .duration-label > span { text-align: right; }
  .launch-comparison h3 { max-width: 24ch; }
}