/* Hotel in a Box — page layout on top of the design system. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* hero: light inset frame, same pattern as the home */
.hib-hero { padding-top: 14px; }
.hib-hero .hero-frame { margin: 0 16px; }
.hib-hero .hero-frame__inner { gap: 24px; padding-block: 112px 104px; }
.hib-hero .t-h1 { max-width: 20ch; color: var(--ink-850); }
.hib-hero .t-h1 em { font-style: normal; font-weight: var(--fw-medium); color: var(--green-600); }
.hib-hero .hero-frame__text { max-width: 640px; }
.hib-hero__ctas { justify-content: center; margin-top: 8px; }

/* section rhythm */
.hib-arch, .hib-team, .hib-audience { background: var(--ink-950); }
.hib-method { background: #0d1511; }
.hib-included { padding-bottom: calc(var(--sec-y) + 16px); }
.page-hib .sec-head--split { align-items: start; }
.sec-head--split .stack { align-content: start; }

/* metrics + cards */
.hib-package .stat-card { gap: 16px; }
.hib-package .stat-card__text { margin-top: -8px; }
.feature-card .card__title .tag { margin-left: 6px; vertical-align: 2px; }
.feature-card .counter { margin-top: 20px; }
.feature-card .counter + .card__title { margin-top: 6px; }

/* architecture: 3 nodes with arrows */
.arch { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 16px; }
.arch__node { gap: 12px; }
.arch__node .checklist { margin-top: 8px; }
.arch__node .checklist li { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-body); }
.arch__node.is-core { background: linear-gradient(#13241a, #0e1611); border-color: transparent; box-shadow: var(--shadow-glow); }
.arch__arrow { align-self: center; font-size: 22px; color: var(--accent); }
.arch__note { max-width: 780px; margin: 40px auto 0; text-align: center; }
@media (max-width: 900px) {
  .arch { grid-template-columns: 1fr; }
  .arch__arrow { justify-self: center; transform: rotate(90deg); }
}

/* methodology phases inside the accordion */
.phases .accordion__q { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; letter-spacing: .04em; }
.phase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0 50px 28px 42px; }
.phase__col { display: grid; gap: 8px; align-content: start; }
.phase__col p { padding: 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-muted); }
.phase__col.is-milestone p { color: var(--text); font-weight: var(--fw-medium); }
.phase__col.is-milestone .t-label { color: var(--accent-text); }
@media (max-width: 800px) { .phase { grid-template-columns: 1fr; padding: 0 0 24px 42px; } }

/* notes, audience */
.hib-note { margin-top: 28px; }
.hib-audience__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.hib-audience__list { gap: 16px; }
.hib-audience__list li { align-items: flex-start; font-weight: var(--fw-regular); color: var(--text-body); }
.hib-audience__list li::before { margin-top: 1px; }
.hib-audience__list strong { color: var(--text); font-weight: var(--fw-medium); }
.hib-audience__grid .hib-note { margin-top: 0; }
@media (max-width: 900px) { .hib-audience__grid { grid-template-columns: 1fr; } }

.cta-band__actions { justify-content: flex-end; }
@media (max-width: 1000px) { .cta-band__actions { justify-content: flex-start; } }
@media (max-width: 900px) { .hib-hero .hero-frame { margin: 0 8px; } .hib-hero .hero-frame__inner { padding-block: 64px; } }