/* The Yong Healthcare School Platform (1.3.0) — loaded only on /healthcare-schools pages.
   Same ink + gold system as the site. The five platform layers run from deep ink (Attract) to gold (Certify):
   the colour itself tells the story of a visitor becoming a certified graduate. */
:root {
  --l1: #14213A; --l2: #26385B; --l3: #3E5682; --l4: #56698F; --l5: #C9A24A;
  --hc-side: 252px;
  --mint: #EAF4EF; --mint-ink: #1F6B47;
}

/* ------------------------------------------------------------------ page head */
.hc-head { background: var(--ink); color: #fff; position: relative; overflow: hidden; padding: 56px 0 110px; }
.hc-head .wrap { position: relative; z-index: 2; }
.hc-head-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.hc-head-grid.no-photo { grid-template-columns: minmax(0, 1fr); }
.hc-head h1 { color: #fff; font-size: clamp(2.05rem, 3.9vw, 3.2rem); max-width: 19ch; margin-bottom: .4em; }
.hc-head .lead { color: #CDD6E3; max-width: 56ch; }
.hc-head .crumbs { font-size: .88rem; margin-bottom: 18px; color: #AEB9CB; }
.hc-head .crumbs a { color: #D9E0EA; text-decoration: none; }
.hc-head .crumbs a:hover { color: var(--gold-light); }
.hc-head-photo { margin: 0; position: relative; }
.hc-head-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 70px rgba(4, 10, 24, .45); }
.hc-head-photo.portrait img { aspect-ratio: 4 / 4.2; object-position: 50% 20%; }
.hc-head-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid rgba(201, 162, 74, .55); border-radius: 18px; z-index: -1; }
.hc-head .swoosh-line { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; z-index: 1; }
.hc-head-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hc-proof { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: #E3E9F2; font-size: .93rem; }
.hc-proof li { display: inline-flex; gap: 8px; align-items: center; }
.hc-proof .ic { color: var(--gold); width: 1.05em; height: 1.05em; }

/* ------------------------------------------------------------------ shell: side menu + content */
.hc-shell { display: grid; grid-template-columns: var(--hc-side) minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 40px; align-items: start; }
.hc-side { position: sticky; top: 108px; }
.hc-side-name { font: 600 1.02rem/1.3 var(--serif); color: var(--ink); margin: 0 0 14px; padding-left: 14px; }
.hc-side ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.hc-side li a { display: flex; gap: 10px; align-items: center; padding: 9px 12px; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--muted); text-decoration: none; font-size: .95rem; line-height: 1.3; }
.hc-side li a .ic { width: 1.05em; height: 1.05em; color: #9AA4B5; }
.hc-side li a:hover { color: var(--ink); }
.hc-side li a[aria-current="page"] { border-left-color: var(--gold); color: var(--ink); font-weight: 600; background: linear-gradient(90deg, rgba(201,162,74,.12), transparent); }
.hc-side li a[aria-current="page"] .ic { color: var(--bronze); }
.hc-side .btn { margin-top: 22px; width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; }
.hc-main { min-width: 0; }
.hc-main > section + section { margin-top: 72px; }
.hc-main h2 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); max-width: 26ch; }
.hc-main h2 + .lead, .hc-main h2 + p { margin-top: -.1em; }
.hc-intro { font-size: 1.12rem; color: var(--text); max-width: 68ch; }

/* pager */
.hc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--line); }
.hc-pager a { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: #fff; color: var(--ink); }
.hc-pager a:hover { border-color: var(--gold); }
.hc-pager small { color: var(--muted); font-size: .84rem; display: inline-flex; gap: 6px; align-items: center; }
.hc-pager strong { font: 600 1.08rem var(--serif); }
.hc-pager .next { text-align: right; align-items: flex-end; grid-column: 2; }

/* ------------------------------------------------------------------ overview: the student journey ribbon (signature element) */
.hc-journey { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; counter-reset: none; }
.hc-journey::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--l1), var(--l2) 25%, var(--l3) 50%, var(--l4) 75%, var(--l5)); }
.hc-journey li { position: relative; padding: 0 12px; text-align: center; }
.hc-journey .node { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; position: relative;
  box-shadow: 0 0 0 6px var(--paper); }
