@import url('https://fonts.googleapis.com/css2?family=Michroma&display=swap');

/* V3.3 // focused polish from visual review */

/* 1) IDENTITY: reserve a clean footer zone so the status row and tagline never collide. */
.mock-hero .mock-identity .identity-card__content{
  height:100%;
  padding:17px 21px 64px!important;
  display:flex;
  flex-direction:column;
}
.mock-hero .mock-identity .identity-card__label{
  flex:0 0 auto;
}
.mock-hero .mock-identity dl{
  flex:1 1 auto;
  display:grid;
  align-content:start;
  margin:0!important;
  min-height:0;
}
.mock-hero .mock-identity dl>div{
  min-height:0;
  padding:7px 0!important;
}
.mock-hero .mock-identity dd#heroPresence{
  max-width:150px;
  justify-content:flex-end;
  text-align:right;
  line-height:1.25;
  white-space:normal;
}
.mock-hero .mock-identity .identity-card__tag{
  left:21px!important;
  right:21px!important;
  bottom:13px!important;
  min-height:36px;
  display:flex;
  align-items:center;
  padding:5px 9px!important;
  line-height:1.35!important;
  background:linear-gradient(90deg,rgba(5,18,29,.7),rgba(5,18,29,.16))!important;
  border-top:1px solid rgba(116,207,255,.12);
  border-left:1px solid rgba(116,207,255,.35)!important;
  overflow:hidden;
}

/* 2) BIO ICONS: replace the small text glyphs with consistent 24px line icons (~35% larger). */
.mock-hero-main .mock-bio p{
  min-height:31px;
  align-items:center;
  gap:12px;
}
.mock-hero-main .mock-bio p>span{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px;
  display:block;
  font-size:0!important;
  line-height:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;
  opacity:.98;
}
.mock-hero-main .mock-bio p:nth-child(1)>span{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7c9df' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.25 6-11a6 6 0 1 0-12 0c0 5.75 6 11 6 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.15'/%3E%3C/svg%3E");
}
.mock-hero-main .mock-bio p:nth-child(2)>span{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7c9df' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z'/%3E%3C/svg%3E");
}

/* 3) SPD WORDMARKS ONLY: use a Eurostile-like futuristic face close to the mockup. */
.mock-brand strong,
.hero-watermark,
.footer-mark strong,
.mock-hero-line b{
  font-family:"Michroma","Arial Narrow",sans-serif!important;
  font-weight:400!important;
  font-style:normal;
  text-transform:uppercase;
}
.mock-brand strong{
  font-size:25px!important;
  letter-spacing:-.075em!important;
  transform:scaleX(.92);
  transform-origin:left center;
  line-height:.86!important;
}
.hero-watermark{
  letter-spacing:-.075em!important;
  font-weight:400!important;
  transform:scaleX(.94);
  transform-origin:right top;
}
.hero-watermark small{
  font-family:"Space Mono",ui-monospace,monospace!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
}
.footer-mark strong{
  letter-spacing:-.075em!important;
  transform:scaleX(.92);
  transform-origin:left center;
}
.mock-hero-line b{
  letter-spacing:-.035em!important;
  font-size:.95em;
}

@media(max-width:700px){
  .mock-hero .mock-identity .identity-card__content{padding-bottom:62px!important}
  .mock-hero-main .mock-bio p>span{width:23px!important;height:23px!important;flex-basis:23px;background-size:23px 23px}
}