/* ==========================================================================
   HCISS Interior Pages
   Page patterns for content pages, built only on tokens.css values.
   Load order: tokens.css → components.css → pages.css
   ========================================================================== */

/* ---- Base ---- */
body { line-height: 1.6; }
img { max-width: 100%; height: auto; }
.hciss-page { background: var(--hciss-slate-050); color: #1A1A1A; width: 100%; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--hciss-white); color: var(--hciss-navy-800); padding: 10px 16px; z-index: 100; font-family: var(--font-display); font-weight: 600; }
.skip-link:focus { left: 16px; }
:where(a, button, summary, input, textarea):focus-visible { outline: 2px solid var(--hciss-gold-600); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Links on light grounds use navy (gold-600 fails AA on white/slate) */
.on-light a:not([class]) { color: var(--hciss-navy-800); text-decoration: underline; text-decoration-color: var(--hciss-gold-600); text-underline-offset: 3px; }
.on-light a:not([class]):hover { color: var(--hciss-navy-900); text-decoration-thickness: 2px; }
.hciss-eyebrow--on-light { color: var(--hciss-gold-900); }
.hciss-h2, .hciss-h1 { text-wrap: balance; }
.hciss-h2 { font: var(--text-h2); }

/* ---- Buttons as links ---- */
a.hciss-btn-primary, a.hciss-btn-outline { display: inline-flex; align-items: center; text-decoration: none; }
a.hciss-btn-primary:hover { color: var(--hciss-navy-800); text-decoration: none; }
a.hciss-btn-outline:hover { color: var(--hciss-gold-600); text-decoration: none; }
.hciss-btn-ghost-dark { font: var(--text-button); color: var(--hciss-navy-800); border: 1.5px solid var(--hciss-navy-800); border-radius: var(--radius-button); padding: 14px 26px; display: inline-flex; text-decoration: none; transition: background var(--duration-hover) var(--ease-standard); }
.hciss-btn-ghost-dark:hover { background: rgba(19,35,63,0.06); color: var(--hciss-navy-800); text-decoration: none; }
.text-link { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--hciss-gold-600); }
.actions { display: flex; align-items: center; gap: 18px 30px; flex-wrap: wrap; }

/* ---- Nav ---- */
.site-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--space-section-x); background: var(--hciss-white); border-bottom: 1px solid var(--hciss-border); }
.site-nav .logo img { height: 60px; width: auto; display: block; }
#nav-links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
#nav-links > li { position: relative; }
#nav-links a.hciss-navlink, .nav-parent { font: var(--text-nav); font-weight: 500; color: var(--hciss-navy-900); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.nav-parent::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
#nav-links a[aria-current="page"], .nav-parent.is-active { color: var(--hciss-navy-800); box-shadow: inset 0 -2px 0 var(--hciss-gold-600); }
.nav-sub { position: absolute; top: calc(100% + 10px); left: -18px; min-width: 290px; list-style: none; margin: 0; padding: 8px; background: var(--hciss-white); border: 1px solid var(--hciss-border); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(11,18,32,0.10); display: none; }
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
#nav-links > li:hover > .nav-sub, #nav-links > li:focus-within > .nav-sub { display: block; }
.nav-sub a { display: block; padding: 10px 12px; border-radius: 6px; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--hciss-navy-800); text-decoration: none; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--hciss-slate-050); color: var(--hciss-navy-900); text-decoration: none; box-shadow: none; }
.nav-sub a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--hciss-gold-600); }
.nav-right { display: flex; align-items: center; gap: 14px; }
@media (max-width: 1100px) { #nav-links { gap: 20px; } .site-nav { padding-inline: 32px; } }
@media (max-width: 880px) {
  .site-nav { padding: 14px var(--space-section-x-mobile); }
  .site-nav .logo img { height: 44px; }
  #nav-links { align-items: stretch !important; max-height: calc(100vh - 80px); overflow-y: auto; }
  #nav-links > li { width: 100%; }
  .nav-parent { padding: 14px 24px; width: 100%; font-weight: 600; }
  .nav-parent::after { display: none; }
  .nav-sub { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 8px 12px; min-width: 0; }
  .nav-sub a { padding: 10px 24px; }
  .nav-cta { display: none; }
}

/* ---- Interior hero ---- */
.page-hero { position: relative; background: var(--hciss-navy-800); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.07) 1px, transparent 0); background-size: 26px 26px; padding: 72px var(--space-section-x) 80px; overflow: hidden; }
.page-hero-inner { max-width: var(--space-container-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.page-hero-copy { max-width: 720px; }
.page-hero .hciss-h1 { font-size: 46px; }
.page-hero .hciss-body-lg { max-width: 640px; }
.page-hero-art { width: 280px; }
.page-hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .page-hero-inner { grid-template-columns: 1fr; } .page-hero-art { display: none; } }
@media (max-width: 640px) { .page-hero { padding: 52px var(--space-section-x-mobile) 60px; } .page-hero .hciss-h1 { font-size: 34px; } }
.crumbs { font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-ice-200); margin-bottom: 26px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--hciss-line-3); }
.crumbs a { color: var(--hciss-ice-200); }
.crumbs a:hover { color: var(--hciss-gold-500); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 30px; }
.hero-tag { font: var(--text-label); letter-spacing: 0.06em; color: var(--hciss-slate-050); border: 1px solid var(--hciss-line-3); border-radius: var(--radius-badge); padding: 5px 9px; }