.hc-journey .node .ic { width: 24px; height: 24px; }
.hc-journey li:nth-child(1) .node { background: var(--l1); }
.hc-journey li:nth-child(2) .node { background: var(--l2); }
.hc-journey li:nth-child(3) .node { background: var(--l3); }
.hc-journey li:nth-child(4) .node { background: var(--l4); }
.hc-journey li:nth-child(5) .node { background: var(--l5); color: var(--ink); }
.hc-journey h3 { font-size: 1.12rem; margin-bottom: .3em; }
.hc-journey p { color: var(--muted); font-size: .93rem; margin: 0; }
.hc-loop { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin: 18px 10% 0 0; color: var(--bronze); font-size: .9rem; font-weight: 500; }
.hc-loop svg { width: 120px; height: 26px; flex: none; }

/* benefits */
.hc-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.hc-benefits > div { padding: 26px 26px 6px 0; }
.hc-benefits > div + div { padding-left: 26px; border-left: 1px solid var(--line); }
.hc-benefits .ic { width: 30px; height: 30px; color: var(--bronze); margin-bottom: 12px; }
.hc-benefits h3 { font-size: 1.28rem; }
.hc-benefits p { color: var(--muted); }

/* today -> with the platform */
.hc-change { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.hc-change th { text-align: left; font: 600 .86rem var(--sans); color: var(--muted); padding: 14px 20px; background: #FAFBFC; border-bottom: 1px solid var(--line); }
.hc-change td { padding: 15px 20px; vertical-align: top; border-bottom: 1px solid var(--line-soft); font-size: .97rem; }
.hc-change tr:last-child td { border-bottom: 0; }
.hc-change td:first-child { color: var(--muted); width: 42%; }
.hc-change td.arrow { width: 40px; padding: 15px 0; color: var(--gold); }
.hc-change td:last-child { color: var(--ink); font-weight: 500; }

.hc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hc-chips li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .94rem; color: var(--ink); }
.hc-chips.dark li { background: var(--ink); color: #fff; border-color: var(--ink); }

.hc-explore { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hc-explore a { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--text); }
.hc-explore a:hover { border-color: var(--gold); }
.hc-explore .ic { grid-row: span 2; width: 26px; height: 26px; color: var(--bronze); margin-top: 2px; }
.hc-explore strong { font: 600 1.08rem var(--serif); color: var(--ink); }
.hc-explore span { color: var(--muted); font-size: .9rem; line-height: 1.45; }

.hc-launch { display: flex; gap: 16px; align-items: flex-start; background: var(--ink); color: #E3E9F2; border-radius: 16px; padding: 24px 26px; }
.hc-launch strong { font: 600 2.4rem/1 var(--serif); color: var(--gold); flex: none; }
.hc-launch p { margin: 0; font-size: 1.04rem; }
.hc-launch small { display: block; color: #AEB9CB; font-size: .86rem; margin-top: 6px; }

/* ------------------------------------------------------------------ platform: the layer stack */
.hc-stack { display: grid; gap: 10px; }
.hc-layer { display: grid; grid-template-columns: 230px minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.hc-layer-name { padding: 18px 20px; color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.hc-layer-name small { font-size: .8rem; opacity: .8; }
.hc-layer-name b { font: 600 1.2rem/1.2 var(--serif); }
.hc-layer-name span { font-size: .84rem; opacity: .85; line-height: 1.35; }
.hc-layer[data-l="1"] .hc-layer-name { background: var(--l1); }
.hc-layer[data-l="2"] .hc-layer-name { background: var(--l2); }
.hc-layer[data-l="3"] .hc-layer-name { background: var(--l3); }
.hc-layer[data-l="4"] .hc-layer-name { background: var(--l4); }
.hc-layer[data-l="5"] .hc-layer-name { background: var(--l5); color: var(--ink); }
.hc-layer-mods { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px 18px; }
.hc-layer-mods a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink);
  text-decoration: none; font-weight: 500; font-size: .93rem; border: 1px solid transparent; }
.hc-layer-mods a:hover { border-color: var(--gold); background: #fff; }
.hc-layer-mods a em { font-style: normal; color: var(--muted); font-size: .8rem; }

.hc-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hc-mod { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 18px; border-top: 4px solid var(--l1); scroll-margin-top: 120px; }
.hc-mod[data-l="2"] { border-top-color: var(--l2); }
.hc-mod[data-l="3"] { border-top-color: var(--l3); }
.hc-mod[data-l="4"] { border-top-color: var(--l4); }
.hc-mod[data-l="5"] { border-top-color: var(--l5); }
.hc-mod:target { box-shadow: 0 0 0 3px rgba(201,162,74,.5); }
.hc-mod small { color: var(--muted); font-size: .82rem; }
.hc-mod h3 { font-size: 1.16rem; margin: 4px 0 .4em; }
.hc-mod p { color: var(--muted); font-size: .95rem; margin: 0; }

.hc-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; }
.hc-defs > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.hc-defs dt { font: 600 1.06rem var(--serif); color: var(--ink); margin-bottom: 4px; }
.hc-defs dd { margin: 0; color: var(--muted); font-size: .96rem; }

/* ------------------------------------------------------------------ numbered steps (real sequences only) */
.hc-steps { list-style: none; margin: 0; padding: 0; counter-reset: hcstep; }
.hc-steps > li { counter-increment: hcstep; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 26px; }
.hc-steps > li::before { content: counter(hcstep); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--gold);
  background: #fff; color: var(--ink); font: 600 1.05rem var(--serif); position: relative; z-index: 1; }
.hc-steps > li::after { content: ""; position: absolute; left: 21.5px; top: 44px; bottom: 0; width: 1.5px; background: var(--line); }
.hc-steps > li:last-child::after { display: none; }
.hc-steps h3 { font-size: 1.14rem; margin: 9px 0 .3em; }
.hc-steps p { color: var(--muted); margin: 0; font-size: .97rem; }
.hc-steps.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
.hc-steps.two > li::after { display: none; }

/* seat status flow */
.hc-flow { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.hc-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-flow-row + .hc-flow-row { margin-top: 16px; }
.hc-flow-label { font-size: .82rem; color: var(--muted); width: 100%; margin-bottom: 2px; }
.hc-state { padding: 8px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: .93rem; }
.hc-state.ok { background: var(--mint); border-color: #BFE0CE; color: var(--mint-ink); }
.hc-state.end { background: #fff; }
.hc-state.wait { background: #FFF7E4; border-color: #EBD49A; color: #6B4E00; }
.hc-flow .ic { color: var(--gold); width: 18px; height: 18px; }

.hc-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hc-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.hc-card .ic { width: 28px; height: 28px; color: var(--bronze); margin-bottom: 10px; }
.hc-card h3 { font-size: 1.14rem; margin-bottom: .35em; }
.hc-card p { color: var(--muted); font-size: .95rem; margin: 0; }
.hc-note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .93rem; margin-top: 16px; }
.hc-note .ic { color: var(--ok); margin-top: 3px; }

.hc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.hc-checks .ic { color: var(--gold); margin-top: 4px; width: 18px; height: 18px; }
.hc-checks.two { grid-template-columns: 1fr 1fr; column-gap: 32px; }

/* tables */
.hc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; -webkit-overflow-scrolling: touch; }
.hc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hc-table th, .hc-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.hc-table thead th { background: #FAFBFC; font: 600 .88rem var(--sans); color: var(--ink); border-bottom: 1px solid var(--line); vertical-align: bottom; }
.hc-table tbody tr:last-child th, .hc-table tbody tr:last-child td { border-bottom: 0; }
.hc-table tbody th { font-weight: 500; color: var(--ink); }
.hc-table td.c, .hc-table th.c { text-align: center; }
.hc-table .yes { color: var(--mint-ink); }
.hc-table .yes .ic { width: 20px; height: 20px; }
.hc-table .no { color: #B9C0CC; }
.hc-table .txt { font-weight: 600; color: var(--ink); font-size: .9rem; }
.hc-table td.muted { color: var(--muted); }
.hc-table.pkg { min-width: 760px; }
.hc-table.pkg tbody th { width: 40%; }
.hc-table.pkg thead th.c { width: 15%; }
.hc-table.pkg thead th b { display: block; font: 600 1rem var(--serif); }
.hc-table .ours { background: #FBF7EC; }

/* package cards */
.hc-pkgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.hc-pkg { border-radius: 14px; padding: 18px; color: #fff; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.hc-pkg:nth-child(1) { background: var(--l2); }
.hc-pkg:nth-child(2) { background: var(--l3); }
.hc-pkg:nth-child(3) { background: var(--l1); }
.hc-pkg:nth-child(4) { background: var(--l5); color: var(--ink); }
.hc-pkg small { opacity: .75; font-size: .8rem; }
.hc-pkg b { font: 600 1.16rem/1.2 var(--serif); }
.hc-pkg span { font-size: .88rem; opacity: .9; line-height: 1.4; }
.hc-pkg a { margin-top: auto; color: inherit; font-size: .88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.hc-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hc-ways .hc-card { border-left: 4px solid var(--gold); }

/* features */
.hc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.hc-filter button { font: 500 .92rem var(--sans); padding: 8px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.hc-filter button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.hc-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hc-feat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.hc-feat[hidden] { display: none; }
.hc-feat h3 { font-size: 1.12rem; margin: 10px 0 .35em; }
.hc-feat p { color: var(--muted); font-size: .95rem; margin: 0; }
.hc-tier { display: inline-block; font: 600 .78rem/1 var(--sans); padding: 6px 10px; border-radius: 999px; }
.hc-tier.enrollment { background: #E7ECF5; color: var(--l2); }
.hc-tier.full { background: var(--ink); color: #fff; }
.hc-tier.addon { background: #F6EDD6; color: var(--bronze); }

/* mockups (fictional "Sample Health Academy") */
.hc-mock-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.hc-mock { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.hc-mock-bar { display: flex; gap: 6px; padding: 12px 14px; background: #F1F3F6; border-bottom: 1px solid var(--line); align-items: center; }
.hc-mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #CDD3DD; }
.hc-mock-bar span { margin-left: 8px; font-size: .78rem; color: var(--muted); }
.hc-mock-body { padding: 22px; }
.hc-mock-body h4 { font-size: 1.05rem; margin-bottom: 4px; }
.hc-mock-caption { font-size: .8rem; color: var(--muted); margin: 8px 2px 0; }
.hc-bar { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; margin: 8px 0 4px; }
.hc-bar > i { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, var(--l3), var(--gold)); border-radius: inherit; }
.hc-kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: .9rem; margin: 14px 0 0; }
.hc-kv dt { color: var(--muted); }
.hc-kv dd { margin: 0; color: var(--ink); font-weight: 500; }
.hc-verify-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.hc-valid { display: inline-flex; gap: 6px; align-items: center; background: var(--mint); color: var(--mint-ink); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: .9rem; }
.hc-qr { width: 76px; height: 76px; flex: none; }
.hc-code { font: 600 .92rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; background: var(--paper); border-radius: 8px; padding: 9px 12px; display: inline-block; margin-top: 6px; }

.hc-renew { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.hc-renew img { border-radius: 16px; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 15%; width: 100%; }
.hc-timeline { display: flex; align-items: center; gap: 0; margin: 22px 0 0; }
.hc-timeline span { flex: 1; text-align: center; font-size: .85rem; color: var(--muted); position: relative; padding-top: 30px; }
.hc-timeline span::before { content: ""; position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); z-index: 1; }
.hc-timeline span::after { content: ""; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: var(--line); }
.hc-timeline span:last-child::before { background: var(--gold); }
.hc-timeline b { display: block; font: 600 1.15rem var(--serif); color: var(--ink); }

.hc-pipeline { display: flex; flex-wrap: wrap; gap: 0; }
.hc-pipeline li { list-style: none; position: relative; padding: 10px 18px 10px 26px; background: #fff; border: 1px solid var(--line); margin: 0 -1px 8px 0; font-weight: 500; font-size: .93rem; color: var(--ink); }
.hc-pipeline li:first-child { border-radius: 10px 0 0 10px; padding-left: 18px; }
.hc-pipeline li:last-child { border-radius: 0 10px 10px 0; background: var(--mint); color: var(--mint-ink); border-color: #BFE0CE; }
.hc-pipeline { padding: 0; margin: 0 0 14px; }

.hc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.hc-photo { margin: 0; }
.hc-photo img { border-radius: 16px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.hc-bound { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ink); border-radius: 14px; padding: 24px 26px; }
.hc-bound ul { margin: 12px 0 0; padding-left: 1.1em; color: var(--muted); columns: 2; column-gap: 28px; }

/* case study */
.hc-cases { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.hc-case { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.hc-case-shot { background: var(--ink); padding: 22px 22px 0; }
.hc-case-shot .frame { border-radius: 10px 10px 0 0; overflow: hidden; box-shadow: 0 20px 50px rgba(4,10,24,.45); }
.hc-case-shot .frame .bar { background: #E9ECF1; height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 9px; }
.hc-case-shot .frame .bar i { width: 7px; height: 7px; border-radius: 50%; background: #C3C9D3; }
.hc-case-shot img { width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; object-position: top; }
.hc-case-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hc-case-body small { color: var(--bronze); font-weight: 600; font-size: .86rem; }
.hc-case-body h3 { font-size: 1.36rem; margin: 0; }
.hc-case-body p { color: var(--muted); margin: 0; }
.hc-case-body .links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.hc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0; }
.hc-facts div { padding: 14px 10px 12px 0; }
.hc-facts div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.hc-facts b { display: block; font: 600 1.5rem/1.1 var(--serif); color: var(--ink); }
.hc-facts span { font-size: .84rem; color: var(--muted); }
.hc-case.alt { background: var(--ink); border-color: var(--ink); }
.hc-case.alt .hc-case-body h3 { color: #fff; }
.hc-case.alt .hc-case-body p { color: #CDD6E3; }
.hc-case.alt .hc-case-body small { color: var(--gold-light); }
.hc-case.alt a { color: var(--gold-light); }

/* estimate form */
.hc-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.hc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hc-form legend { font-weight: 600; font-size: .94rem; color: var(--ink); margin-bottom: 8px; padding: 0; }
.hc-form .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-form .row.three { grid-template-columns: 2fr 1fr; }
.hc-aside { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; position: sticky; top: 108px; }
.hc-aside h2 { font-size: 1.2rem; }
.hc-aside ol { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: .94rem; display: grid; gap: 10px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .hc-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 36px; }
  .hc-pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-form-grid { grid-template-columns: 1fr; }
  .hc-aside { position: static; }
}
@media (max-width: 900px) {
  .hc-head { padding: 40px 0 90px; }
  .hc-head-grid { grid-template-columns: 1fr; gap: 34px; }
  .hc-head-photo { max-width: 560px; }
  .hc-head-photo::before { display: none; }
  .hc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .hc-side { position: sticky; top: 70px; z-index: 30; background: var(--paper); margin: 0 calc(var(--gut) * -1) 28px; padding: 10px var(--gut);
    border-bottom: 1px solid var(--line); }
  .hc-side-name, .hc-side .btn { display: none; }
  .hc-side ol { display: flex; gap: 6px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .hc-side ol::-webkit-scrollbar { display: none; }
  .hc-side li a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; margin: 0; padding: 7px 13px; background: #fff; font-size: .9rem; }
  .hc-side li a .ic { display: none; }
  .hc-side li a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
  .hc-journey { grid-template-columns: 1fr; gap: 0; }
  .hc-journey::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--l1), var(--l2) 25%, var(--l3) 50%, var(--l4) 75%, var(--l5)); }
  .hc-journey li { display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px; text-align: left; padding: 0 0 22px; }
  .hc-journey .node { grid-row: span 2; margin: 0; }
  .hc-journey h3 { margin-top: 6px; }
  .hc-loop { justify-content: flex-start; margin: 0 0 0 74px; }
  .hc-benefits { grid-template-columns: 1fr; }
  .hc-benefits > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .hc-layer { grid-template-columns: 1fr; }
  .hc-mods, .hc-defs, .hc-feats, .hc-cards3, .hc-ways, .hc-mock-pair, .hc-renew, .hc-split, .hc-cases, .hc-steps.two, .hc-checks.two { grid-template-columns: 1fr; }
  .hc-renew img { max-width: 360px; }
}
@media (max-width: 640px) {
  .hc-explore { grid-template-columns: 1fr; }
  .hc-pkgs { grid-template-columns: 1fr; }
  .hc-pkg { min-height: 0; }
  .hc-facts { grid-template-columns: 1fr 1fr; }
  .hc-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hc-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hc-change thead { display: none; }
  .hc-change tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
  .hc-change td { display: block; padding: 0; border: 0; width: auto !important; }
  .hc-change td.arrow { padding: 4px 0; transform: rotate(90deg); width: 20px !important; }
  .hc-form .choices { grid-template-columns: 1fr 1fr; }
  .hc-form .row.three { grid-template-columns: 1fr; }
  .hc-bound ul { columns: 1; }
  .hc-pager { grid-template-columns: 1fr; }
  .hc-pager .next { grid-column: 1; }
  .hc-launch { flex-direction: column; gap: 8px; }
}
@media (max-width: 900px) {
  .cta-band .btn { white-space: normal; text-align: center; justify-content: center; }
  .hc-journey li:last-child { padding-bottom: 0; }
  .hc-journey::before { bottom: 60px; }
}
@media (max-width: 640px) {
  .hc-table.pkg { min-width: 640px; }
  .hc-table.pkg tbody th, .hc-table.pkg thead th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px;
    background: #fff; box-shadow: 1px 0 0 var(--line); font-size: .86rem; }
  .hc-table.pkg thead th:first-child { background: #FAFBFC; }
}