/* Work outcomes and the exact route from an input to a usable result. */
.hk-outcome-preview { background:#faf9f6; border:1px solid #dedbd3; border-radius:16px; padding:clamp(20px,3vw,34px); }
.hk-outcome-preview h2 { font-size:clamp(20px,2.1vw,28px); line-height:1.6; letter-spacing:-.025em; margin:10px 0 24px; }
.hk-result-scroll { overflow:auto; max-width:100%; border:1px solid #ddd9d2; border-radius:8px; background:white; }
.hk-result-scroll:focus-visible { outline:3px solid #5138ca; outline-offset:3px; }
.hk-result-scroll table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.75; text-align:left; }
.hk-result-scroll th { background:#f0eee8; color:#514a40; font-size:12px; white-space:nowrap; }
.hk-result-scroll th,.hk-result-scroll td { padding:14px 16px; vertical-align:top; border-bottom:1px solid #e6e2dc; overflow-wrap:anywhere; }
.hk-result-scroll tr:last-child td { border-bottom:0; }
.hk-outcome-preview td:first-child { width:50%; font-weight:600; }
.hk-outcome-insight { font-size:15px; line-height:1.9; margin:20px 0 12px; }
.hk-example-caption { color:#6e655b; font-size:12px; line-height:1.8; margin:0; }
.hk-usage-steps { list-style:none; padding:0; margin:28px 0; }
.hk-usage-steps li { display:flex; align-items:flex-start; gap:20px; padding:24px 0; border-top:1px solid #e6e1dc; }
.hk-usage-steps li > span { flex:0 0 2ch; width:2ch; white-space:nowrap; color:#715f8b; font-size:13px; font-weight:700; padding-top:5px; font-variant-numeric:tabular-nums; }
.hk-usage-steps h3 { font-size:19px; line-height:1.6; margin:0 0 8px; }
.hk-usage-steps p { margin:0; line-height:1.9; color:#645b6e; }
.hk-use-explainer { margin:20px 0; border-left:3px solid #725daa; padding:4px 0 4px 18px; }
.hk-use-explainer strong { display:block; margin-bottom:6px; }
.hk-use-explainer p { margin:0; line-height:1.8; color:#645b6e; font-size:14px; }
.hk-step-cta { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.hk-card-method { font-size:12px; color:#6a6077; line-height:1.7; margin:10px 0 16px; }
.hk-result-view { margin-top:20px; }
.hk-result-view section { margin:22px 0; }
.hk-result-view h3 { font-size:18px; margin:0 0 12px; }
.hk-result-view ul { padding-left:20px; line-height:1.9; }
.hk-result-view .hk-result-scroll table { min-width:580px; }
.hk-result-view .hk-result-scroll th { white-space:normal; }
.hk-result-view-status { line-height:1.8; margin:12px 0; color:#62506b; }
.hk-sample-action { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:18px 0; }
.hk-sample-action p { font-size:12px; line-height:1.7; margin:0; color:#6a6077; }
@media(max-width:640px){ .hk-outcome-preview { padding:20px 16px; } .hk-outcome-preview .hk-result-scroll table { min-width:0; } .hk-result-scroll th,.hk-result-scroll td { padding:10px 8px; font-size:12px; } .hk-usage-steps li { gap:12px; padding:20px 0; } .hk-usage-steps h3 { font-size:17px; } .hk-usage-steps p { font-size:14px; } .hk-step-cta > a { width:100%; } }

.hk-result-view td { white-space:pre-line; }

/* Each result remains a semantic table; narrow screens expose every column. */
@media (max-width:640px) {
  .hk-result-scroll { overflow:visible; border:0; background:transparent; }
  .hk-result-scroll table, .hk-result-view .hk-result-scroll table { display:block; min-width:0; width:100%; }
  .hk-result-scroll thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
  .hk-result-scroll tbody { display:grid; gap:12px; }
  .hk-result-scroll tbody tr { display:block; min-width:0; border:1px solid #ddd9d2; border-radius:8px; padding:8px 0; background:#fff; }
  .hk-result-scroll tbody td, .hk-outcome-preview td:first-child { display:block; width:auto; border:0; padding:8px 12px; font-size:14px; font-weight:400; line-height:1.8; }
  .hk-result-scroll tbody td + td { border-top:1px solid #eeeae4; }
  .hk-result-scroll td::before { content:attr(data-label); display:block; margin-bottom:3px; font-size:11px; line-height:1.6; font-weight:700; color:#6d655b; }
}