/* ---- Section rhythm ---- */
@media (max-width: 640px) {
  .hciss-section { padding: 60px var(--space-section-x-mobile); }
  .hciss-section--compact { padding: 44px var(--space-section-x-mobile); }
  .hciss-section--cta { padding: 68px var(--space-section-x-mobile); }
  .hciss-h2 { font-size: 26px; }
}
.section-head { margin-bottom: 40px; max-width: 700px; }
.section-head .hciss-eyebrow { display: block; margin-bottom: 14px; }
.section-head .hciss-body { margin-bottom: 0; }
.hciss-section--dark .hciss-body, .hciss-section--hero .hciss-body { color: var(--hciss-ice-200); }
.mono-label { font: var(--text-eyebrow); font-size: 12px; letter-spacing: 0.12em; color: var(--hciss-navy-700); text-transform: uppercase; display: block; margin-bottom: 20px; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.prose { display: grid; gap: 18px; max-width: 680px; }
.prose p { font: var(--text-body); color: var(--hciss-navy-700); margin: 0; }
.prose p strong { color: var(--hciss-navy-800); font-weight: 600; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.hciss-grid-4 { gap: 22px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.grid-3 > *, .grid-2 > *, .hciss-grid-4 > * { min-width: 0; }
.hciss-card p { margin: 0; }
.hciss-card .hciss-h3 { margin: 0; }
.card-meta { font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-navy-700); }
.card-list { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hciss-border); display: grid; gap: 7px; }
.card-list li { font: var(--text-body-sm); color: var(--hciss-navy-800); padding-left: 18px; position: relative; }
.card-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--hciss-gold-600); }
.card-foot { margin-top: auto; padding-top: 4px; }
.card-foot a { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--hciss-navy-800); text-decoration: underline; text-decoration-color: var(--hciss-gold-600); text-underline-offset: 4px; }
.hciss-card.is-current { border-color: var(--hciss-gold-600); box-shadow: 0 0 0 1px var(--hciss-gold-600); }

/* Dark-ground items (trust-style) */
.dark-item { display: flex; flex-direction: column; gap: 12px; }
.dark-item .t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--hciss-slate-050); }
.dark-item .d { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--hciss-ice-200); }

/* Problem chips (homepage gap strip pattern) */
.gap-chip { display: flex; align-items: flex-start; gap: 14px; padding: 22px; background: var(--hciss-slate-050); border-radius: 8px; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--hciss-navy-800); font-weight: 500; }
.gap-chip svg { flex-shrink: 0; }

