/* Only the custom landing page changes the viewport layout. */
body:has(.hmac-home) { height: 100dvh; }
body:has(.hmac-home) > .full.height { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body:has(.hmac-home) .page-footer { flex-shrink: 0; }
.hmac-home.page-content { flex: 1; min-height: 0; display: flex; padding: 0; }
.hmac-home .hmac-shell { margin: 0 auto !important; width: min(1320px, 100%); min-height: 0; padding: clamp(16px, 4vh, 48px) clamp(20px, 5vw, 72px) clamp(14px, 3vh, 32px); display: flex; flex-direction: column; gap: clamp(16px, 4vh, 44px); }
.hmac-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); }
.hmac-eyebrow { margin: 0 0 clamp(12px, 2vh, 24px); color: var(--color-text-light-2); font-size: 11px; letter-spacing: .15em; font-weight: 600; }
.hmac-copy h1 { margin: 0; font-size: clamp(27px, min(3.25vw, 5.3vh), 48px); line-height: 1.35; letter-spacing: -.055em; font-weight: 750; word-break: keep-all; }
.hmac-copy h1 span { color: var(--color-primary); }
.hmac-description { margin: clamp(12px, 2.5vh, 24px) 0 0; font-size: 14px; color: var(--color-text-light-2); word-break: keep-all; }
.hmac-actions { display: flex; align-items: center; gap: 20px; margin-top: clamp(16px, 3vh, 32px); font-size: 13px; }
.hmac-primary { display: inline-flex; gap: 24px; align-items: center; padding: 13px 18px; border-radius: 7px; color: var(--color-primary-contrast) !important; background: var(--color-primary); font-weight: 600; }
.hmac-secondary { color: var(--color-text-light-1); }
.hmac-primary:hover { filter: brightness(.94); }
.hmac-visual { align-self: stretch; position: relative; min-height: 0; max-height: 540px; border: 1px solid var(--color-secondary); border-radius: 20px; overflow: hidden; background: var(--color-box-header); display: grid; place-items: center; }
.hmac-visual-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(var(--color-secondary) 1px, transparent 1px), linear-gradient(90deg, var(--color-secondary) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse, #000, transparent 75%); }
.hmac-visual-center { position: relative; display: flex; flex-direction: column; gap: 16px; align-items: center; color: var(--color-text-light-2); font-size: 14px; }
.hmac-code { font-family: monospace; color: var(--color-primary); font-size: clamp(50px, 7vw, 100px); line-height: 1.2; font-weight: 300; }
.hmac-visual-center small { letter-spacing: .2em; font-size: 10px; }
.hmac-visual-caption { position: absolute; bottom: 20px; left: 24px; font-size: 11px; color: var(--color-text-light-2); }
.hmac-family { flex-shrink: 0; border-top: 1px solid var(--color-secondary); padding-top: clamp(12px, 2.5vh, 24px); }
.hmac-family-heading { display: flex; align-items: baseline; gap: 18px; }
.hmac-family-heading h2 { margin: 0; font-size: 13px; font-weight: 600; }
.hmac-family-heading > span { font-size: 11px; color: var(--color-text-light-2); }
.hmac-family-list { list-style: none; padding: 0; margin: clamp(12px, 2vh, 22px) 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.hmac-family-list li { min-width: 0; padding: 10px 0; font-size: 14px; color: var(--color-text-light-1); text-align: center; word-break: keep-all; }
@media (max-width: 760px) {
  .hmac-home .hmac-shell { padding: 18px 22px; gap: 18px; }
  .hmac-hero { grid-template-columns: 1fr .7fr; gap: 18px; }
  .hmac-copy h1 { font-size: clamp(23px, 4vw, 30px); }
  .hmac-eyebrow { font-size: 9px; letter-spacing: .08em; }
  .hmac-description { font-size: 12px; }
  .hmac-actions { gap: 12px; font-size: 11px; flex-wrap: wrap; }
  .hmac-primary { padding: 10px 12px; gap: 12px; }
  .hmac-visual-center > span:not(.hmac-code), .hmac-visual-center small { display: none; }
  .hmac-family-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hmac-family-heading > span { display: none; }
  .hmac-family-list li { font-size: 12px; padding: 6px 0; }
  }
@media (max-width: 460px) {
  .hmac-hero { grid-template-columns: 1fr; }
  .hmac-visual { display: none; }
  .hmac-copy h1 { font-size: clamp(25px, 7vw, 32px); }
  .hmac-actions { flex-wrap: nowrap; }
}
@media (max-height: 620px) and (min-width: 761px) {
  .hmac-home .hmac-shell { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .hmac-copy h1 { font-size: clamp(24px, 4.8vh, 30px); }
  .hmac-eyebrow { margin-bottom: 8px; }
  .hmac-description { margin-top: 10px; }
  .hmac-actions { margin-top: 12px; }
}