.project-guide-hero { padding:3rem 0 4.5rem; background:radial-gradient(circle at 85% 28%,rgba(242,181,31,.24),transparent 27%),linear-gradient(115deg,#101010,#202020 72%,#302715); color:#fff; }
.project-guide-hero .breadcrumb { margin-bottom:3.5rem; }
.project-guide-hero .breadcrumb a { color:#ccc; }
.project-guide-hero__grid { display:grid; grid-template-columns:1.2fr .8fr; gap:4rem; align-items:end; }
.project-guide-hero__badges { display:flex; flex-wrap:wrap; gap:.5rem; }
.project-guide-hero__badges span { padding:.35rem .65rem; border:1px solid #4a4a4a; border-radius:999px; color:#ccc; font-size:.68rem; font-weight:850; text-transform:uppercase; }
.project-guide-hero__badges span:nth-child(2) { border-color:#385c3f; background:#1e3323; color:#9bd4a7; }
.project-guide-hero h1 { max-width:900px; margin:1rem 0; font-size:clamp(3.1rem,6vw,6rem); letter-spacing:-.06em; }
.project-guide-hero__grid > div > p { max-width:760px; color:#ccc; font-size:1.15rem; }
.project-guide-hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.project-guide-hero .button--outline { border-color:#666; color:#fff; }
.project-guide-hero aside { padding:1.8rem; border:1px solid rgba(242,181,31,.3); border-radius:22px; background:rgba(255,255,255,.04); }
.project-guide-hero aside > span { color:var(--color-yellow); font-size:.7rem; font-weight:900; text-transform:uppercase; }
.project-guide-hero aside > strong { display:block; margin:.6rem 0 1rem; font-size:1.4rem; }
.project-guide-hero aside ul { margin:0; padding:0; list-style:none; }
.project-guide-hero aside li { padding:.45rem 0; border-top:1px solid rgba(255,255,255,.1); color:#bbb; font-size:.84rem; }
.project-guide-hero aside li::before { margin-right:.5rem; color:var(--color-yellow); content:"✓"; }

.project-guide-status { position:sticky; z-index:20; top:84px; padding:.8rem 0; border-bottom:1px solid #ddd; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); }
.project-guide-status .container { display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:1rem; }
.project-guide-status .container > div:first-child { display:flex; flex-direction:column; }
.project-guide-status span { color:var(--color-maroon); font-size:.65rem; font-weight:900; text-transform:uppercase; }
.project-guide-status strong { font-size:.9rem; }
.project-guide-status__track { overflow:hidden; height:9px; border-radius:999px; background:#e4e4e4; }
.project-guide-status__track i { display:block; width:0; height:100%; border-radius:inherit; background:var(--color-yellow); transition:width .2s ease; }
.project-guide-status button { border:0; background:transparent; color:#777; font-size:.7rem; font-weight:800; }

.project-guide-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:3rem; align-items:start; }
.project-guide-toc { position:sticky; top:155px; padding:1.2rem; border:1px solid #ddd; border-radius:17px; background:#f7f7f7; }
.project-guide-toc > span { display:block; margin-bottom:.8rem; color:var(--color-maroon); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.project-guide-toc nav { display:grid; }
.project-guide-toc a { padding:.5rem 0; border-top:1px solid #ddd; font-size:.74rem; font-weight:750; }
.project-guide-content { min-width:0; }
.guide-section { padding:1rem 0 3.5rem; border-bottom:1px solid #ddd; scroll-margin-top:155px; }
.guide-section + .guide-section { padding-top:3.5rem; }
.guide-section__label { display:block; margin-bottom:.65rem; color:var(--color-maroon); font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.guide-section h2 { max-width:900px; margin-bottom:1rem; font-size:clamp(2.2rem,4vw,4rem); letter-spacing:-.04em; }
.guide-section h3 { margin:1.5rem 0 .65rem; }
.guide-lead { max-width:930px; color:#555; font-size:1.15rem; }
.guide-outcome-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.5rem; }
.guide-outcome-grid article { padding:1.2rem; border:1px solid #ddd; border-radius:14px; }
.guide-outcome-grid strong { display:block; margin-bottom:.5rem; }
.guide-outcome-grid p { margin:0; color:#666; font-size:.84rem; }
.guide-sinhala-note { margin-top:1.4rem; padding:1.2rem; border-left:4px solid var(--color-yellow); border-radius:0 12px 12px 0; background:#fff5dc; }
.guide-sinhala-note strong { display:block; margin-bottom:.4rem; color:#775400; font-size:.75rem; }
.guide-sinhala-note p { margin:0; }
.guide-path { display:flex; align-items:center; gap:.5rem; overflow-x:auto; padding:.3rem 0 1rem; }
.guide-path span { flex:0 0 auto; padding:.55rem .8rem; border:1px solid #ddd; border-radius:999px; font-size:.78rem; font-weight:800; }
.guide-path i { color:var(--color-yellow); font-style:normal; font-weight:900; }
.guide-concept-links { display:flex; flex-wrap:wrap; gap:.5rem; }
.guide-concept-links a { padding:.5rem .7rem; border-radius:999px; background:#f0f0f0; font-size:.76rem; font-weight:750; }
.guide-callout,.guide-caution { display:grid; grid-template-columns:180px 1fr; gap:1rem; margin-top:1.5rem; padding:1.1rem; border-radius:13px; background:#202020; color:#fff; }
.guide-callout strong,.guide-caution strong { color:var(--color-yellow); }
.guide-callout p,.guide-caution p { margin:0; color:#ccc; }
.guide-caution { background:#fff0f0; color:#222; }
.guide-caution strong { color:var(--color-maroon); }
.guide-caution p { color:#555; }
.guide-requirements { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.guide-requirements > div { padding:1.2rem; border:1px solid #ddd; border-radius:14px; }
.guide-requirements h3 { margin:0 0 .7rem; }
.guide-requirements ul { margin:0; padding-left:1.1rem; }
.guide-requirements li { margin:.35rem 0; color:#555; font-size:.84rem; }
.guide-download-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.guide-download-grid a { min-height:145px; padding:1.1rem; border:1px solid #ddd; border-radius:14px; }
.guide-download-grid span,.guide-download-grid strong,.guide-download-grid small { display:block; }
.guide-download-grid span { color:var(--color-maroon); font-size:.66rem; font-weight:900; text-transform:uppercase; }
.guide-download-grid strong { margin:.65rem 0 .35rem; }
.guide-download-grid small { color:#777; }
.guide-code { overflow-x:auto; padding:1.2rem; border-radius:14px; background:#1d1d1d; color:#e8e8e8; }
.guide-architecture { display:flex; align-items:stretch; gap:.5rem; overflow-x:auto; padding-bottom:.8rem; }
.guide-architecture > div { flex:1 0 180px; padding:1rem; border:1px solid #ddd; border-radius:13px; }
.guide-architecture > i { align-self:center; color:var(--color-yellow); font-style:normal; font-weight:900; }
.guide-architecture span { color:var(--color-maroon); font-size:.68rem; font-weight:900; }
.guide-architecture strong { display:block; margin:.55rem 0 .35rem; }
.guide-architecture p { margin:0; color:#666; font-size:.8rem; }

.guide-section--milestones { position:relative; }
.guide-section--milestones::before { position:absolute; top:3.5rem; right:0; width:48px; height:4px; border-radius:4px; background:var(--color-yellow); content:""; }
.guide-action-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.guide-action-grid > div { padding:1.1rem; border:1px solid #ddd; border-radius:14px; }
.guide-action-grid h3 { margin:0 0 .7rem; }
.guide-action-grid ol,.guide-action-grid ul { margin:0; padding-left:1.1rem; }
.guide-action-grid li { margin:.35rem 0; color:#555; font-size:.82rem; }
.guide-checkpoint { margin-top:1.5rem; padding:1.1rem; border:2px solid #e0aa20; border-radius:14px; background:#fff8e5; }
.guide-checkpoint label { display:flex; align-items:flex-start; gap:.8rem; cursor:pointer; }
.guide-checkpoint input { flex:0 0 auto; width:22px; height:22px; margin-top:.15rem; accent-color:var(--color-yellow); }
.guide-checkpoint span { font-size:.88rem; }
.guide-checkpoint span strong { display:block; margin-bottom:.2rem; }
.guide-checkpoint small { display:block; margin: .6rem 0 0 2.85rem; color:#7a632a; }
.guide-example { padding:1.2rem; border:1px solid #ddd; border-radius:14px; background:#f7f7f7; }
.guide-example > span { color:var(--color-maroon); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.guide-example h3 { margin:.5rem 0; }
.guide-example p { margin:0; }
.guide-question-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; padding:0; list-style:none; }
.guide-question-list li { padding:.8rem; border-radius:10px; background:#f4f4f4; }
.guide-decision-table { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.guide-decision-table > div { padding:1rem; border:1px solid #ddd; border-radius:12px; }
.guide-decision-table strong { display:block; margin-bottom:.4rem; }
.guide-decision-table p { margin:0; color:#666; font-size:.82rem; }
.guide-canvas-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.guide-canvas-grid article { display:grid; grid-template-columns:38px 1fr; gap:0 .8rem; padding:1rem; border:1px solid #ddd; border-radius:12px; }
.guide-canvas-grid span { grid-row:span 2; display:grid; width:34px; height:34px; place-items:center; border-radius:9px; background:#fff1c8; color:#6a4b00; font-size:.7rem; font-weight:900; }
.guide-canvas-grid h3 { margin:0 0 .3rem; font-size:1rem; }
.guide-canvas-grid p { margin:0; color:#666; font-size:.8rem; }
.guide-evaluation-grid,.guide-risk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.guide-evaluation-grid > div,.guide-risk-grid article { padding:1rem; border:1px solid #ddd; border-radius:12px; }
.guide-evaluation-grid h3,.guide-risk-grid h3 { margin:0 0 .45rem; }
.guide-evaluation-grid p,.guide-risk-grid p { margin:0; color:#666; font-size:.82rem; }
.guide-table-wrap { overflow-x:auto; }
.guide-table-wrap table { width:100%; min-width:700px; border-collapse:collapse; }
.guide-table-wrap th,.guide-table-wrap td { padding:.8rem; border:1px solid #ddd; text-align:left; vertical-align:top; }
.guide-table-wrap th { background:#242424; color:#fff; font-size:.76rem; }
.guide-table-wrap td { font-size:.82rem; }
.guide-faq { display:grid; gap:.5rem; }
.guide-faq details { padding:1rem; border:1px solid #ddd; border-radius:11px; }
.guide-faq summary { cursor:pointer; font-weight:800; }
.guide-faq p { margin:.8rem 0 0; color:#666; }
.guide-portfolio-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.guide-portfolio-grid > div { padding:1.1rem; border:1px solid #ddd; border-radius:13px; }
.guide-portfolio-grid h3 { margin:0 0 .6rem; }
.guide-portfolio-grid ul { margin:0; padding-left:1.1rem; }
.guide-portfolio-grid li { margin:.3rem 0; color:#555; font-size:.82rem; }
.guide-route-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.guide-route-cards article { padding:1.2rem; border:1px solid #ddd; border-radius:14px; }
.guide-route-cards span { color:var(--color-maroon); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.guide-route-cards h3 { margin:.6rem 0; }
.guide-route-cards p { margin:0; color:#666; font-size:.84rem; }
.guide-final-checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.guide-final-checklist label { display:flex; align-items:center; gap:.6rem; padding:.8rem; border:1px solid #ddd; border-radius:10px; cursor:pointer; }
.guide-final-checklist input { width:19px; height:19px; accent-color:var(--color-yellow); }
.guide-next-project { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:2rem; padding:1.5rem; border-radius:18px; background:#222; color:#fff; }
.guide-next-project span { color:var(--color-yellow); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.guide-next-project h3 { margin:.4rem 0; }
.guide-next-project p { margin:0; color:#aaa; }
.guide-next-project .button { flex:0 0 auto; }

@media (max-width:1050px) {
  .project-guide-hero__grid { grid-template-columns:1fr; gap:2rem; }
  .project-guide-hero aside { max-width:700px; }
  .project-guide-layout { grid-template-columns:1fr; }
  .project-guide-toc { position:static; }
  .project-guide-toc nav { grid-template-columns:repeat(3,1fr); gap:0 .8rem; }
}
@media (max-width:800px) {
  .project-guide-hero .breadcrumb { margin-bottom:2.5rem; }
  .project-guide-status { top:70px; }
  .project-guide-status .container { grid-template-columns:1fr auto; }
  .project-guide-status__track { grid-column:1/-1; grid-row:2; }
  .project-guide-toc nav { grid-template-columns:repeat(2,1fr); }
  .guide-outcome-grid,.guide-download-grid,.guide-action-grid,.guide-portfolio-grid,.guide-route-cards { grid-template-columns:1fr; }
  .guide-requirements,.guide-evaluation-grid,.guide-risk-grid { grid-template-columns:1fr; }
  .guide-next-project { align-items:flex-start; flex-direction:column; }
}
@media (max-width:560px) {
  .project-guide-hero h1 { font-size:clamp(3rem,14vw,4.6rem); }
  .project-guide-status .container { grid-template-columns:1fr; }
  .project-guide-status button { text-align:left; }
  .project-guide-toc nav,.guide-question-list,.guide-decision-table,.guide-canvas-grid,.guide-final-checklist { grid-template-columns:1fr; }
  .guide-callout,.guide-caution { grid-template-columns:1fr; }
  .guide-section--milestones::before { display:none; }
}

/* Compact, action-first project guide */
.compact-guide-width { max-width:980px; }
.compact-guide-hero { padding-bottom:4.5rem; }
.compact-guide-hero__content { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:end; gap:3rem; }
.compact-guide-hero h1 em { color:var(--color-yellow); font-style:normal; }
.compact-project-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; overflow:hidden; border:1px solid #4b4432; border-radius:18px; background:#4b4432; }
.compact-project-facts span { padding:1.1rem; background:#252525; }
.compact-project-facts small,.compact-project-facts strong { display:block; }
.compact-project-facts small { margin-bottom:.3rem; color:#aaa; font-size:.68rem; font-weight:800; text-transform:uppercase; }
.compact-project-facts strong { color:#fff; }
.compact-project-note { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:1rem; color:#555; font-size:.84rem; }
.compact-project-note strong { color:#222; }
.compact-project-intro { padding-top:3.5rem; }
.compact-project-section + .compact-project-section { margin-top:3rem; padding-top:3rem; border-top:1px solid #ddd; }
.compact-project-section h2 { margin:.65rem 0 .7rem; font-size:clamp(2rem,4vw,3.2rem); }
.compact-project-section p { max-width:760px; color:#666; }
.compact-tag-list { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.2rem; }
.compact-tag-list span { padding:.55rem .85rem; border-radius:999px; background:#fff0c7; font-size:.8rem; font-weight:800; }
.compact-skill-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1rem; }
.compact-skill-grid span { padding:1rem; border:1px solid #ddd; border-radius:12px; font-weight:750; }
.compact-requirement-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.65rem; margin-top:1rem; }
.compact-requirement-grid div { padding:1rem; border-radius:12px; background:#f3f3f3; }
.compact-requirement-grid small,.compact-requirement-grid strong { display:block; }
.compact-requirement-grid small { margin-bottom:.35rem; color:#777; font-size:.67rem; font-weight:850; text-transform:uppercase; }
.compact-requirement-grid strong { font-size:.86rem; }
.compact-step { margin-top:1.2rem; overflow:hidden; border:1px solid #d7d7d7; border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.04); }
.compact-step > header { display:flex; gap:1rem; padding:1.4rem 1.5rem; border-bottom:1px solid #e5e5e5; }
.compact-step > header > span { flex:0 0 auto; color:var(--color-maroon); font-size:.7rem; font-weight:900; text-transform:uppercase; }
.compact-step > header h2 { margin:-.25rem 0 .25rem; font-size:1.55rem; }
.compact-step > header p { margin:0; color:#666; }
.compact-step__body { display:grid; gap:1rem; padding:1.5rem; }
.compact-format,.compact-example { padding:1rem; border-radius:11px; background:#f2f2f2; }
.compact-format strong,.compact-example strong { display:block; margin-bottom:.45rem; font-size:.75rem; text-transform:uppercase; }
.compact-format code { color:#222; white-space:normal; }
.compact-example { border-left:4px solid var(--color-yellow); background:#fff6df; }
.compact-example p { margin:0; }
.compact-example--split { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.compact-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.compact-field-grid--three { grid-template-columns:repeat(3,1fr); }
.compact-field { display:grid; gap:.45rem; }
.compact-field > span { font-size:.78rem; font-weight:850; }
.compact-field input,.compact-field textarea,.compact-answer-table textarea { width:100%; padding:.8rem; border:1px solid #cfcfcf; border-radius:9px; background:#fff; font:inherit; resize:vertical; }
.compact-field input:focus,.compact-field textarea:focus,.compact-answer-table textarea:focus { outline:3px solid rgba(246,181,24,.25); border-color:#c98d00; }
.compact-answer-table { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; }
.compact-answer-table label { display:grid; grid-template-columns:110px 1fr; align-items:start; overflow:hidden; border:1px solid #ddd; border-radius:10px; }
.compact-answer-table label > span { padding:.85rem; font-size:.78rem; font-weight:850; }
.compact-answer-table textarea { border:0; border-left:1px solid #ddd; border-radius:0; }
.compact-example-table { border:1px solid #ddd; border-radius:10px; }
.compact-example-table summary { padding:1rem; cursor:pointer; font-weight:850; }
.compact-example-table > div { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #ddd; }
.compact-example-table span { padding:.8rem; border-right:1px solid #ddd; border-bottom:1px solid #ddd; color:#555; font-size:.8rem; }
.compact-example-table strong { display:block; margin-bottom:.2rem; color:#222; }
.compact-methods { display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin:0; padding:0; border:0; }
.compact-methods legend { grid-column:1/-1; margin-bottom:.25rem; font-weight:850; }
.compact-methods label { display:flex; align-items:flex-start; gap:.7rem; padding:1rem; border:1px solid #ddd; border-radius:11px; cursor:pointer; }
.compact-methods input { margin-top:.2rem; accent-color:var(--color-yellow); }
.compact-methods span,.compact-methods strong { display:block; }
.compact-methods span { color:#666; font-size:.8rem; }
.compact-methods strong { margin-bottom:.2rem; color:#222; font-size:.9rem; }
.compact-three-column { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.compact-three-column > div { padding:1rem; border:1px solid #ddd; border-radius:11px; }
.compact-three-column ul { margin:.6rem 0 0; padding-left:1.1rem; }
.compact-three-column li { margin:.3rem 0; color:#666; font-size:.8rem; }
.compact-flow { display:flex; align-items:center; gap:.5rem; overflow-x:auto; padding:1rem; border-radius:12px; background:#222; }
.compact-flow span { flex:1 0 125px; padding:.7rem; border:1px solid #4a4a4a; border-radius:8px; color:#fff; text-align:center; font-size:.75rem; font-weight:750; }
.compact-flow i { color:var(--color-yellow); font-style:normal; font-weight:900; }
.compact-step .guide-checkpoint { margin:0; border-width:0; border-top:1px solid #ead28e; border-radius:0; }
.compact-output-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.65rem; }
.compact-output-grid span { padding:1rem; border-radius:11px; background:#222; color:#fff; font-size:.82rem; font-weight:750; }
.compact-success { margin-top:2rem; padding:1.2rem; border:1px solid #ddd; border-radius:14px; }
.compact-success h3 { display:flex; justify-content:space-between; gap:1rem; margin:0 0 1rem; }
.compact-success h3 small { color:#8a6100; }
.compact-success > div { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.compact-success label { padding:.75rem; border-radius:9px; background:#f3f3f3; cursor:pointer; }
.compact-success input { accent-color:var(--color-yellow); }
.compact-final-checklist label { background:#fff; }
.compact-portfolio { margin-top:2rem; padding:1.3rem; border-left:4px solid var(--color-yellow); border-radius:0 12px 12px 0; background:#fff6df; }
.compact-portfolio span { font-size:.72rem; font-weight:900; text-transform:uppercase; }
.compact-portfolio p { margin:.55rem 0 0; }
.compact-downloads { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-top:1rem; }
.compact-downloads a { display:flex; justify-content:space-between; gap:1rem; padding:1rem; border:1px solid #ddd; border-radius:11px; }
.compact-downloads span { color:#8a6100; font-size:.75rem; font-weight:800; }
.compact-folder { overflow-x:auto; margin-top:1rem; padding:1rem; border-radius:11px; background:#222; }
.compact-folder code { color:#eee; line-height:1.7; }
.compact-code-block { overflow:hidden; border:1px solid #333; border-radius:11px; background:#1d1d1d; }
.compact-code-block > span { display:block; padding:.6rem 1rem; border-bottom:1px solid #3b3b3b; color:var(--color-yellow); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.compact-code-block pre { overflow-x:auto; margin:0; padding:1rem; }
.compact-code-block code { color:#eee; font-size:.82rem; line-height:1.65; }
.compact-question-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.compact-field--wide { grid-column:1/-1; }
.compact-output-grid--six { grid-template-columns:repeat(3,1fr); }
.compact-findings { display:grid; gap:.6rem; margin-top:2rem; }
.compact-findings h3 { margin:0 0 .3rem; }
.compact-findings label { display:grid; grid-template-columns:42px 1fr; align-items:stretch; overflow:hidden; border:1px solid #ddd; border-radius:10px; }
.compact-findings label > span { display:grid; place-items:center; background:#222; color:var(--color-yellow); font-size:.72rem; font-weight:900; }
.compact-findings textarea { min-height:70px; padding:.8rem; border:0; font:inherit; resize:vertical; }
.compact-responsible-check { margin-top:2rem; padding:1.2rem; border-left:4px solid var(--color-yellow); border-radius:0 12px 12px 0; background:#fff6df; }
.compact-responsible-check h3 { margin:0 0 .8rem; }
.compact-responsible-check > div { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.compact-responsible-check label { padding:.7rem; border-radius:8px; background:rgba(255,255,255,.65); font-size:.82rem; cursor:pointer; }
.compact-responsible-check input { margin-right:.4rem; accent-color:var(--color-yellow); }
.compact-example-table--open > div { border-top:0; }
.compact-test-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
.compact-test-grid article { padding:1rem; border:1px solid #ddd; border-radius:11px; }
.compact-test-grid article > span { color:var(--color-maroon); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.compact-test-grid dl { display:grid; gap:.35rem; margin:.8rem 0; }
.compact-test-grid dl div { display:flex; justify-content:space-between; gap:1rem; padding-bottom:.35rem; border-bottom:1px solid #eee; }
.compact-test-grid dt { color:#777; font-size:.77rem; }
.compact-test-grid dd { margin:0; text-align:right; font-size:.77rem; font-weight:750; }
.compact-test-grid article > strong { display:block; color:#705000; font-size:.82rem; }

@media (max-width:900px) {
  .compact-guide-hero__content { grid-template-columns:1fr; }
  .compact-project-facts { max-width:600px; }
  .compact-requirement-grid { grid-template-columns:repeat(2,1fr); }
  .compact-output-grid { grid-template-columns:repeat(2,1fr); }
  .compact-three-column,.compact-field-grid--three { grid-template-columns:1fr; }
  .compact-downloads { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .compact-project-note { align-items:flex-start; flex-direction:column; }
  .compact-skill-grid,.compact-field-grid,.compact-answer-table,.compact-methods,.compact-success > div,.compact-question-grid,.compact-responsible-check > div,.compact-test-grid { grid-template-columns:1fr; }
  .compact-example--split,.compact-example-table > div { grid-template-columns:1fr; }
  .compact-answer-table label { grid-template-columns:1fr; }
  .compact-answer-table textarea { border-top:1px solid #ddd; border-left:0; }
  .compact-output-grid { grid-template-columns:1fr; }
  .compact-field--wide { grid-column:auto; }
}