/* ---- Ordered journey (sequence is real) ---- */
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: j; border-top: 2px solid var(--hciss-border); }
.journey li { counter-increment: j; padding: 22px 22px 0 0; position: relative; display: grid; gap: 8px; align-content: start; }
.journey li::before { content: "Step " counter(j); font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-navy-700); }
.journey li::after { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--hciss-white); border: 2px solid var(--hciss-line-3); }
.journey li.is-current::after { background: var(--hciss-gold-600); border-color: var(--hciss-gold-600); }
.journey li.is-current::before { color: var(--hciss-gold-900); }
.journey .hciss-h3 { font-size: 16.5px; }
.journey .hciss-h3 a { color: var(--hciss-navy-800); text-decoration: underline; text-decoration-color: var(--hciss-gold-600); text-underline-offset: 4px; }
.journey p { font: var(--text-body-sm); color: var(--hciss-navy-700); margin: 0; }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 560px) { .journey { grid-template-columns: 1fr; } }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 1px solid var(--hciss-border); }
.steps li:last-child { border-bottom: 1px solid var(--hciss-border); }
.steps li::before { content: counter(s, decimal-leading-zero); font: var(--text-eyebrow); color: var(--hciss-gold-900); padding-top: 2px; }
.steps .hciss-h3 { font-size: 16.5px; margin: 0 0 4px; }
.steps p { font: var(--text-body-sm); color: var(--hciss-navy-700); margin: 0; }

/* ---- Rule list ---- */
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rule-list li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 28px; padding: 20px 0; border-top: 1px solid var(--hciss-border); }
.rule-list li:last-child { border-bottom: 1px solid var(--hciss-border); }
.rule-list .hciss-h3 { font-size: 16.5px; margin: 0; }
.rule-list p { font: var(--text-body-sm); color: var(--hciss-navy-700); margin: 0; }
.hciss-section--dark .rule-list li { border-color: var(--hciss-line-1); }
.hciss-section--dark .rule-list p { color: var(--hciss-ice-200); }
@media (max-width: 640px) { .rule-list li { grid-template-columns: 1fr; gap: 6px; } }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; background: var(--hciss-white); border: 1px solid var(--hciss-border); border-radius: var(--radius-card); }
table.data { width: 100%; border-collapse: collapse; min-width: 560px; font-family: var(--font-body); font-size: 14.5px; }
table.data th { text-align: left; font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-navy-700); padding: 14px 18px; background: var(--hciss-slate-050); border-bottom: 1px solid var(--hciss-border); }
table.data td { padding: 14px 18px; border-bottom: 1px solid var(--hciss-border); color: var(--hciss-navy-700); vertical-align: top; line-height: 1.5; }
table.data tr:last-child td { border-bottom: 0; }
table.data td:first-child { color: var(--hciss-navy-800); font-weight: 600; }
table.data td.code { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.who { display: inline-flex; font: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-badge); white-space: nowrap; }
.who--agent { background: rgba(19,35,63,0.08); color: var(--hciss-navy-900); }
.who--analyst { background: rgba(201,151,28,0.18); color: var(--hciss-gold-900); }
.who--you { background: var(--hciss-navy-900); color: var(--hciss-slate-050); }

/* ---- Fact strip ---- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; border-top: 1px solid var(--hciss-line-3); }
.facts div { padding: 18px 20px 0 0; }
.facts dt { font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-ice-200); }
.facts dd { margin: 6px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--hciss-slate-050); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }

/* ---- People ---- */
.person { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; align-items: start; }
.avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--hciss-navy-900); color: var(--hciss-gold-500); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 0.02em; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person .role { font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-gold-900); margin: 4px 0 10px; }
.person p { font: var(--text-body-sm); color: var(--hciss-navy-700); margin: 0 0 10px; }
.person .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.person .tags span { font: var(--text-label); letter-spacing: 0.04em; color: var(--hciss-navy-800); background: var(--hciss-slate-050); border: 1px solid var(--hciss-border); border-radius: var(--radius-badge); padding: 3px 7px; }
@media (max-width: 480px) { .person { grid-template-columns: 1fr; } }
.advisor { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--hciss-border); }
.advisor .n { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--hciss-navy-800); }
.advisor .r { font: var(--text-body-sm); color: var(--hciss-navy-700); }

/* ---- Resources ---- */
.res-list { list-style: none; margin: 0; padding: 0; display: grid; }
.res-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hciss-border); }
.res-list li:last-child { border-bottom: 1px solid var(--hciss-border); }
.res-type { font: var(--text-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hciss-navy-700); }
.res-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--hciss-navy-800); }
.res-list a.res-go { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--hciss-navy-800); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--hciss-gold-600); text-underline-offset: 4px; }
@media (max-width: 640px) { .res-list li { grid-template-columns: 1fr; gap: 6px; } }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--hciss-border); }
.faq details { border-bottom: 1px solid var(--hciss-border); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--hciss-navy-800); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-family: var(--font-mono); font-size: 22px; color: var(--hciss-gold-900); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { font: var(--text-body); color: var(--hciss-navy-700); margin: 0; padding: 0 0 22px; max-width: 70ch; }

/* ---- CTA band (homepage pattern) ---- */
.cta-band { background: var(--hciss-navy-800); }
.cta-band .inner { max-width: 640px; margin: 0 auto; }
.cta-band .hciss-h2 { margin-bottom: 16px; }
.cta-band p { font: var(--text-body); color: var(--hciss-ice-200); margin: 0 0 34px; }
.cta-band .actions { justify-content: center; }

/* ---- Forms ---- */
.form { display: grid; gap: 16px; background: var(--hciss-white); border: 1px solid var(--hciss-border); border-radius: var(--radius-card); padding: 28px; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr; } .form { padding: 20px; } }
.form label { display: grid; gap: 6px; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--hciss-navy-800); }
.form input[type=text], .form input[type=email], .form textarea { font: var(--text-body); padding: 11px 12px; border: 1px solid var(--hciss-border); border-radius: var(--radius-button); background: var(--hciss-slate-050); color: #1A1A1A; width: 100%; }
.form fieldset { border: 1px solid var(--hciss-border); border-radius: var(--radius-button); padding: 14px 16px; margin: 0; display: grid; gap: 8px; }
.form legend { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--hciss-navy-800); padding: 0 6px; }
.form .opt { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form .opt input { margin-top: 4px; accent-color: var(--hciss-gold-600); width: 16px; height: 16px; flex: none; }
.form .note { font: var(--text-body-sm); color: var(--hciss-navy-700); margin: 0; }
.form-status { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--hciss-navy-800); margin: 0; min-height: 1em; }
.form button { justify-self: start; }

.notice { font: var(--text-body-sm); color: var(--hciss-navy-700); border: 1px dashed var(--hciss-gold-border); background: rgba(201,151,28,0.06); border-radius: var(--radius-card); padding: 16px 18px; max-width: 900px; }
.anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.anchor-nav a { font: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hciss-slate-050); border: 1px solid var(--hciss-line-3); border-radius: var(--radius-badge); padding: 7px 10px; }
.anchor-nav a:hover { border-color: var(--hciss-gold-600); color: var(--hciss-gold-500); text-decoration: none; }

/* ---- Footer ---- */
.site-footer { padding: 52px var(--space-section-x) 32px; background: var(--hciss-slate-050); border-top: 1px solid var(--hciss-border); }
.site-footer .top { max-width: var(--space-container-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.site-footer .brand { max-width: 320px; }
.site-footer .brand img { height: 54px; width: auto; display: block; margin-bottom: 14px; }
.site-footer .brand p { font: var(--text-body-sm); font-size: 14px; color: var(--hciss-navy-700); margin: 0; }
.site-footer .cols { display: flex; gap: 56px; flex-wrap: wrap; }
.site-footer .col { display: flex; flex-direction: column; gap: 10px; }
.site-footer .col .hciss-label { margin-bottom: 4px; }
.site-footer .col a { font-family: var(--font-body); font-size: 14px; color: var(--hciss-navy-800); }
.site-footer .col a:hover { color: var(--hciss-navy-900); }
.site-footer .base { max-width: var(--space-container-max); margin: 32px auto 0; padding-top: 24px; border-top: 1px solid var(--hciss-border); font-family: var(--font-body); font-size: 13px; color: var(--hciss-navy-700); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .site-footer { padding: 44px var(--space-section-x-mobile) 28px; } .site-footer .cols { gap: 32px; } }
.grid-3 .person { grid-template-columns: 1fr; gap: 16px; }
.grid-3 .person .avatar { width: 64px; height: 64px; font-size: 20px; }
@media (max-width: 880px) {
  #nav-links a.hciss-navlink { padding: 14px 24px; display: block; }
  #nav-links a[aria-current="page"], .nav-parent.is-active { box-shadow: none; color: var(--hciss-gold-900); }
  .nav-sub a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--hciss-gold-600); }
  .nav-right a.nav-cta { display: none; }
  #nav-links { border-top: 1px solid var(--hciss-border); }
}